docs: Add syntax hightlighting for code blocks

ericselin · Dec 4, 2021 · 61ad567 · 61ad567
1 parent bd685e7
commit 61ad567
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 9 deletions.
diff --git a/docs/layouts/docs/_default.css b/docs/layouts/docs/_default.css
@@ -19,3 +19,106 @@ iframe {
 	height: max(10rem, 20vh);
 	margin: 1em 0;
 }
+
+/* hljs min */
+/*!
+  Theme: Nord
+  Author: arcticicestudio
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/pre code.hljs {
+ display:block;
+ overflow-x:auto;
+ padding:1em
+}
+code.hljs {
+ padding:3px 5px
+}
+.hljs {
+ color:#e5e9f0;
+ background:#2e3440
+}
+.hljs ::selection,
+.hljs::selection {
+ background-color:#434c5e;
+ color:#e5e9f0
+}
+.hljs-comment {
+ color:#4c566a
+}
+.hljs-tag {
+ color:#d8dee9
+}
+.hljs-operator,
+.hljs-punctuation,
+.hljs-subst {
+ color:#e5e9f0
+}
+.hljs-operator {
+ opacity:.7
+}
+.hljs-bullet,
+.hljs-deletion,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-template-variable,
+.hljs-variable {
+ color:#bf616a
+}
+.hljs-attr,
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-symbol,
+.hljs-variable.constant_ {
+ color:#d08770
+}
+.hljs-class .hljs-title,
+.hljs-title,
+.hljs-title.class_ {
+ color:#ebcb8b
+}
+.hljs-strong {
+ font-weight:700;
+ color:#ebcb8b
+}
+.hljs-addition,
+.hljs-code,
+.hljs-string,
+.hljs-title.class_.inherited__ {
+ color:#a3be8c
+}
+.hljs-built_in,
+.hljs-doctag,
+.hljs-keyword.hljs-atrule,
+.hljs-quote,
+.hljs-regexp {
+ color:#88c0d0
+}
+.hljs-attribute,
+.hljs-function .hljs-title,
+.hljs-section,
+.hljs-title.function_,
+.ruby .hljs-property {
+ color:#81a1c1
+}
+.diff .hljs-meta,
+.hljs-keyword,
+.hljs-template-tag,
+.hljs-type {
+ color:#b48ead
+}
+.hljs-emphasis {
+ color:#b48ead;
+ font-style:italic
+}
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+ color:#5e81ac
+}
+.hljs-meta .hljs-keyword,
+.hljs-meta-keyword {
+ font-weight:700
+}
diff --git a/docs/layouts/docs/_default.tsx b/docs/layouts/docs/_default.tsx
@@ -3,17 +3,10 @@
 import { Component, h, sortWeightAsc } from "../../../mod.ts";
 import { path } from "../../../deps.ts";
 import { Base } from "../_base.tsx";
-
-// TODO make this a library function?
-const htmlEncode = (html: string): string =>
-  html
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
+import hljs from "https://esm.sh/highlight.js?no-check";
 
 const codeBlock = (filename: string, rawCode: string): string =>
-  `<code>${filename}</code><pre><code>${htmlEncode(rawCode)}</code></pre>`;
+  `<code>${filename}</code><pre><code>${hljs.highlightAuto(rawCode).value}</code></pre>`;
 
 const iframe = (filename: string): string =>
   `<code>${filename}</code><iframe src="${filename}"></iframe>`;