feat (plugin): 增加代码高亮功能

qianmoQ · qianmoQ · commit 33ae1ed44ddd · 2025-08-09T11:07:51.000+08:00
diff --git a/src/App.vue b/src/App.vue
@@ -283,7 +283,7 @@ const clearOutput = () => {
   showToast('输出已清空', 'info')
 }
 
-window.addEventListener("contextmenu", (e) => e.preventDefault(), false);
+// window.addEventListener("contextmenu", (e) => e.preventDefault(), false);
 
 onMounted(async () => {
   await getSupportedLanguages()
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
@@ -1,28 +1,39 @@
 <template>
-  <div class="flex bg-white h-full">
+  <div class="flex bg-white h-full relative">
     <!-- 行号 -->
     <div ref="lineNumbersRef"
-         class="bg-gray-50 text-gray-400 text-sm font-mono py-4 px-3 select-none border-r border-gray-200 overflow-hidden">
+         class="bg-gray-50 text-gray-400 text-sm font-mono py-4 px-3 select-none border-r border-gray-200 overflow-hidden flex-shrink-0 z-10">
       <div v-for="(num, index) in lineNumbers" :key="index" class="h-6 leading-6 text-right">
         {{ num }}
       </div>
     </div>
 
-    <!-- 代码输入框 -->
-    <textarea ref="textareaRef"
-              :value="modelValue"
-              @input="handleInput"
-              @keydown="handleKeyDown"
-              @scroll="handleScroll"
-              class="flex-1 p-4 font-mono text-sm leading-6 resize-none outline-none bg-white"
-              placeholder="在此输入代码..."
-              spellcheck="false">
-    </textarea>
+    <!-- 语法高亮容器 -->
+    <div class="flex-1 relative">
+      <!-- 高亮显示层 -->
+      <pre ref="highlightRef"
+           class="absolute inset-0 p-4 font-mono text-sm leading-6 bg-transparent pointer-events-none overflow-hidden whitespace-pre-wrap z-0"
+           style="margin: 0; border: 0; word-break: break-word; white-space: pre-wrap;"
+           v-html="highlightedCode"></pre>
+
+      <!-- 代码输入框 -->
+      <textarea ref="textareaRef"
+                :value="modelValue"
+                @input="handleInput"
+                @keydown="handleKeyDown"
+                @scroll="handleScroll"
+                class="absolute inset-0 p-4 font-mono text-sm leading-6 resize-none outline-none bg-transparent z-10"
+                style="color: transparent; caret-color: #374151; margin: 0; border: 0; word-break: break-word; white-space: pre-wrap;"
+                placeholder="在此输入代码..."
+                spellcheck="false">
+      </textarea>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
+import { highlightCode } from '../utils/highlighter'
 
 const props = defineProps<{
   modelValue: string
@@ -35,12 +46,17 @@ const emit = defineEmits<{
 
 const textareaRef = ref<HTMLTextAreaElement>()
 const lineNumbersRef = ref<HTMLElement>()
+const highlightRef = ref<HTMLPreElement>()
 
 const lineNumbers = computed(() => {
   const lines = props.modelValue.split('\n')
   return lines.map((_, index) => String(index + 1))
 })
 
+const highlightedCode = computed(() => {
+  return highlightCode(props.modelValue, props.language || 'python3')
+})
+
 const handleInput = (e: Event) => {
   const target = e.target as HTMLTextAreaElement
   emit('update:modelValue', target.value)
@@ -65,5 +81,9 @@ const handleScroll = (e: Event) => {
   if (lineNumbersRef.value) {
     lineNumbersRef.value.scrollTop = target.scrollTop
   }
+  if (highlightRef.value) {
+    highlightRef.value.scrollTop = target.scrollTop
+    highlightRef.value.scrollLeft = target.scrollLeft
+  }
 }
 </script>
diff --git a/src/components/OutputPanel.vue b/src/components/OutputPanel.vue
@@ -21,7 +21,7 @@
         <pre :class="['whitespace-pre-wrap text-sm leading-relaxed', isSuccess ? 'text-green-300' : 'text-red-300']">{{ output }}</pre>
       </div>
 
-      <div v-else class="p-4 text-gray-500 flex flex-col items-center justify-center h-full space-y-2">
+      <div v-else class="p-4 text-gray-500 flex flex-col items-center justify-center h-full space-y-2 select-none">
         <Terminal class="w-8 h-8"/>
         <p class="text-sm">没有输出</p>
         <p class="text-xs">可以尝试运行一些代码</p>
diff --git a/src/utils/highlighter/index.ts b/src/utils/highlighter/index.ts
@@ -0,0 +1,37 @@
+export * from './types'
+export * from './manager'
+export { Python2Highlighter } from './languages/python2'
+export { Python3Highlighter } from './languages/python3'
+
+// 导入并重新导出管理器实例
+import { HighlightManager } from './manager'
+
+// 创建单例实例
+export const highlightManager = new HighlightManager()
+
+/**
+ * 高亮代码的便捷函数
+ * @param code 源代码
+ * @param language 语言名称
+ * @returns 高亮后的 HTML
+ */
+export function highlightCode(code: string, language: string): string
+{
+    return highlightManager.highlight(code, language)
+}
+
+/**
+ * 获取支持的语言列表
+ */
+export function getSupportedLanguages()
+{
+    return highlightManager.getSupportedLanguages()
+}
+
+/**
+ * 注册自定义高亮器
+ */
+export function registerHighlighter(highlighter: import('./types').LanguageHighlighter)
+{
+    highlightManager.register(highlighter)
+}
diff --git a/src/utils/highlighter/languages/python2.ts b/src/utils/highlighter/languages/python2.ts
@@ -0,0 +1,94 @@
+import type { HighlightRule, LanguageHighlighter } from '../types'
+
+export class Python2Highlighter
+    implements LanguageHighlighter
+{
+    getLanguageName(): string
+    {
+        return 'python2'
+    }
+
+    getDisplayName(): string
+    {
+        return 'Python 2'
+    }
+
+    getOrder(): number
+    {
+        return 2
+    }
+
+    getRules(): HighlightRule[]
+    {
+        return [
+            // 1. 注释 (最高优先级)
+            {
+                pattern: /#.*$/gm,
+                className: 'text-gray-500 italic',
+                priority: 1
+            },
+
+            // 2. 字符串 (高优先级)
+            {
+                pattern: /"""[\s\S]*?"""/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /'''[\s\S]*?'''/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /"(?:[^"\\]|\\.)*"/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /'(?:[^'\\]|\\.)*'/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+
+            // 3. Python 2 关键字
+            {
+                pattern: /\b(def|class|if|elif|else|for|while|try|except|finally|with|as|import|from|return|yield|break|continue|pass|lambda|and|or|not|in|is|True|False|None|print|exec|raw_input)\b/g,
+                className: 'text-purple-600 font-semibold',
+                priority: 3
+            },
+
+            // 4. 数字
+            {
+                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
+                className: 'text-blue-600',
+                priority: 4
+            },
+
+            // 5. 函数调用
+            {
+                pattern: /\b([a-zA-Z_]\w*)(?=\s*\()/g,
+                className: 'text-orange-600',
+                priority: 5
+            },
+
+            // 6. 类名定义
+            {
+                pattern: /\bclass\s+([A-Z]\w*)/g,
+                className: 'text-yellow-600 font-semibold',
+                priority: 6
+            }
+        ]
+    }
+
+    preProcess(code: string): string
+    {
+        // Python 2 特定的预处理
+        return code
+    }
+
+    postProcess(highlighted: string): string
+    {
+        // Python 2 特定的后处理
+        return highlighted
+    }
+}
diff --git a/src/utils/highlighter/languages/python3.ts b/src/utils/highlighter/languages/python3.ts
@@ -0,0 +1,111 @@
+import type { HighlightRule, LanguageHighlighter } from '../types'
+
+export class Python3Highlighter
+    implements LanguageHighlighter
+{
+    getLanguageName(): string
+    {
+        return 'python3'
+    }
+
+    getDisplayName(): string
+    {
+        return 'Python 3'
+    }
+
+    getOrder(): number
+    {
+        return 1
+    }
+
+    getRules(): HighlightRule[]
+    {
+        return [
+            // 1. 注释 (最高优先级)
+            {
+                pattern: /#.*$/gm,
+                className: 'text-gray-500 italic',
+                priority: 1
+            },
+
+            // 2. 字符串 (高优先级)
+            {
+                pattern: /"""[\s\S]*?"""/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /'''[\s\S]*?'''/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /f"(?:[^"\\]|\\.)*"/g,
+                className: 'text-emerald-600',
+                priority: 2
+            }, // f-strings
+            {
+                pattern: /f'(?:[^'\\]|\\.)*'/g,
+                className: 'text-emerald-600',
+                priority: 2
+            }, // f-strings
+            {
+                pattern: /"(?:[^"\\]|\\.)*"/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+            {
+                pattern: /'(?:[^'\\]|\\.)*'/g,
+                className: 'text-green-600',
+                priority: 2
+            },
+
+            // 3. Python 3 关键字
+            {
+                pattern: /\b(def|class|if|elif|else|for|while|try|except|finally|with|as|import|from|return|yield|break|continue|pass|lambda|and|or|not|in|is|True|False|None|async|await|nonlocal)\b/g,
+                className: 'text-purple-600 font-semibold',
+                priority: 3
+            },
+
+            // 4. 数字
+            {
+                pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
+                className: 'text-blue-600',
+                priority: 4
+            },
+
+            // 5. 函数调用
+            {
+                pattern: /\b([a-zA-Z_]\w*)(?=\s*\()/g,
+                className: 'text-orange-600',
+                priority: 5
+            },
+
+            // 6. 装饰器
+            {
+                pattern: /@[a-zA-Z_]\w*/g,
+                className: 'text-yellow-600',
+                priority: 6
+            },
+
+            // 7. 类名定义
+            {
+                pattern: /\bclass\s+([A-Z]\w*)/g,
+                className: 'text-yellow-600 font-semibold',
+                priority: 7
+            }
+        ]
+    }
+
+    preProcess(code: string): string
+    {
+        // Python 3 特定的预处理
+        return code
+    }
+
+    postProcess(highlighted: string): string
+    {
+        // Python 3 特定的后处理
+        return highlighted
+    }
+}
diff --git a/src/utils/highlighter/manager.ts b/src/utils/highlighter/manager.ts
diff --git a/src/utils/highlighter/types.ts b/src/utils/highlighter/types.ts

Original file line number	Diff line number	Diff line change
`@@ -283,7 +283,7 @@ const clearOutput = () => {`
`283`	`283`	`showToast('输出已清空', 'info')`
`284`	`284`	`}`
`285`	`285`
`286`		`-window.addEventListener("contextmenu", (e) => e.preventDefault(), false);`
	`286`	`+// window.addEventListener("contextmenu", (e) => e.preventDefault(), false);`
`287`	`287`
`288`	`288`	`onMounted(async () => {`
`289`	`289`	`await getSupportedLanguages()`