From 77ab1d205f0927b51424267ea6f22de0641e7f91 Mon Sep 17 00:00:00 2001
From: Yufan You <ouuansteve@gmail.com>
Date: Tue, 17 Sep 2024 17:21:17 +0800
Subject: [PATCH] feat: use highlight.js for problem statement

---
 package.json                        |   3 +-
 pnpm-lock.yaml                      |  12 +++-
 src/App.vue                         | 106 ++++++++++++++++++++++++++++
 src/components/DiffView.vue         | 106 ----------------------------
 src/components/ProblemStatement.vue |  11 ++-
 src/vite/transformPuzzles.ts        |   2 +
 6 files changed, 129 insertions(+), 111 deletions(-)

diff --git a/package.json b/package.json
index 8ae0892..fbc78ac 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "codemirror-editor-vue3": "2.1.7",
     "dompurify": "^2.3.8",
     "fastest-levenshtein": "^1.0.12",
-    "highlight.js": "^11.5.1",
+    "highlight.js": "^11.9.0",
+    "markdown-it-highlightjs": "^4.1.0",
     "naive-ui": "^2.31.0",
     "plausible-tracker": "0.3.8",
     "tree-sitter-cpp": "^0.20.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23823a3..f576fc8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,11 @@ importers:
         specifier: ^1.0.12
         version: 1.0.16
       highlight.js:
-        specifier: ^11.5.1
+        specifier: ^11.9.0
         version: 11.9.0
+      markdown-it-highlightjs:
+        specifier: ^4.1.0
+        version: 4.1.0
       naive-ui:
         specifier: ^2.31.0
         version: 2.38.2(vue@3.4.27(typescript@4.9.5))
@@ -1469,6 +1472,9 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  markdown-it-highlightjs@4.1.0:
+    resolution: {integrity: sha512-aYcgme5aYn10BHEvLZaCNgwxU2oaAX9inK9dwCv38wJdq7tal5FzZrLdQQY8MR3I1H07S3BKgYGRX2kKuPT+sA==}
+
   markdown-it-link-attributes@4.0.1:
     resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==}
 
@@ -3627,6 +3633,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  markdown-it-highlightjs@4.1.0:
+    dependencies:
+      highlight.js: 11.9.0
+
   markdown-it-link-attributes@4.0.1: {}
 
   markdown-it@13.0.2:
diff --git a/src/App.vue b/src/App.vue
index bd075a0..f777526 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,3 +27,109 @@ import { uiDark } from './store/localStorage';
 const osTheme = useOsTheme();
 const theme = computed(() => (uiDark(osTheme) ? darkTheme : null));
 </script>
+
+<style lang="scss">
+.vue-diff-theme-custom-dark pre {
+  background: #282828;
+  color: #ebdbb2;
+
+  .hljs-attr,
+  .hljs-attribute {
+    color: #8ec07c;
+  }
+
+  .hljs-comment {
+    color: #928374;
+  }
+
+  .hljs-tag {
+    color: #fe8019;
+  }
+
+  .hljs-punctuation {
+    color: #bdae93;
+  }
+
+  .hljs-keyword,
+  .hljs-doctag,
+  .hljs-name {
+    color: #f84934;
+  }
+
+  .hljs-type {
+    color: #fabd2f;
+  }
+
+  .hljs-string,
+  .hljs-quote {
+    color: #b8bb26;
+  }
+
+  .hljs-number,
+  .hljs-literal {
+    color: #d3869b;
+  }
+
+  .hljs-meta {
+    color: #83a598;
+    span {
+      color: #83a598;
+    }
+  }
+}
+
+.vue-diff-theme-custom-light pre {
+  background: white;
+  color: black;
+
+  .hljs-attr,
+  .hljs-attribute {
+    color: #00c;
+  }
+
+  .hljs-title {
+    color: #00f;
+  }
+
+  .hljs-comment {
+    color: #a50;
+  }
+
+  .hljs-tag {
+    color: #170;
+  }
+
+  .hljs-keyword,
+  .hljs-doctag,
+  .hljs-name {
+    color: #708;
+  }
+
+  .hljs-type {
+    color: #085;
+  }
+
+  .hljs-string {
+    color: #a11;
+  }
+
+  .hljs-quote {
+    color: #090;
+  }
+
+  .hljs-number {
+    color: #164;
+  }
+
+  .hljs-literal {
+    color: #219;
+  }
+
+  .hljs-meta {
+    color: #555;
+    span {
+      color: #555;
+    }
+  }
+}
+</style>
diff --git a/src/components/DiffView.vue b/src/components/DiffView.vue
index fde51e4..028027d 100644
--- a/src/components/DiffView.vue
+++ b/src/components/DiffView.vue
@@ -48,109 +48,3 @@ const diffMode = computed(() => (breakPoints.value.includes('m') ? 'split' : 'un
   border-radius: 4px;
 }
 </style>
-
-<style scoped lang="scss">
-.vue-diff-theme-custom-dark:deep() {
-  background: #282828;
-  color: #ebdbb2;
-
-  .hljs-attr,
-  .hljs-attribute {
-    color: #8ec07c;
-  }
-
-  .hljs-comment {
-    color: #928374;
-  }
-
-  .hljs-tag {
-    color: #fe8019;
-  }
-
-  .hljs-punctuation {
-    color: #bdae93;
-  }
-
-  .hljs-keyword,
-  .hljs-doctag,
-  .hljs-name {
-    color: #f84934;
-  }
-
-  .hljs-type {
-    color: #fabd2f;
-  }
-
-  .hljs-string,
-  .hljs-quote {
-    color: #b8bb26;
-  }
-
-  .hljs-number,
-  .hljs-literal {
-    color: #d3869b;
-  }
-
-  .hljs-meta {
-    color: #83a598;
-    span {
-      color: #83a598;
-    }
-  }
-}
-
-.vue-diff-theme-custom-light:deep() {
-  background: white;
-  color: black;
-
-  .hljs-attr,
-  .hljs-attribute {
-    color: #00c;
-  }
-
-  .hljs-title {
-    color: #00f;
-  }
-
-  .hljs-comment {
-    color: #a50;
-  }
-
-  .hljs-tag {
-    color: #170;
-  }
-
-  .hljs-keyword,
-  .hljs-doctag,
-  .hljs-name {
-    color: #708;
-  }
-
-  .hljs-type {
-    color: #085;
-  }
-
-  .hljs-string {
-    color: #a11;
-  }
-
-  .hljs-quote {
-    color: #090;
-  }
-
-  .hljs-number {
-    color: #164;
-  }
-
-  .hljs-literal {
-    color: #219;
-  }
-
-  .hljs-meta {
-    color: #555;
-    span {
-      color: #555;
-    }
-  }
-}
-</style>
diff --git a/src/components/ProblemStatement.vue b/src/components/ProblemStatement.vue
index 1a817a6..53a1dc0 100644
--- a/src/components/ProblemStatement.vue
+++ b/src/components/ProblemStatement.vue
@@ -2,20 +2,25 @@
 
 <template>
   <n-element
-    class="statement"
+    :class="['statement', theme]"
     v-html="statement"
   />
 </template>
 
 <script setup lang="ts">
-import { NElement } from 'naive-ui';
+import { computed } from 'vue';
+import { NElement, useOsTheme } from 'naive-ui';
+import { uiDark } from '../store/localStorage';
 
 defineProps<{
   statement: string;
 }>();
+
+const osTheme = useOsTheme();
+const theme = computed(() => (uiDark(osTheme) ? 'vue-diff-theme-custom-dark' : 'vue-diff-theme-custom-light'));
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .statement:deep(a) {
   cursor: pointer;
   transition: color .3s var(--cubic-bezier-ease-in-out),
diff --git a/src/vite/transformPuzzles.ts b/src/vite/transformPuzzles.ts
index 06e1710..2bb1164 100644
--- a/src/vite/transformPuzzles.ts
+++ b/src/vite/transformPuzzles.ts
@@ -14,6 +14,7 @@ import { JSDOM } from 'jsdom';
 import createDOMPurify from 'dompurify';
 import MarkdownIt from 'markdown-it';
 import mila from 'markdown-it-link-attributes';
+import mihljs from 'markdown-it-highlightjs';
 import {
   beginTimestamp,
   host,
@@ -30,6 +31,7 @@ md.use(mila, {
     rel: 'noopener noreferrer',
   },
 });
+md.use(mihljs);
 
 async function clear() {
   await Promise.all(['statement', 'targetCode'].map(async (dir) => {