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