vdoc: add syntax highlighting
Daniel Däschle
GitHub
parent
c1fc61200c
commit
0aadde2673
|
|
@ -6,7 +6,6 @@
|
|||
--ref-symbol-color: #dae1e7;
|
||||
--ref-symbol-hover-color: #b8c2cc;
|
||||
--title-bottom-line-color: #f1f5f8;
|
||||
--code-background-color: #edf2f7;
|
||||
--code-signature-border-color: #a0aec0;
|
||||
--menu-background-color: #4b6c88;
|
||||
--menu-font-color: #fff;
|
||||
|
|
@ -43,7 +42,6 @@ body {
|
|||
--ref-symbol-color: #2d3748;
|
||||
--ref-symbol-hover-color: #4a5568;
|
||||
--title-bottom-line-color: #2d3748;
|
||||
--code-background-color: #2d3748;
|
||||
--code-signature-border-color: #4a5568;
|
||||
--menu-background-color: #2d3748;
|
||||
--menu-font-color: #fff;
|
||||
|
|
@ -275,17 +273,6 @@ body {
|
|||
.doc-content > .doc-node > ul > li .task-list-item-checkbox {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.doc-content pre > code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 0.9rem;
|
||||
background-color: #edf2f7;
|
||||
background-color: var(--code-background-color);
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
border-radius: 0.25rem;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.doc-content > .doc-node > .title h1,
|
||||
.doc-content > .doc-node > .title h2,
|
||||
.doc-content > .doc-node > .title h3,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
:root {
|
||||
--code-default-text-color: #5c6e74;
|
||||
--code-background-color: #edf2f7;
|
||||
--code-keyword-text-color: #2b6cb0;
|
||||
--code-builtin-text-color: #0a0a0a;
|
||||
--code-function-text-color: #319795;
|
||||
--code-comment-text-color: #93a1a1;
|
||||
--code-punctuation-text-color: #999999;
|
||||
--code-symbol-text-color: #702459;
|
||||
--code-operator-text-color: #a67f59;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
--code-default-text-color: #cbd5e0;
|
||||
--code-background-color: #2d3748;
|
||||
--code-builtin-text-color: #68d391;
|
||||
--code-keyword-text-color: #63b3ed;
|
||||
--code-function-text-color: #4fd1c5;
|
||||
--code-comment-text-color: #a0aec0;
|
||||
--code-punctuation-text-color: #a0aec0;
|
||||
--code-symbol-text-color: #ed64a6;
|
||||
}
|
||||
|
||||
/*
|
||||
* General
|
||||
*/
|
||||
pre[class*="language-"],
|
||||
code[class*="language-"] {
|
||||
color: #5c6e74;
|
||||
color: var(--code-default-text-color);
|
||||
font-size: 0.8rem;
|
||||
text-shadow: none;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
background-color: #edf2f7;
|
||||
background-color: var(--code-background-color);
|
||||
display: block;
|
||||
border-radius: 0.25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
* Tokens
|
||||
*/
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #93a1a1;
|
||||
color: var(--code-comment-text-color)
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #999999;
|
||||
color: var(--code-punctuation-text-color);
|
||||
}
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #702459;
|
||||
color: var(--code-symbol-text-color);
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #38a169;
|
||||
color: var(--code-builtin-text-color);
|
||||
}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
color: var(--code-operator-text-color);
|
||||
background: transparent;
|
||||
}
|
||||
.token.boolean,
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #2b6cb0;
|
||||
color: var(--code-keyword-text-color);
|
||||
}
|
||||
.token.function {
|
||||
color: #319795;
|
||||
color: var(--code-function-text-color);
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
(function() {
|
||||
Prism.languages.v = Prism.languages.extend('clike', {
|
||||
keyword: /\b(?:pub|break|const|continue|defer|else|for|fn|go(?:to)?|if|import|module|return|interface|struct|match|type|mut|is|as|map|__global|enum)\b/,
|
||||
builtin: /\b(?:bool|string|i8|i16|int|i64|i128|byte|u16|u32|u64|u128|rune|f32|f64|any_int|any_float|byteptr|voidptr|any)\b/,
|
||||
boolean: /\b(?:_|true|false)\b/,
|
||||
operator: /[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,
|
||||
number: /(?:\b0x[a-f\d]+|(?:\b\d+\.?\d*|\B\.\d+)(?:e[-+]?\d+)?)i?/i,
|
||||
string: {
|
||||
pattern: /(["'`])(?:\\[\s\S]|(?!\1)[^\\])*\1/,
|
||||
greedy: true,
|
||||
},
|
||||
});
|
||||
delete Prism.languages.v['class-name'];
|
||||
})();
|
||||
|
|
@ -150,7 +150,7 @@ fn (cfg DocConfig) gen_html(idx int) string {
|
|||
if head {
|
||||
dnw.write(md_content)
|
||||
} else {
|
||||
dnw.writeln('<pre><code class="signature">${dd.content}</code></pre>')
|
||||
dnw.writeln('<pre class="signature"><code class="language-v">${dd.content}</code></pre>')
|
||||
dnw.writeln(md_content)
|
||||
}
|
||||
dnw.writeln('</section>')
|
||||
|
|
@ -170,6 +170,17 @@ fn (cfg DocConfig) gen_html(idx int) string {
|
|||
}
|
||||
toc.writeln('</li>')
|
||||
} // write head
|
||||
|
||||
// get resources
|
||||
doc_css_min := cfg.get_resource('doc.css', true)
|
||||
doc_js_min := cfg.get_resource('doc.js', false)
|
||||
light_icon := cfg.get_resource('light.svg', true)
|
||||
dark_icon := cfg.get_resource('dark.svg', true)
|
||||
menu_icon := cfg.get_resource('menu.svg', true)
|
||||
arrow_icon := cfg.get_resource('arrow.svg', true)
|
||||
v_prism_js := cfg.get_resource('v-prism.js', false)
|
||||
v_prism_css := cfg.get_resource('v-prism.css', true)
|
||||
|
||||
hw.write('
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
@ -181,17 +192,12 @@ fn (cfg DocConfig) gen_html(idx int) string {
|
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Source+Code+Pro:wght@500&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />')
|
||||
|
||||
// get resources
|
||||
doc_css_min := cfg.get_resource('doc.css', true)
|
||||
light_icon := cfg.get_resource('light.svg', true)
|
||||
dark_icon := cfg.get_resource('dark.svg', true)
|
||||
menu_icon := cfg.get_resource('menu.svg', true)
|
||||
arrow_icon := cfg.get_resource('arrow.svg', true)
|
||||
|
||||
// write css
|
||||
if cfg.inline_assets {
|
||||
hw.write('<style>$v_prism_css</style>')
|
||||
hw.write('<style>$doc_css_min</style>')
|
||||
} else {
|
||||
hw.write('\n <link rel="stylesheet" href="$v_prism_css" />')
|
||||
hw.write('\n <link rel="stylesheet" href="$doc_css_min" />')
|
||||
}
|
||||
|
||||
|
|
@ -279,12 +285,15 @@ fn (cfg DocConfig) gen_html(idx int) string {
|
|||
if cfg.is_multi && cfg.docs.len > 1 && dcs.head.name != 'README' {
|
||||
hw.write('<div class="doc-toc">\n\n<ul>\n${toc.str()}</ul>\n</div>')
|
||||
}
|
||||
doc_js_min := cfg.get_resource('doc.js', false)
|
||||
hw.write('</div></div>')
|
||||
hw.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-clike.min.js"></script>')
|
||||
if cfg.inline_assets {
|
||||
hw.write('<script>$doc_js_min</script>')
|
||||
hw.write('<script>$v_prism_js</script>')
|
||||
} else {
|
||||
hw.write('<script src="$doc_js_min"></script>')
|
||||
hw.write('<script src="$v_prism_js"></script>')
|
||||
}
|
||||
hw.write('</body>
|
||||
</html>')
|
||||
|
|
@ -434,6 +443,8 @@ fn (mut cfg DocConfig) generate_docs_from_file() {
|
|||
}
|
||||
} else {
|
||||
os.rm(os.join_path(cfg.output_path, 'doc.css'))
|
||||
os.rm(os.join_path(cfg.output_path, 'v-prism.css'))
|
||||
os.rm(os.join_path(cfg.output_path, 'v-prism.js'))
|
||||
os.rm(os.join_path(cfg.output_path, 'doc.js'))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue