diff --git a/package.json b/package.json
index e48a754..c6a9dc9 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@vueuse/core": "^12.5.0",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
+    "highlight.js": "^11.11.1",
     "lunisolar": "^2.5.1",
     "mathjs": "^14.2.0",
     "naive-ui": "^2.41.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 843490c..38d1481 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       lunisolar:
         specifier: ^2.5.1
         version: 2.5.1
diff --git a/src/App.vue b/src/App.vue
index 92f84ca..326bfe4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <n-config-provider
     :date-locale="configProviderProps.dateLocale"
+    :hljs="hljs"
     :inline-theme-disabled="configProviderProps.inlineThemeDisabled"
     :locale="configProviderProps.locale"
     :theme-overrides="themeOverrides"
@@ -34,6 +35,10 @@ import {
   configProviderProps,
 } from './assets/js/naive-ui';
 
+import hljs from 'highlight.js/lib/core';
+import hljsJavascript from 'highlight.js/lib/languages/javascript';
+import hljsJson from 'highlight.js/lib/languages/json';
+
 import AppAside from './components/AppAside.vue';
 
 /** 主题变量配置 */
@@ -110,8 +115,15 @@ function initCssVars() {
 
 }
 
+/** 初始化 highlight.js */
+function initHighlightJs() {
+  hljs.registerLanguage('javascript', hljsJavascript);
+  hljs.registerLanguage('json', hljsJson);
+}
+
 onMounted(() => {
   initCssVars();
+  initHighlightJs();
   window.addEventListener('contextmenu', handleContextMenu);
 });