Skip to content

Commit fb9211f

Browse files
YukaiiYukaii
committed
Render with prism & highlightjs
1 parent 01b1faa commit fb9211f

6 files changed

Lines changed: 400 additions & 2 deletions

File tree

‎package-lock.json‎

Lines changed: 52 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"css-loader": "^3.1.0",
4848
"flowchart.js": "^1.12.2",
4949
"glob": "^7.1.4",
50+
"highlight.js": "^9.15.8",
5051
"ignore-loader": "^0.1.2",
5152
"imports-loader": "^0.8.0",
5253
"jquery": "^3.4.1",
@@ -55,6 +56,7 @@
5556
"mermaid": "^8.2.3",
5657
"mini-css-extract-plugin": "^0.8.0",
5758
"mocha": "^6.1.4",
59+
"prismjs": "^1.17.1",
5860
"raphael": "git+ssh://git@github.com/DmitryBaranovskiy/raphael.git#v2.2.7",
5961
"script-loader": "^0.7.2",
6062
"style-loader": "^0.23.1",

‎src/extension.ts‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,60 @@ import * as vscode from 'vscode';
55
import * as markdownitContainer from 'markdown-it-container';
66
import * as S from 'string';
77

8+
import * as Prism from 'prismjs';
9+
10+
require('prismjs/components/prism-wiki')
11+
require('prismjs/components/prism-haskell')
12+
require('prismjs/components/prism-go')
13+
require('prismjs/components/prism-typescript')
14+
require('prismjs/components/prism-jsx')
15+
require('prismjs/components/prism-makefile')
16+
require('prismjs/components/prism-gherkin')
17+
require('prismjs/components/prism-sas')
18+
require('prismjs/components/prism-javascript')
19+
require('prismjs/components/prism-json')
20+
require('prismjs/components/prism-c')
21+
require('prismjs/components/prism-cpp')
22+
require('prismjs/components/prism-java')
23+
require('prismjs/components/prism-csharp')
24+
require('prismjs/components/prism-objectivec')
25+
require('prismjs/components/prism-scala')
26+
require('prismjs/components/prism-kotlin')
27+
require('prismjs/components/prism-groovy')
28+
require('prismjs/components/prism-r')
29+
require('prismjs/components/prism-rust')
30+
require('prismjs/components/prism-yaml')
31+
require('prismjs/components/prism-pug')
32+
require('prismjs/components/prism-sass')
33+
34+
import * as hljs from 'highlight.js/lib/highlight';
35+
36+
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'))
37+
hljs.registerLanguage('clojure', require('highlight.js/lib/languages/clojure'))
38+
hljs.registerLanguage('coffeescript', require('highlight.js/lib/languages/coffeescript'))
39+
hljs.registerLanguage('cs', require('highlight.js/lib/languages/cs'))
40+
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'))
41+
hljs.registerLanguage('elm', require('highlight.js/lib/languages/elm'))
42+
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
43+
hljs.registerLanguage('handlebars', require('highlight.js/lib/languages/handlebars'))
44+
hljs.registerLanguage('http', require('highlight.js/lib/languages/http'))
45+
hljs.registerLanguage('ini', require('highlight.js/lib/languages/ini'))
46+
hljs.registerLanguage('prolog', require('highlight.js/lib/languages/prolog'))
47+
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'))
48+
hljs.registerLanguage('ruby', require('highlight.js/lib/languages/ruby'))
49+
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'))
50+
hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'))
51+
hljs.registerLanguage('diff', require('highlight.js/lib/languages/diff'))
52+
hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'))
53+
hljs.registerLanguage('php', require('highlight.js/lib/languages/php'))
54+
hljs.registerLanguage('lua', require('highlight.js/lib/languages/lua'))
55+
hljs.registerLanguage('nginx', require('highlight.js/lib/languages/nginx'))
56+
hljs.registerLanguage('perl', require('highlight.js/lib/languages/perl'))
57+
hljs.registerLanguage('dockerfile', require('highlight.js/lib/languages/dockerfile'))
58+
59+
let prismLangs = ['haskell', 'go', 'groovy', 'typescript', 'json', 'jsx', 'gherkin', 'sas', 'javascript', 'c', 'cpp', 'java', 'csharp', 'objectivec', 'scala', 'kotlin', 'r', 'rust', 'yaml', 'pug', 'sass']
60+
61+
862
function render( tokens, idx, options, env, self): string {
963
tokens[idx].attrJoin('role', 'alert');
1064
tokens[idx].attrJoin('class', 'alert');
@@ -47,7 +101,10 @@ function parseFenceCodeParams (lang) {
47101
}
48102

49103
function highlightRender (code, lang) {
50-
if (!lang || /no(-?)highlight|plain|text/.test(lang)) { return }
104+
if (!lang || /no(-?)highlight|plain|text/.test(lang)) {
105+
// fallback
106+
return highlight(code, lang);
107+
}
51108
// support adding extra attributes for fence code block
52109
// ex: ```graphviz {engine="neato"}
53110
const params = parseFenceCodeParams(lang) as any;
@@ -69,9 +126,30 @@ function highlightRender (code, lang) {
69126
} else if (lang === 'abc') {
70127
return `<span class="abc raw">${code}</span>`
71128
}
129+
72130
const result = {
73131
value: code
74132
}
133+
134+
if (prismLangs.indexOf(lang) !== -1) {
135+
code = S(code).unescapeHTML().s
136+
result.value = Prism.highlight(code, Prism.languages[lang])
137+
} else if (lang === 'tiddlywiki' || lang === 'mediawiki') {
138+
code = S(code).unescapeHTML().s
139+
result.value = Prism.highlight(code, Prism.languages.wiki)
140+
} else if (lang === 'cmake') {
141+
code = S(code).unescapeHTML().s
142+
result.value = Prism.highlight(code, Prism.languages.makefile)
143+
} else {
144+
code = S(code).unescapeHTML().s
145+
const languages = hljs.listLanguages()
146+
if (!languages.includes(lang)) {
147+
result.value = hljs.highlightAuto(code).value
148+
} else {
149+
result.value = hljs.highlight(lang, code).value
150+
}
151+
}
152+
75153
const showlinenumbers = /=$|=\d+$|=\+$/.test(lang)
76154
if (showlinenumbers) {
77155
let startnumber = 1
@@ -86,9 +164,11 @@ function highlightRender (code, lang) {
86164
const linegutter = `<div class='gutter linenumber${continuelinenumber ? ' continue' : ''}'>${linenumbers.join('\n')}</div>`
87165
result.value = `<div class='wrapper'>${linegutter}<div class='code'>${result.value}</div></div>`
88166
}
89-
return result.value
167+
return result.value;
90168
}
91169

170+
let highlight
171+
92172
// this method is called when your extension is activated
93173
// your extension is activated the very first time the command is executed
94174
export function activate(context: vscode.ExtensionContext) {
@@ -121,6 +201,7 @@ export function activate(context: vscode.ExtensionContext) {
121201

122202
md.options.linkify = true;
123203
md.options.typographer = true;
204+
highlight = md.options.highlight;
124205
md.options.highlight = highlightRender;
125206

126207
return md;

‎src/github-gist.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* GitHub Gist Theme
3+
* Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
4+
*/
5+
6+
.hljs {
7+
display: block;
8+
background: white;
9+
padding: 0.5em;
10+
color: #333333;
11+
overflow-x: auto;
12+
}
13+
14+
.hljs-comment,
15+
.hljs-meta {
16+
color: #969896;
17+
}
18+
19+
.hljs-string,
20+
.hljs-variable,
21+
.hljs-template-variable,
22+
.hljs-strong,
23+
.hljs-emphasis,
24+
.hljs-quote {
25+
color: #df5000;
26+
}
27+
28+
.hljs-keyword,
29+
.hljs-selector-tag,
30+
.hljs-type {
31+
color: #a71d5d;
32+
}
33+
34+
.hljs-number,
35+
.hljs-literal,
36+
.hljs-symbol,
37+
.hljs-bullet,
38+
.hljs-attribute {
39+
color: #0086b3;
40+
}
41+
42+
.hljs-built_in,
43+
.hljs-builtin-name {
44+
color: #005cc5;
45+
}
46+
47+
.hljs-section,
48+
.hljs-name {
49+
color: #63a35c;
50+
}
51+
52+
.hljs-tag {
53+
color: #333333;
54+
}
55+
56+
.hljs-title,
57+
.hljs-attr,
58+
.hljs-selector-id,
59+
.hljs-selector-class,
60+
.hljs-selector-attr,
61+
.hljs-selector-pseudo {
62+
color: #795da3;
63+
}
64+
65+
.hljs-addition {
66+
color: #55a532;
67+
background-color: #eaffea;
68+
}
69+
70+
.hljs-deletion {
71+
color: #bd2c00;
72+
background-color: #ffecec;
73+
}
74+
75+
.hljs-link {
76+
text-decoration: underline;
77+
}

0 commit comments

Comments
 (0)