feat: use highlight.js for problem statement

ouuan · Sep 17, 2024 · 77ab1d2 · 77ab1d2
1 parent d3fe2db
commit 77ab1d2
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 111 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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) => {