install and use shikiji

2024-01-09 23:41:58 +01:00
parent 184feb41e4
commit 4551806b0d
4 changed files with 70 additions and 12 deletions
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "markdown-it-footnote": "^3.0.3",
    "markdown-it-iframe": "^1.0.0",
    "markdown-it-latex": "^0.2.0",
+    "markdown-it-shikiji": "^0.9.18",
    "nanoid": "^5.0.3",
    "notyf": "^3.10.0",
    "pinia": "^2.1.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,6 +55,9 @@ dependencies:
  markdown-it-latex:
    specifier: ^0.2.0
    version: 0.2.0
+  markdown-it-shikiji:
+    specifier: ^0.9.18
+    version: 0.9.18
  nanoid:
    specifier: ^5.0.3
    version: 5.0.3
@@ -3265,7 +3268,7 @@ packages:
      normalize-path: 3.0.0
      readdirp: 3.6.0
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3

  /chrome-trace-event@1.0.3:
    resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
@@ -3998,19 +4001,11 @@ packages:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
    dev: true

-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
  /fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /function-bind@1.1.1:
@@ -4579,6 +4574,12 @@ packages:
      uc.micro: 1.0.6
    dev: false

+  /linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+    dependencies:
+      uc.micro: 2.0.0
+    dev: false
+
  /loader-runner@4.3.0:
    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
    engines: {node: '>=6.11.5'}
@@ -4676,6 +4677,13 @@ packages:
      katex: 0.9.0
    dev: false

+  /markdown-it-shikiji@0.9.18:
+    resolution: {integrity: sha512-x//ts6CkzwDkNHZCdFcaeWzJ8pvQ906il0JV7A3FyDjO270lsxKjymi5MUDxZFN9k7CRwvjnXkvBsJkIxmPxIQ==}
+    dependencies:
+      markdown-it: 14.0.0
+      shikiji: 0.9.18
+    dev: false
+
  /markdown-it@13.0.2:
    resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==}
    hasBin: true
@@ -4687,6 +4695,18 @@ packages:
      uc.micro: 1.0.6
    dev: false

+  /markdown-it@14.0.0:
+    resolution: {integrity: sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.0.0
+    dev: false
+
  /match-at@0.1.1:
    resolution: {integrity: sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==}
    dev: false
@@ -4695,6 +4715,10 @@ packages:
    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
    dev: false

+  /mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+    dev: false
+
  /merge-stream@2.0.0:
    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
    dev: true
@@ -5132,6 +5156,11 @@ packages:
      react-is: 18.2.0
    dev: true

+  /punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+    dev: false
+
  /punycode@2.3.0:
    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
    engines: {node: '>=6'}
@@ -5260,14 +5289,14 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3

  /rollup@3.29.4:
    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: true

  /rollup@4.9.2:
@@ -5381,6 +5410,16 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /shikiji-core@0.9.18:
+    resolution: {integrity: sha512-PKTXptbrp/WEDjNHV8OFG9KkfhmR0pSd161kzlDDlgQ0HXAnqJYNDSjqsy1CYZMx5bSvLMy42yJj9oFTqmkNTQ==}
+    dev: false
+
+  /shikiji@0.9.18:
+    resolution: {integrity: sha512-/tFMIdV7UQklzN13VjF0/XFzmii6C606Jc878hNezvB8ZR8FG8FW9j0I4J9EJre0owlnPntgLVPpHqy27Gs+DQ==}
+    dependencies:
+      shikiji-core: 0.9.18
+    dev: false
+
  /side-channel@1.0.4:
    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
    dependencies:
@@ -5710,6 +5749,10 @@ packages:
    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
    dev: false

+  /uc.micro@2.0.0:
+    resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==}
+    dev: false
+
  /ufo@1.1.2:
    resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}

@@ -5891,7 +5934,7 @@ packages:
      rollup: 3.29.4
      sass: 1.69.6
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: true

  /vite@5.0.10(@types/node@20.9.0)(sass@1.69.6):
--- a/src/hooks/useMarkdown.hook.ts
+++ b/src/hooks/useMarkdown.hook.ts
@@ -6,6 +6,7 @@ import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItFootnote from 'markdown-it-footnote'
 import markdownItIframe from 'markdown-it-iframe'
 import markdownItLatex from 'markdown-it-latex'
+import Shikiji from 'markdown-it-shikiji'
 import { Ref, toValue } from 'vue'

 import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
@@ -40,6 +41,18 @@ const md = new MarkdownIt({
    height: 400
  })

+const useShikiji = async () => {
+  const shikiji = await Shikiji({
+    themes: {
+      light: 'vitesse-light',
+      dark: 'vitesse-black'
+    }
+  })
+  md.use(shikiji)
+}
+
+useShikiji()
+
 const rules: Renderer.RenderRuleRecord = {
  table_close: () => '</table>\n</div>',
  table_open: () =>
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -11,4 +11,5 @@ declare module 'markdown-it-footnote'
 declare module 'markdown-it-regexp'
 declare module 'markdown-it-latex'
 declare module 'markdown-it-iframe'
+declare module 'markdown-it-shikiji'
 declare module '@rushstack/eslint-patch/modern-module-resolution'