gh-pages/build: add syntax highlighting, anchors and markdown css

Signed-off-by: Rick Waldron <[email protected]>
SaminaHusain · Jun 2, 2017 · aa43a6b · aa43a6b
1 parent 8a55ea5
commit aa43a6b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
   "devDependencies": {
     "common-tags": "^1.4.0",
     "glob": "^7.1.2",
+    "highlight.js": "^9.12.0",
+    "markdown-toc": "^1.1.0",
     "remarkable": "^1.7.1"
   }
 }
diff --git a/scripts/builder.js b/scripts/builder.js
@@ -7,13 +7,52 @@ const fs = require("fs");
 const ct = require("common-tags");
 const glob = require("glob");
 const Remarkable = require("remarkable");
+const hljs = require("highlight.js");
+const toc = require("markdown-toc");
 
 // Program instances
-const remarkable = new Remarkable({
+const remarkable = new Remarkable("full", {
   html: true,
   linkify: true,
+  highlight(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str).value;
+      } catch (err) {}
+    }
+
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (err) {}
+
+    return "";
+  }
+});
+
+remarkable.use(remarkable => {
+  let conclusion = 0;
+  remarkable.renderer.rules.heading_open = (tokens, index) => {
+    const next = tokens[index + 1].content;
+    let isConclusion = false;
+    if (/conclusion|resolution/i.test(next)) {
+      conclusion++;
+      isConclusion = true;
+    }
+    const id = `${toc.slugify(`${next}`)}${isConclusion ? `-${conclusion}` : ``}`;
+    return `<a href="#${id}"><h${tokens[index].hLevel} id="${id}">`;
+  };
+  remarkable.renderer.rules.heading_close = (tokens, index) => {
+    return `</h${tokens[index].hLevel}></a>`;
+  };
 });
 
+const css = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.6.0/github-markdown.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css" />
+`;
+const script = `<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
+`;
+
 glob("./es*/**/*.md", (error, results) => {
   const links = [];
 
@@ -34,17 +73,25 @@ function makeIndex({links}) {
   return ct.stripIndent`
 <!doctype html>
 <meta charset="utf-8">
+${css}
+${script}
+<body class="markdown-body">
 <ul>
 ${remarkable.render(links.join('\n'))}
 </ul>
+</body>
 `;
 }
 
 function makePage({title, content}) {
   return ct.stripIndent`
 <!doctype html>
 <meta charset="utf-8">
+${css}
+${script}
 <title>${title}</title>
+<body class="markdown-body">
 ${remarkable.render(content)}
+</body>
 `;
 }