feat(markdown): 添加代码高亮功能并增强HTML过滤

- 引入highlight.js实现代码语法高亮
- 扩展HTML过滤规则以支持高亮所需的span标签和class属性
- 添加测试用例验证高亮功能和HTML过滤规则

Author: HellowVirgil

.husky/commit-msg

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
+export PATH="/opt/homebrew/bin:$PATH"
 
 pnpm exec commitlint --edit ${1}

.husky/pre-commit

@@ -1,5 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
+export PATH="/opt/homebrew/bin:$PATH"
 
 # 1) Validate committer email
 

packages/libro-markdown/package.json

@@ -50,12 +50,14 @@
     "@difizen/mana-l10n": "latest",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@types/markdown-it": "^12.2.3",
+    "highlight.js": "^11.11.1",
     "katex": "^0.16.10",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.5",
     "sanitize-html": "^2.14.0"
   },
   "devDependencies": {
+    "@types/highlight.js": "^10.1.0",
     "@types/sanitize-html": "^2.13.0"
   }
 }

packages/libro-markdown/src/markdown-render.spec.ts

@@ -0,0 +1,102 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+import { MarkdownRender } from './markdown-render.js';
+
+// Declare jest globals to avoid compilation errors if types are missing
+declare const describe: any;
+declare const it: any;
+declare const beforeEach: any;
+declare const jest: any;
+
+// Mock ConfigurationService
+const mockConfigService = {
+  get: jest.fn(),
+};
+
+describe('MarkdownRender', () => {
+  let markdownRender: MarkdownRender;
+
+  beforeEach(() => {
+    // Reset mock and set default behavior
+    mockConfigService.get.mockReset();
+    mockConfigService.get.mockResolvedValue(false);
+
+    markdownRender = new MarkdownRender();
+    // Inject mock manually
+    (markdownRender as any).configurationService = mockConfigService;
+    // Manually call init to trigger postConstruct logic
+    markdownRender.init();
+  });
+
+  it('should render basic markdown', () => {
+    const md = '# Hello';
+    const html = markdownRender.render(md);
+    // h1 id="hello" comes from anchor plugin
+    assert.ok(html.includes('<h1 id="hello">Hello</h1>'));
+  });
+
+  it('should highlight code blocks', () => {
+    const md = '```javascript\nconst a = 1;\n```';
+    const html = markdownRender.render(md);
+
+    // Check for language class added by markdown-it/highlight.js
+    assert.ok(html.includes('language-javascript'));
+
+    // Check for highlight.js specific classes (indicating highlighting actually happened)
+    // "const" is a keyword
+    assert.ok(html.includes('hljs-keyword'));
+  });
+
+  it('should sanitize html', () => {
+    const md = '<script>alert(1)</script>';
+    const html = markdownRender.render(md);
+    assert.ok(!html.includes('<script>'));
+    assert.ok(!html.includes('alert(1)'));
+  });
+
+  it('should allow span tags with class attributes (needed for highlighting)', () => {
+    // Manually construct a highlighted-like span to ensure sanitizer doesn't strip it
+    // Note: markdown-it render output is sanitized.
+    // If we input raw HTML, it might be stripped depending on settings.
+    // But highlight.js output is generated internally.
+    // Let's test with a code block that generates spans.
+
+    const md = '```javascript\nconst a = 1;\n```';
+    const html = markdownRender.render(md);
+
+    // Check that span tags are preserved
+    assert.ok(html.includes('<span class="hljs-keyword">const</span>'));
+  });
+
+  it('should support target="_blank" configuration', async () => {
+    mockConfigService.get.mockResolvedValue(true);
+
+    const renderer = new MarkdownRender();
+    (renderer as any).configurationService = mockConfigService;
+    renderer.init();
+
+    // Wait for promise resolution in init (microtask)
+    // Increase wait time to ensure the promise chain in init() completes
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const md = '[link](http://example.com)';
+    const html = renderer.render(md);
+    assert.ok(html.includes('target="_blank"'));
+  });
+
+  it('should NOT add target="_blank" when disabled', async () => {
+    mockConfigService.get.mockResolvedValue(false);
+
+    const renderer = new MarkdownRender();
+    (renderer as any).configurationService = mockConfigService;
+    renderer.init();
+
+    // Wait for promise resolution in init
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const md = '[link](http://example.com)';
+    const html = renderer.render(md);
+    assert.ok(!html.includes('target="_blank"'));
+  });
+});

packages/libro-markdown/src/markdown-render.ts

@@ -5,6 +5,7 @@ import {
   singleton,
 } from '@difizen/mana-app';
 import latexPlugin from '@traptitech/markdown-it-katex';
+import hljs from 'highlight.js';
 import MarkdownIt from 'markdown-it';
 import sanitizeHtml from 'sanitize-html';
 
@@ -13,6 +14,7 @@ import { LibroMarkdownConfiguration } from './config.js';
 import type { MarkdownRenderOption } from './markdown-protocol.js';
 import { MarkdownParser } from './markdown-protocol.js';
 import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/github.css';
 
 @singleton({ token: MarkdownParser })
 export class MarkdownRender implements MarkdownParser {
@@ -26,6 +28,16 @@ export class MarkdownRender implements MarkdownParser {
     this.mkt = new MarkdownIt({
       html: true,
       linkify: true,
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(str, { language: lang }).value;
+          } catch (__) {
+            //
+          }
+        }
+        return ''; // use external default escaping
+      },
     });
     this.mkt.linkify.set({ fuzzyLink: false });
     this.mkt.use(libroAnchor, {
@@ -113,6 +125,7 @@ export class MarkdownRender implements MarkdownParser {
       'q',
       's',
       'small',
+      'span',
       'strong',
       'sub',
       'sup',
@@ -131,14 +144,14 @@ export class MarkdownRender implements MarkdownParser {
     const allowedAttributes = Object.fromEntries(
       allowedTags.map((tag) => [
         tag,
-        [...(sanitizeHtml.defaults.allowedAttributes[tag] || []), 'id'],
+        [...(sanitizeHtml.defaults.allowedAttributes[tag] || []), 'id', 'class'],
       ]),
     );
     return sanitizeHtml(html, {
       allowedTags, // 允许的标签
       allowedAttributes: {
         ...allowedAttributes,
-        a: ['href', 'title', 'id'],
+        a: ['href', 'title', 'id', 'target'],
         img: ['src', 'alt', 'id'],
       },
     });