vdoc: add syntax highlighting

cmd/tools/vdoc-resources/doc.css

@@ -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,

cmd/tools/vdoc-resources/v-prism.css

@@ -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;
+}

cmd/tools/vdoc-resources/v-prism.js

@@ -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'];
+})();

cmd/tools/vdoc.v

@@ -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'))
 			}
 		}