From 84fbc9cd2738eecba812bb48adf73ca8f700aa0a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 26 Feb 2022 14:57:59 -0800
Subject: [PATCH] Add code highlighting using highlight.js

---
 packages/api/package.json                       |  2 ++
 packages/api/src/utils/parser.ts                | 17 +++++++++++++++++
 .../components/templates/article/Article.tsx    |  9 +++++++--
 packages/web/pages/_document.tsx                |  1 +
 yarn.lock                                       | 10 ++++++++++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/api/package.json b/packages/api/package.json
index 1009266ed..387fa9e32 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -72,6 +72,7 @@
     "graphql": "^15.3.0",
     "graphql-middleware": "^6.0.10",
     "graphql-shield": "^7.5.0",
+    "highlightjs": "^9.16.2",
     "intercom-client": "^2.11.0",
     "jsdom": "^16.4.0",
     "jsonwebtoken": "^8.5.1",
@@ -100,6 +101,7 @@
   "devDependencies": {
     "@babel/register": "^7.14.5",
     "@types/analytics-node": "^3.1.7",
+    "@types/highlightjs": "^9.12.2",
     "@types/nanoid": "^3.0.0",
     "@types/private-ip": "^1.0.0",
     "chai": "^4.3.4",
diff --git a/packages/api/src/utils/parser.ts b/packages/api/src/utils/parser.ts
index de8ea06e6..ad8642354 100644
--- a/packages/api/src/utils/parser.ts
+++ b/packages/api/src/utils/parser.ts
@@ -12,6 +12,7 @@ import { WikipediaHandler } from './wikipedia-handler'
 import { SubstackHandler } from './substack-handler'
 import { AxiosHandler } from './axios-handler'
 import { BloombergHandler } from './bloomberg-handler'
+import * as hljs from 'highlightjs'
 
 const logger = buildLogger('utils.parse')
 
@@ -254,6 +255,22 @@ export const parsePreparedContent = async (
     const jsonLdLinkMetadata = await getJSONLdLinkMetadata(window.document)
     logRecord.JSONLdParsed = jsonLdLinkMetadata
 
+    if (article?.content) {
+      const cWindow = new JSDOM(article?.content).window
+      cWindow.document.querySelectorAll('code').forEach((e) => {
+        console.log(e.textContent)
+        if (e.textContent) {
+          const att = hljs.highlightAuto(e.textContent)
+          const code = window.document.createElement('code')
+          const langClass = `hljs language-${att.language}` + att.second_best?.language ? ` language-${att.second_best?.language}` : ''
+          code.setAttribute('class', langClass)
+          code.innerHTML = att.value
+          e.replaceWith(code)
+        }
+      })
+      article.content = cWindow.document.body.outerHTML
+    }
+
     Object.assign(article, {
       content: clean,
       title: article?.title || jsonLdLinkMetadata.title,
diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index e5ef2f24e..e4b44f47d 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -26,6 +26,8 @@ export type ArticleProps = {
 }
 
 export function Article(props: ArticleProps): JSX.Element {
+  const highlightTheme = isDarkTheme() ? 'dark' : 'default'
+
   const [readingProgress, setReadingProgress] = useState(
     props.initialReadingProgress || 0
   )
@@ -179,7 +181,9 @@ export function Article(props: ArticleProps): JSX.Element {
   }, [onLoadImageHandler])
 
   return (
-    <Box
+    <>
+      <link rel="stylesheet" href={`https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/${highlightTheme}.min.css`} />
+      <Box
       ref={articleContentRef}
       css={{
         maxWidth: '100%',
@@ -188,6 +192,7 @@ export function Article(props: ArticleProps): JSX.Element {
       dangerouslySetInnerHTML={{
         __html: props.content,
       }}
-    />
+      />
+    </>
   )
 }
diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx
index e7c635712..732a65320 100644
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@@ -53,6 +53,7 @@ export default class Document extends NextDocument {
           <link rel="manifest" href="/manifest.webmanifest" />
           <script async src="/static/scripts/intercom.js" />
           <script async src="/static/scripts/inject-sw.js" />
+          <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
         </Head>
         <body>
           <Main />
diff --git a/yarn.lock b/yarn.lock
index dbf68e917..3993bc6be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4364,6 +4364,11 @@
   dependencies:
     graphql "*"
 
+"@types/highlightjs@^9.12.2":
+  version "9.12.2"
+  resolved "https://registry.yarnpkg.com/@types/highlightjs/-/highlightjs-9.12.2.tgz#6b6d460968a975f4ce3ab3907c03cde46a72a02f"
+  integrity sha512-oW2pEKwshxwBW1nVUizWQg/tnhboRtKrUKnF2hd6l4BZ0shr5ZjQ4ra/82+NEH6uWeM8JjrMGCux5enQXOQbTA==
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -9364,6 +9369,11 @@ highlight.js@^10.7.1:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+highlightjs@^9.16.2:
+  version "9.16.2"
+  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.16.2.tgz#07ea6cc7c93340fc440734fb7abf28558f1f0fe1"
+  integrity sha512-FK1vmMj8BbEipEy8DLIvp71t5UsC7n2D6En/UfM/91PCwmOpj6f2iu0Y0coRC62KSRHHC+dquM2xMULV/X7NFg==
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"