Skip to content

Commit 8c95749

Browse files
oknozoroknozor
committed
docs: add custom hljs theme
1 parent 8026e2c commit 8c95749

File tree

17 files changed

+928
-20
lines changed

17 files changed

+928
-20
lines changed

‎docs/docs/.vuepress/config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {defaultTheme, defineUserConfig} from 'vuepress'
22
import {searchPlugin} from "@vuepress/plugin-search";
3+
import {highlightjsPlugin} from "./hljs/hlJsPlugin";
34

45
export default defineUserConfig({
56
lang: 'en-US',
@@ -22,10 +23,12 @@ export default defineUserConfig({
2223
['meta', {property: 'og:width', content: '100'}],
2324
],
2425

26+
2527
plugins: [
2628
searchPlugin({
2729
// options
2830
}),
31+
highlightjsPlugin,
2932
],
3033

3134
theme: defaultTheme({

‎docs/docs/.vuepress/hljs/bombadil.ts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
export default function (hljs: any): any {
2+
const regex = hljs.regex;
3+
const VAR = {};
4+
const BRACED_VAR = {
5+
begin: /\$\{/,
6+
end: /\}/,
7+
contains: [
8+
"self",
9+
{
10+
begin: /:-/,
11+
contains: [VAR]
12+
} // default values
13+
]
14+
};
15+
Object.assign(VAR, {
16+
className: 'variable',
17+
variants: [
18+
{
19+
begin: regex.concat(/\$[\w\d#@][\w\d_]*/,
20+
// negative look-ahead tries to avoid matching patterns that are not
21+
// Perl at all like $ident$, @ident@, etc.
22+
`(?![\\w\\d])(?![$])`)
23+
},
24+
BRACED_VAR
25+
]
26+
});
27+
28+
const SUBST = {
29+
className: 'subst',
30+
begin: /\$\(/, end: /\)/,
31+
contains: [hljs.BACKSLASH_ESCAPE]
32+
};
33+
const HERE_DOC = {
34+
begin: /<<-?\s*(?=\w+)/,
35+
starts: {
36+
contains: [
37+
hljs.END_SAME_AS_BEGIN({
38+
begin: /(\w+)/,
39+
end: /(\w+)/,
40+
className: 'string'
41+
})
42+
]
43+
}
44+
};
45+
const QUOTE_STRING = {
46+
className: 'string',
47+
begin: /"/, end: /"/,
48+
contains: [
49+
hljs.BACKSLASH_ESCAPE,
50+
VAR,
51+
SUBST
52+
]
53+
};
54+
SUBST.contains.push(QUOTE_STRING);
55+
const ESCAPED_QUOTE = {
56+
className: '',
57+
begin: /\\"/
58+
59+
};
60+
const APOS_STRING = {
61+
className: 'string',
62+
begin: /'/, end: /'/
63+
};
64+
65+
const ARITHMETIC = {
66+
begin: /\$\(\(/,
67+
end: /\)\)/,
68+
contains: [
69+
{begin: /\d+#[0-9a-f]+/, className: "number"},
70+
hljs.NUMBER_MODE,
71+
VAR
72+
]
73+
};
74+
75+
// to consume paths to prevent keyword matches inside them
76+
const PATH_MODE = {
77+
match: /(\/[a-z._-]+)+/
78+
};
79+
80+
const COMMANDS = [
81+
"cargo",
82+
"yay",
83+
"bombadil",
84+
"pacman",
85+
"git",
86+
"mkdir",
87+
"cd",
88+
];
89+
90+
return {
91+
name: 'Bash',
92+
aliases: ['sh'],
93+
keywords: {
94+
$pattern: /\b[a-z._-]+\b/,
95+
built_in: [
96+
...COMMANDS
97+
]
98+
},
99+
contains: [
100+
ARITHMETIC,
101+
hljs.HASH_COMMENT_MODE,
102+
HERE_DOC,
103+
PATH_MODE,
104+
QUOTE_STRING,
105+
ESCAPED_QUOTE,
106+
APOS_STRING,
107+
VAR
108+
]
109+
};
110+
}

‎docs/docs/.vuepress/hljs/hlJsPlugin.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import hljs from 'highlight.js/lib/core';
2+
import toml from 'highlight.js/lib/languages/ini';
3+
import bash from './bombadil';
4+
import yaml from 'highlight.js/lib/languages/yaml';
5+
6+
hljs.registerLanguage('bash', bash);
7+
hljs.registerLanguage('yaml', yaml);
8+
hljs.registerLanguage('toml', toml);
9+
10+
export const highlightjsPlugin = () => ({
11+
name: '@vuepress/plugin-highlightjs',
12+
async extendsMarkdown(md) {
13+
md.options.highlight = (code, lang) => {
14+
if (lang == "text") {
15+
return code;
16+
} else {
17+
return hljs.highlight(code, {language: lang, ignoreIllegals: true}).value
18+
}
19+
}
20+
},
21+
})
22+

‎docs/docs/.vuepress/styles/highlight.scss‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
pre code.hljs {
2+
display: block;
3+
overflow-x: auto;
4+
padding: 1em
5+
}
6+
7+
code.hljs {
8+
padding: 3px 5px
9+
}
10+
11+
.hljs {
12+
background: #2e3440
13+
}
14+
15+
.hljs, .hljs-subst {
16+
color: #d8dee9
17+
}
18+
19+
.hljs-selector-tag {
20+
color: #81a1c1
21+
}
22+
23+
.hljs-selector-id {
24+
color: #8fbcbb;
25+
font-weight: 700
26+
}
27+
28+
.hljs-selector-attr, .hljs-selector-class {
29+
color: #8fbcbb
30+
}
31+
32+
.hljs-property, .hljs-selector-pseudo {
33+
color: #88c0d0
34+
}
35+
36+
.hljs-addition {
37+
background-color: rgba(163, 190, 140, .5)
38+
}
39+
40+
.hljs-deletion {
41+
background-color: rgba(191, 97, 106, .5)
42+
}
43+
44+
.hljs-built_in, .hljs-class, .hljs-type {
45+
color: #8fbcbb
46+
}
47+
48+
.hljs-function, .hljs-function > .hljs-title, .hljs-title.hljs-function {
49+
color: #88c0d0
50+
}
51+
52+
.hljs-keyword, .hljs-literal, .hljs-symbol {
53+
color: #81a1c1
54+
}
55+
56+
.hljs-number {
57+
color: #b48ead
58+
}
59+
60+
.hljs-regexp {
61+
color: #ebcb8b
62+
}
63+
64+
.hljs-string {
65+
color: #a3be8c
66+
}
67+
68+
.hljs-title {
69+
color: #8fbcbb
70+
}
71+
72+
.hljs-params {
73+
color: #d8dee9
74+
}
75+
76+
.hljs-bullet {
77+
color: #81a1c1
78+
}
79+
80+
.hljs-code {
81+
color: #8fbcbb
82+
}
83+
84+
.hljs-emphasis {
85+
font-style: italic
86+
}
87+
88+
.hljs-formula {
89+
color: #8fbcbb
90+
}
91+
92+
.hljs-strong {
93+
font-weight: 700
94+
}
95+
96+
.hljs-link:hover {
97+
text-decoration: underline
98+
}
99+
100+
.hljs-comment, .hljs-quote {
101+
color: #4c566a
102+
}
103+
104+
.hljs-doctag {
105+
color: #8fbcbb
106+
}
107+
108+
.hljs-meta, .hljs-meta .hljs-keyword {
109+
color: #5e81ac
110+
}
111+
112+
.hljs-meta .hljs-string {
113+
color: #a3be8c
114+
}
115+
116+
.hljs-attr {
117+
color: #8fbcbb
118+
}
119+
120+
.hljs-attribute {
121+
color: #d8dee9
122+
}
123+
124+
.hljs-name {
125+
color: #81a1c1
126+
}
127+
128+
.hljs-section {
129+
color: #88c0d0
130+
}
131+
132+
.hljs-tag {
133+
color: #81a1c1
134+
}
135+
136+
.hljs-template-variable, .hljs-variable {
137+
color: #d8dee9
138+
}
139+
140+
.hljs-template-tag {
141+
color: #5e81ac
142+
}
143+
144+
.language-abnf .hljs-attribute {
145+
color: #88c0d0
146+
}
147+
148+
.language-abnf .hljs-symbol {
149+
color: #ebcb8b
150+
}
151+
152+
.language-apache .hljs-attribute {
153+
color: #88c0d0
154+
}
155+
156+
.language-apache .hljs-section {
157+
color: #81a1c1
158+
}
159+
160+
.language-arduino .hljs-built_in {
161+
color: #88c0d0
162+
}
163+
164+
.language-aspectj .hljs-meta {
165+
color: #d08770
166+
}
167+
168+
.language-aspectj > .hljs-title {
169+
color: #88c0d0
170+
}
171+
172+
.language-bnf .hljs-attribute {
173+
color: #8fbcbb
174+
}
175+
176+
.language-clojure .hljs-name {
177+
color: #88c0d0
178+
}
179+
180+
.language-clojure .hljs-symbol {
181+
color: #ebcb8b
182+
}
183+
184+
.language-coq .hljs-built_in {
185+
color: #88c0d0
186+
}
187+
188+
.language-cpp .hljs-meta .hljs-string {
189+
color: #8fbcbb
190+
}
191+
192+
.language-css .hljs-built_in {
193+
color: #88c0d0
194+
}
195+
196+
.language-css .hljs-keyword {
197+
color: #d08770
198+
}
199+
200+
.language-diff .hljs-meta, .language-ebnf .hljs-attribute {
201+
color: #8fbcbb
202+
}
203+
204+
.language-glsl .hljs-built_in {
205+
color: #88c0d0
206+
}
207+
208+
.language-groovy .hljs-meta:not(:first-child), .language-haxe .hljs-meta, .language-java .hljs-meta {
209+
color: #d08770
210+
}
211+
212+
.language-ldif .hljs-attribute {
213+
color: #8fbcbb
214+
}
215+
216+
.language-lisp .hljs-name, .language-lua .hljs-built_in, .language-moonscript .hljs-built_in, .language-nginx .hljs-attribute {
217+
color: #88c0d0
218+
}
219+
220+
.language-nginx .hljs-section {
221+
color: #5e81ac
222+
}
223+
224+
.language-pf .hljs-built_in, .language-processing .hljs-built_in {
225+
color: #88c0d0
226+
}
227+
228+
.language-scss .hljs-keyword, .language-stylus .hljs-keyword {
229+
color: #81a1c1
230+
}
231+
232+
.language-swift .hljs-meta {
233+
color: #d08770
234+
}
235+
236+
.language-vim .hljs-built_in {
237+
color: #88c0d0;
238+
font-style: italic
239+
}
240+
241+
.language-yaml .hljs-meta {
242+
color: #d08770
243+
}

0 commit comments

Comments
 (0)