feat: add syntax highlighting

Author: barelyhuman

index.html

@@ -6,14 +6,14 @@
 
     <link
       rel="preload"
-      href="https://unpkg.com/highlight.js@11.0.1/styles/ascetic.css"
+      href="https://unpkg.com/highlight.js@11.1.0/styles/atom-one-light.css"
       as="style"
       onload="this.onload=null;this.rel='stylesheet'"
     />
     <noscript
       ><link
         rel="stylesheet"
-        href="https://unpkg.com/highlight.js@11.0.1/styles/ascetic.css"
+        href="https://unpkg.com/highlight.js@11.1.0/styles/atom-one-light.css"
     /></noscript>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mark</title>

postcss.config.js

@@ -8,4 +8,7 @@ module.exports = {
     require("tailwindcss"),
     require("autoprefixer"),
   ],
+  safelist: {
+    deep: [/hljs-/],
+  },
 };

src/lib/marked/helpers.js

@@ -0,0 +1,30 @@
+// Copied from https://github.com/markedjs/marked/blob/v3.0.2/src/helpers.js
+
+const escapeTest = /[&<>"']/;
+const escapeReplace = /[&<>"']/g;
+const escapeTestNoEncode = /[<>"']|&(?!#?\w+;)/;
+const escapeReplaceNoEncode = /[<>"']|&(?!#?\w+;)/g;
+const escapeReplacements = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+};
+const getEscapeReplacement = (ch) => escapeReplacements[ch];
+
+function escape(html, encode) {
+  if (encode) {
+    if (escapeTest.test(html)) {
+      return html.replace(escapeReplace, getEscapeReplacement);
+    }
+  } else {
+    if (escapeTestNoEncode.test(html)) {
+      return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
+    }
+  }
+
+  return html;
+}
+
+export { escape };

src/lib/marked/index.js

@@ -0,0 +1,47 @@
+import marked from "marked";
+import { escape } from "./helpers";
+import hljs from "highlight.js";
+
+marked.setOptions({
+  highlight: function (code, lang, callback) {
+    console.log({ code, lang, callback });
+    const highlightedCode = hljs.highlight(code, { language: lang }).value;
+    return highlightedCode;
+  },
+});
+
+const renderer = {
+  code(code, infostring, escaped) {
+    const lang = (infostring || "").match(/\S*/)[0];
+    if (this.options.highlight) {
+      const out = this.options.highlight(code, lang);
+      if (out != null && out !== code) {
+        escaped = true;
+        code = out;
+      }
+    }
+
+    code = code.replace(/\n$/, "") + "\n";
+
+    if (!lang) {
+      return (
+        "<pre class='codeblock'" +
+        (escaped ? code : escape(code, true)) +
+        "</pre>\n"
+      );
+    }
+
+    return (
+      '<pre class="codeblock ' +
+      this.options.langPrefix +
+      escape(lang, true) +
+      '">' +
+      (escaped ? code : escape(code, true)) +
+      "</pre>\n"
+    );
+  },
+};
+
+marked.use({ renderer });
+
+export default marked;

src/pages/Home.vue

@@ -65,7 +65,7 @@ import Toast from "../components/toast.vue";
 import { copy } from "../lib/copy";
 import { defaultMarkdownText } from "../resources/default-md";
 import { reactive, onMounted, ref, onUnmounted } from "vue";
-import marked from "marked";
+import marked from "../lib/marked";
 
 const toastRef = ref(null);
 

tailwind.config.js

@@ -1,11 +1,17 @@
 module.exports = {
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  purge: {
+    enabled: true,
+    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+    safelist: {
+      deep: [/hljs-/],
+    },
+  },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {}
+    extend: {},
   },
   variants: {
-    extend: {}
+    extend: {},
   },
-  plugins: []
-}
+  plugins: [],
+};