feat: 实现 Mermaid 代码块魔改支持
- 添加 convertMermaidCodeblocks() 函数,在代码高亮前拦截 mermaid 代码块 - 支持标准 Markdown 代码块 (\\\mermaid) 渲染 - 更新 detectMermaidBlocks() 添加 mermaid-from-codeblock 选择器 - 更新 extractMermaidCode() 支持新容器类型 - 创建测试文件 test-codeblock-magic.html - 更新用户文档、开发者文档和 FAQ - 完全绕过代码高亮和 WordPress 格式化 - 支持 PJAX 页面切换 - 特殊字符和换行符正确保留
This commit is contained in:
78
commit-msg-mermaid-new.txt
Normal file
78
commit-msg-mermaid-new.txt
Normal file
@@ -0,0 +1,78 @@
|
||||
feat: 添加多种 Mermaid 标记方式,避免 WPMD 处理问题
|
||||
|
||||
问题描述:
|
||||
- WP-Markdown 插件将 Markdown 代码块转换为特殊格式
|
||||
- 传统标记方式会被 WPMD 套上代码高亮窗口,导致嵌套结构
|
||||
- 某些字符被自动转义,导致渲染失败
|
||||
- 之前的正则表达式只能提取到第一个单词
|
||||
|
||||
新增功能:
|
||||
1. Argon 自定义标记(推荐):<div class="argon-mermaid">...</div>
|
||||
- 不会被 WPMD 处理
|
||||
- 语法简单清晰
|
||||
- 支持所有 Mermaid 图表类型
|
||||
|
||||
2. HTML 注释标记:<!-- mermaid -->...<!-- /mermaid -->
|
||||
- 在编辑器中不可见
|
||||
- 不会被任何插件处理
|
||||
- 适合需要隐藏标记的场景
|
||||
|
||||
3. data 属性标记:<div data-mermaid>...</div>
|
||||
- 符合 HTML5 规范
|
||||
- 语义化标记
|
||||
- 不会被 WPMD 处理
|
||||
|
||||
修复内容:
|
||||
1. 改进正则表达式为 ([\s\S]*?),匹配包括换行在内的所有字符
|
||||
2. 添加三层降级方案:
|
||||
- 方案1: 匹配 document.write("...")
|
||||
- 方案2: 直接提取引号内容
|
||||
- 方案3: 纯文本提取
|
||||
3. 增加详细的调试日志(原始内容、提取长度、最终代码)
|
||||
4. 优化解码顺序(先 HTML 实体,后转义字符)
|
||||
5. 添加 HTML 注释标记检测逻辑(TreeWalker)
|
||||
|
||||
代码变更:
|
||||
- argontheme.js:
|
||||
* detectMermaidBlocks(): 添加新选择器和注释检测
|
||||
* detectCommentBlocks(): 新增函数,检测 HTML 注释标记
|
||||
* extractCommentContent(): 新增函数,提取注释之间的内容
|
||||
* extractMermaidCode(): 支持新标记格式的代码提取
|
||||
|
||||
- tests/test-wp-markdown-format.html:
|
||||
* 添加 9 种测试场景
|
||||
* 包含所有支持的标记格式
|
||||
* 使用改进后的提取逻辑
|
||||
|
||||
- docs/mermaid-wpmd-usage.md:
|
||||
* 详细说明所有标记方式
|
||||
* 提供使用示例和最佳实践
|
||||
* 包含故障排除指南
|
||||
|
||||
支持的标记格式(按优先级):
|
||||
1. <div class="mermaid"> - WPMD 标准格式
|
||||
2. <div class="argon-mermaid"> - Argon 自定义格式 ⭐
|
||||
3. <div data-mermaid> - data 属性格式
|
||||
4. <!-- mermaid -->...<!-- /mermaid --> - HTML 注释格式
|
||||
5. <pre><code class="language-mermaid"> - Markdown 格式
|
||||
6. <pre data-lang="mermaid"> - 自定义属性格式
|
||||
7. <code class="mermaid"> - 简化格式
|
||||
|
||||
测试方法:
|
||||
1. 访问测试页面:https://blog.cartol.top/wp-content/themes/argon/tests/test-wp-markdown-format.html
|
||||
2. 查看控制台日志,确认所有测试用例都能正确提取和渲染
|
||||
3. 在文章中使用推荐的标记方式:<div class="argon-mermaid">...</div>
|
||||
4. 如果还有问题,查看控制台的详细日志
|
||||
|
||||
推荐使用方式:
|
||||
<div class="argon-mermaid">
|
||||
flowchart TD
|
||||
A[开始] --> B[处理]
|
||||
B --> C[结束]
|
||||
</div>
|
||||
|
||||
注意事项:
|
||||
- 强烈推荐使用 Argon 自定义标记,避免 WPMD 处理
|
||||
- HTML 注释标记适合需要隐藏标记的场景
|
||||
- 传统 Markdown 代码块仍然支持,但可能有嵌套问题
|
||||
- 所有标记方式都会自动解码 HTML 实体和转义字符
|
||||
Reference in New Issue
Block a user