Add basic code highlighting using prism

lib/transformer.js

@@ -7,6 +7,10 @@ import frontmatter from "remark-frontmatter";
 import externalLinks from "remark-external-links";
 import highlight from "remark-highlight.js";
 import {Node} from "./node";
+import rehypePrism from 'rehype-prism-plus'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
+
 import {getAllMarkdownFiles, toFilePath, toSlug} from "./utils";
 
 export const Transformer = {
@@ -72,7 +76,9 @@ export const Transformer = {
 
                 aliasDivider: "|"
             })
-            .use(html)
+            .use(remarkRehype)
+            .use(rehypePrism)
+            .use(rehypeStringify)
             .process(sanitizedContent,
                 function (err, file) {
                     htmlContent.push(String(file).replace("\n", ""))

package.json

@@ -30,6 +30,7 @@
     "react-cytoscapejs": "^1.2.1",
     "react-dom": "^17.0.2",
     "react-folder-tree": "^5.0.3",
+    "rehype-prism-plus": "^1.3.2",
     "rehype-react": "^7.0.4",
     "rehype-stringify": "^9.0.3",
     "remark": "^13.0.0",

pages/_app.js

@@ -1,6 +1,6 @@
 import '../styles/global.css'
 import '../styles/style.css'
-
+import "../styles/prism.css"
 
 export default function App({ Component, pageProps }) {
 

styles/prism.css

@@ -0,0 +1,103 @@
+/* PrismJS 1.28.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+code[class*=language-], pre[class*=language-] {
+    color: #000;
+    background: 0 0;
+    text-shadow: 0 1px #fff;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: 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
+}
+
+code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc
+}
+
+code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection {
+    text-shadow: none;
+    background: #b3d4fc
+}
+
+@media print {
+    code[class*=language-], pre[class*=language-] {
+        text-shadow: none
+    }
+}
+
+pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto
+}
+
+:not(pre) > code[class*=language-], pre[class*=language-] {
+    background: #f5f2f0
+}
+
+:not(pre) > code[class*=language-] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal
+}
+
+.token.cdata, .token.comment, .token.doctype, .token.prolog {
+    color: #708090
+}
+
+.token.punctuation {
+    color: #999
+}
+
+.token.namespace {
+    opacity: .7
+}
+
+.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag {
+    color: #905
+}
+
+.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
+    color: #690
+}
+
+.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
+    color: #9a6e3a;
+    background: hsla(0, 0%, 100%, .5)
+}
+
+.token.atrule, .token.attr-value, .token.keyword {
+    color: #07a
+}
+
+.token.class-name, .token.function {
+    color: #dd4a68
+}
+
+.token.important, .token.regex, .token.variable {
+    color: #e90
+}
+
+.token.bold, .token.important {
+    font-weight: 700
+}
+
+.token.italic {
+    font-style: italic
+}
+
+.token.entity {
+    cursor: help
+}