feat: 添加 Mermaid 图表支持

- 在设置页功能增强分类中添加 Mermaid 图表设置项
- 支持启用/禁用 Mermaid 渲染
- 支持自定义 CDN 地址(默认 jsdelivr)
- 提供 4 种主题选择(默认/森林/暗色/中性)
- 在 footer.php 中添加 Mermaid 库加载和初始化逻辑
- 自动识别 language-mermaid 和 mermaid 类的代码块
- 在 style.css 中添加 Mermaid 图表样式
- 支持响应式布局和夜间模式
- 使用方式:在代码块中指定语言为 mermaid
This commit is contained in:
2026-01-23 18:50:50 +08:00
parent 468f2a0a93
commit 627a57c5e9
3 changed files with 152 additions and 0 deletions

View File

@@ -147,6 +147,54 @@
<?php }?>
<?php if (get_option('argon_enable_mermaid') == 'true') { /*Mermaid*/?>
<script src="<?php echo get_option('argon_mermaid_cdn_url') == '' ? '//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js' : get_option('argon_mermaid_cdn_url'); ?>"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
mermaid.initialize({
startOnLoad: true,
theme: '<?php echo get_option('argon_mermaid_theme', 'default'); ?>',
securityLevel: 'loose',
flowchart: {
useMaxWidth: true,
htmlLabels: true
}
});
// 自动渲染所有 mermaid 代码块
document.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(function(element) {
let pre = element.parentElement;
let mermaidDiv = document.createElement('div');
mermaidDiv.className = 'mermaid';
mermaidDiv.textContent = element.textContent;
pre.parentNode.replaceChild(mermaidDiv, pre);
});
});
</script>
<?php }?>
<?php if (get_option('argon_enable_code_highlight') == 'true') { /*Highlight.js*/?>