feat: 添加 Mermaid 图表支持
- 在设置页功能增强分类中添加 Mermaid 图表设置项 - 支持启用/禁用 Mermaid 渲染 - 支持自定义 CDN 地址(默认 jsdelivr) - 提供 4 种主题选择(默认/森林/暗色/中性) - 在 footer.php 中添加 Mermaid 库加载和初始化逻辑 - 自动识别 language-mermaid 和 mermaid 类的代码块 - 在 style.css 中添加 Mermaid 图表样式 - 支持响应式布局和夜间模式 - 使用方式:在代码块中指定语言为 mermaid
This commit is contained in:
48
footer.php
48
footer.php
@@ -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*/?>
|
||||
|
||||
Reference in New Issue
Block a user