# 库文件打包说明

## 依赖库

HTML 组装阶段需要内嵌以下成熟库（无 CDN 依赖）：

### 1. marked.js - Markdown 解析

```bash
# 获取最新版本
curl -o templates/libs/marked.min.js https://unpkg.com/marked/marked.min.js
```

### 2. highlight.js - 代码语法高亮

```bash
# 获取核心 + 常用语言包
curl -o templates/libs/highlight.min.js https://unpkg.com/@highlightjs/cdn-assets/highlight.min.js

# 获取 github-dark 主题
curl -o templates/libs/github-dark.min.css https://unpkg.com/@highlightjs/cdn-assets/styles/github-dark.min.css
```

## 内嵌方式

Phase 5 Agent 应：

1. 读取 `templates/libs/*.js` 和 `*.css`
2. 将内容嵌入 HTML 的 `<script>` 和 `<style>` 标签
3. 在 `DOMContentLoaded` 后初始化：

```javascript
// 初始化 marked
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return hljs.highlightAuto(code).value;
  },
  breaks: true,
  gfm: true
});

// 应用高亮
document.querySelectorAll('pre code').forEach(block => {
  hljs.highlightElement(block);
});
```

## 备选方案

如果无法获取外部库，使用内置的简化 Markdown 转换：

```javascript
function simpleMarkdown(md) {
  return md
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/```(\w+)?\n([\s\S]*?)```/g, (m, lang, code) => 
      `<pre data-language="${lang || ''}"><code class="language-${lang || ''}">${escapeHtml(code)}</code></pre>`)
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
    .replace(/^\|(.+)\|$/gm, processTableRow)
    .replace(/^- (.+)$/gm, '<li>$1</li>')
    .replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
}
```

## 文件结构

```
templates/
├── libs/
│   ├── marked.min.js      # Markdown parser
│   ├── highlight.min.js   # Syntax highlighting
│   └── github-dark.min.css # Code theme
├── tiddlywiki-shell.html
└── css/
    ├── wiki-base.css
    └── wiki-dark.css
```