perf(Markdown): 题面、教程、AI 提示每次打开都去 unpkg.com 拉四个库，机房网络下又慢又不稳

md-editor-v3 的 MdPreview 不管正文里有没有代码、公式，都会从 unpkg.com 加载 highlight.js、katex、mermaid、echarts（mermaid 还是另一份 11.x）。而我们只用到最基础的 Markdown：题面 95% 是富文本存的 HTML，教程是标题、表格、图片，AI 输出是标题、列表、表格、少量代码块，库里一处公式、mermaid 都没有。 - 显示：新组件 shared/components/Markdown.vue，直接用 markdown-it，代码高亮走本地的 highlight.js（和练一练共用 shared/highlight.ts，补了 C++ / SQL）。9 处 MdPreview 全换掉。正文默认 16px，教程也统一成 16px。 - 编辑：后台教程编辑器换成项目已有的 CodeMirror，加一排格式按钮；图片可以按按钮选、粘贴、拖进来，都是先上传再插入。md-editor-v3 从依赖里删掉。 - AI 生成的内容（AI 提示、AI 分析、班级报告）不再放行原生 HTML：学生能在代码里诱导 AI 吐出 <img onerror>，老师在后台一打开就执行。库里 1196 条 AI 输出没有一个 HTML 标签，关掉不影响显示。题面、教程照旧放行。 - 长英文改成在单词之间折行，原来 break-all 会把 "I live" 断成 "I l / ive"。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 14:02:54 +08:00
1 parent c497ccadc8
commit 6f47ad8358
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseDebugData } from "utils/types"
-import { highlightLines } from "../composables/useCodeHighlight"
-import "./exercise-highlight.css"
+import { highlightLines } from "shared/highlight"
+import "shared/highlight.css"

 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseFillData } from "utils/types"
-import { highlight } from "../composables/useCodeHighlight"
-import "./exercise-highlight.css"
+import { highlight } from "shared/highlight"
+import "shared/highlight.css"

 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExercisePredictData } from "utils/types"
-import { highlight } from "../composables/useCodeHighlight"
-import "./exercise-highlight.css"
+import { highlight } from "shared/highlight"
+import "shared/highlight.css"

 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -2,8 +2,8 @@
 import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseSortData } from "utils/types"
 import { shuffle } from "../composables/useShuffle"
-import { highlightLines } from "../composables/useCodeHighlight"
-import "./exercise-highlight.css"
+import { highlightLines } from "shared/highlight"
+import "shared/highlight.css"

 const props = defineProps<{ exercise: Exercise; lang?: string }>()
 const emit = defineEmits<{
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { MdPreview } from "md-editor-v3"
-import "md-editor-v3/lib/preview.css"
+import Markdown from "shared/components/Markdown.vue"
 import type { LessonSegment } from "../composables/useLessonParse"
 import CodeRunBlock from "./CodeRunBlock.vue"

@@ -16,9 +15,7 @@ defineProps<{
 }>()
 const emit = defineEmits<{ solved: [exerciseId: number] }>()

-const isDark = useDark()
-
-/** 学习目标那几行只有行内的 **加粗** 和 `代码`，先转义再换成标签，别为它拉一个 MdPreview */
+/** 学习目标那几行只有行内的 **加粗** 和 `代码`，先转义再换成标签，别为它拉一整个 Markdown 渲染 */
 function inline(text: string) {
  return text
    .replace(/&/g, "&amp;")
@@ -32,13 +29,7 @@ function inline(text: string) {
 <template>
  <div class="body">
    <template v-for="(seg, i) in segments" :key="i">
-      <MdPreview
-        v-if="seg.type === 'md'"
-        preview-theme="vuepress"
-        :theme="isDark ? 'dark' : 'light'"
-        :model-value="seg.content"
-        class="md"
-      />
+      <Markdown html v-if="seg.type === 'md'" :content="seg.content" />
      <h2 v-else-if="seg.type === 'heading'" :id="seg.id" class="h2">{{ seg.text }}</h2>
      <div v-else-if="seg.type === 'goals'" :id="seg.id" class="goals">
        <div class="goals-title">学完这课你能</div>
@@ -65,16 +56,9 @@ function inline(text: string) {

 <style scoped>
 .body {
-  font-size: 15px;
+  font-size: 16px;
  line-height: 1.85;
 }
-.md :deep(.md-editor-preview) {
-  font-size: 15px;
-  padding: 0;
-}
-.md :deep(.md-editor-preview-wrapper) {
-  padding: 0;
-}
 .h2 {
  font-size: 20px;
  line-height: 1.4;
@@ -1,50 +0,0 @@
-/* 练一练代码高亮配色（明 / 暗），由涉及代码高亮的题型组件统一引入 */
-.hljs-keyword,
-.hljs-operator,
-.hljs-selector-tag {
-  color: #d73a49;
-}
-.hljs-string,
-.hljs-regexp,
-.hljs-template-literal {
-  color: #032f62;
-}
-.hljs-comment,
-.hljs-quote {
-  color: #6a737d;
-  font-style: italic;
-}
-.hljs-number,
-.hljs-literal {
-  color: #005cc5;
-}
-.hljs-built_in,
-.hljs-title.function_,
-.hljs-class .hljs-title {
-  color: #6f42c1;
-}
-
-.dark .hljs-keyword,
-.dark .hljs-operator,
-.dark .hljs-selector-tag {
-  color: #c678dd;
-}
-.dark .hljs-string,
-.dark .hljs-regexp,
-.dark .hljs-template-literal {
-  color: #98c379;
-}
-.dark .hljs-comment,
-.dark .hljs-quote {
-  color: #7f848e;
-  font-style: italic;
-}
-.dark .hljs-number,
-.dark .hljs-literal {
-  color: #e5c07b;
-}
-.dark .hljs-built_in,
-.dark .hljs-title.function_,
-.dark .hljs-class .hljs-title {
-  color: #61afef;
-}
@@ -1,41 +0,0 @@
-import hljs from "highlight.js/lib/core"
-import python from "highlight.js/lib/languages/python"
-import c from "highlight.js/lib/languages/c"
-
-hljs.registerLanguage("python", python)
-hljs.registerLanguage("c", c)
-
-export function escapeHtml(text: string): string {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-}
-
-function normalizeLang(lang?: string): "python" | "c" | null {
-  return lang === "python" ? "python" : lang === "c" ? "c" : null
-}
-
-// 把整段代码高亮为 HTML；不支持的语言或异常时回退为转义文本
-export function highlight(code: string, lang?: string): string {
-  const language = normalizeLang(lang)
-  if (language) {
-    try {
-      return hljs.highlight(code, { language }).value
-    } catch {
-      // fall through
-    }
-  }
-  return escapeHtml(code)
-}
-
-// 按行高亮：整体高亮后再按行切分，保证跨行 token 着色正确，返回逐行 HTML 数组
-export function highlightLines(lines: string[], lang?: string): string[] {
-  const language = normalizeLang(lang)
-  if (language) {
-    try {
-      const html = hljs.highlight(lines.join("\n"), { language }).value
-      return html.split("\n")
-    } catch {
-      // fall through
-    }
-  }
-  return lines.map((line) => escapeHtml(line))
-}
@@ -8,7 +8,7 @@ import type { Exercise } from "utils/types"
 * - `code`：带语言的代码块（```python / ```c）换成能改、能运行的代码块；
 *   不带语言的（「输出结果」那种）留在 Markdown 里照常显示；
 * - `exercise`：`[[exercise:36]]` 占位符换成练一练；
- * - `md`：其余的交给 MdPreview。
+ * - `md`：其余的交给 Markdown.vue。
 *
 * 正文开头的「# 标题」「**所属项目：…**」和紧跟着的项目配图不渲染：标题和项目页面上方
 * 已经有了，每课都重复一张同样的项目图只是把正文往下推。