From d7c16c6763b4e0fa7339e05b4f89182be12a305d Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Wed, 31 Jul 2024 22:24:23 -0400
Subject: [PATCH] Use HLJS, and add the Tomorrow theme.

---
 bun.lockb                      | Bin 28248 -> 29014 bytes
 package.json                   |   2 ++
 src/assets/static/tomorrow.css |  44 +++++++++++++++++++++++++++++++++
 src/services/post-file.ts      |  17 ++++++++++++-
 src/templates/Page.tsx         |   1 +
 5 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/static/tomorrow.css

diff --git a/bun.lockb b/bun.lockb
index 1d94372d8d6a16a6ba75130ee2b84a001674ff84..703acd8a4e18e8839bdb565cf2216af23b98b2c7 100755
GIT binary patch
delta 4386
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

delta 4177
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

diff --git a/package.json b/package.json
index da7cd70..062425e 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,10 @@
   },
   "dependencies": {
     "@types/yaml-front-matter": "^4.1.3",
+    "highlight.js": "^11.10.0",
     "hono": "^4.4.13",
     "marked": "^13.0.2",
+    "marked-highlight": "^2.1.3",
     "remark": "^15.0.1",
     "yaml-front-matter": "^4.1.1"
   },
diff --git a/src/assets/static/tomorrow.css b/src/assets/static/tomorrow.css
new file mode 100644
index 0000000..8cf8a38
--- /dev/null
+++ b/src/assets/static/tomorrow.css
@@ -0,0 +1,44 @@
+/* Tomorrow Theme */
+/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
+.tomorrow-comment, pre .comment, pre .title {
+  color: #8e908c;
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: #c82829;
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: #f5871f;
+}
+
+.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
+  color: #eab700;
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: #718c00;
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: #3e999f;
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: #4271ae;
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: #8959a8;
+}
+
+pre code {
+  display: block;
+  background: white;
+  color: #4d4d4c;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
diff --git a/src/services/post-file.ts b/src/services/post-file.ts
index 85098b0..0a23281 100644
--- a/src/services/post-file.ts
+++ b/src/services/post-file.ts
@@ -2,12 +2,27 @@ import { POST_PATH } from "@blog/config";
 import { readdir } from "node:fs/promises";
 import type { Post } from "@blog/models/Post";
 import * as yamlFront from "yaml-front-matter";
-import { marked } from "marked";
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js";
+
+export function getMarkedInstance(): Marked {
+  return new Marked(
+    markedHighlight({
+      langPrefix: 'hljs language-',
+      highlight(code, lang, info) {
+        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        return hljs.highlight(code, { language }).value;
+      }
+    })
+  )
+}
 
 export async function readPostFile(path: string): Promise<Post> {
   const file = Bun.file(path);
   const fileContent = await file.text();
   const parsedData = yamlFront.loadFront(fileContent);
+  const marked: Marked = getMarkedInstance();
   const postHtml = await marked.parse(parsedData.__content);
 
   let slug = parsedData.slug;
diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx
index 4b961e3..bc243fc 100644
--- a/src/templates/Page.tsx
+++ b/src/templates/Page.tsx
@@ -14,6 +14,7 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
         <MetaTags meta={meta} />
         <Style />
         <link rel="stylesheet" href="/static/main.css" />
+        <link rel="stylesheet" href="/static/tomorrow.css" />
       </head>
       <body>
         <header>