feat: 移除 Mermaid 支持并创建需求文档
- 从 settings.php 移除 Mermaid 设置项和选项保存逻辑 - 从 functions.php 移除 Mermaid 代码块预处理函数 - 从 footer.php 移除 Mermaid 加载和渲染代码 - 从 style.css 移除 Mermaid 图表样式 - 删除本地镜像文件 assets/vendor/external/mermaid/ - 创建 mermaid-support-requirements.md 需求文档 原因：WP-Markdown 编辑器保存的 Markdown 源文件中 Mermaid 代码是一整行， 没有真正的换行符，导致 Mermaid 解析器持续报错。所有尝试的解决方案均失败。 需求文档中详细说明了问题原因和推荐的替代方案。
This commit is contained in:
218
footer.php
218
footer.php
@@ -147,224 +147,6 @@
|
||||
|
||||
<?php }?>
|
||||
|
||||
<?php if (get_option('argon_enable_mermaid') == 'true') { /*Mermaid*/?>
|
||||
|
||||
<?php
|
||||
|
||||
// 判断是否使用本地镜像
|
||||
|
||||
$mermaid_url = get_option('argon_mermaid_cdn_url') == '' ? '//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js' : get_option('argon_mermaid_cdn_url');
|
||||
|
||||
if (get_option('argon_mermaid_use_local') == 'true') {
|
||||
|
||||
$mermaid_url = $GLOBALS['assets_path'] . '/assets/vendor/external/mermaid/mermaid.min.js';
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<script src="<?php echo $mermaid_url; ?>"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
mermaid.initialize({
|
||||
|
||||
startOnLoad: false,
|
||||
|
||||
theme: '<?php echo get_option('argon_mermaid_theme', 'default'); ?>',
|
||||
|
||||
securityLevel: 'loose',
|
||||
|
||||
flowchart: {
|
||||
|
||||
useMaxWidth: true,
|
||||
|
||||
htmlLabels: true
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// 处理 WP-Markdown 生成的特殊格式
|
||||
document.querySelectorAll('div.mermaid').forEach(function(mermaidDiv) {
|
||||
// 检查是否已经处理过
|
||||
if (mermaidDiv.classList.contains('mermaid-processed')) {
|
||||
return;
|
||||
}
|
||||
mermaidDiv.classList.add('mermaid-processed');
|
||||
|
||||
// 优先使用 PHP 预处理的 data 属性
|
||||
let code = mermaidDiv.getAttribute('data-mermaid-code');
|
||||
|
||||
if (!code) {
|
||||
// 如果没有 data 属性，尝试从 script 标签提取
|
||||
let scriptElement = mermaidDiv.querySelector('script[type="text/javascript"]');
|
||||
if (scriptElement) {
|
||||
let scriptContent = scriptElement.textContent;
|
||||
let match = scriptContent.match(/document\.write\("(.*)"\)/s);
|
||||
if (match && match[1]) {
|
||||
code = match[1]
|
||||
.replace(/\\n/g, '\n')
|
||||
.replace(/\\"/g, '"')
|
||||
.replace(/\\'/g, "'")
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/&/g, '&');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
console.warn('No mermaid code found in div');
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空 div 内容
|
||||
mermaidDiv.innerHTML = '';
|
||||
|
||||
// 渲染 Mermaid 图表
|
||||
try {
|
||||
let id = 'mermaid-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
||||
mermaid.render(id, code).then(function(result) {
|
||||
mermaidDiv.innerHTML = result.svg;
|
||||
}).catch(function(e) {
|
||||
console.error('Mermaid rendering error:', e);
|
||||
mermaidDiv.innerHTML = '<pre style="color: red;">Mermaid 渲染失败: ' + e.message + '</pre>';
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Mermaid rendering error:', e);
|
||||
mermaidDiv.innerHTML = '<pre style="color: red;">Mermaid 渲染失败: ' + e.message + '</pre>';
|
||||
}
|
||||
});
|
||||
|
||||
// 递归获取所有文本节点，保留换行符
|
||||
function getTextWithLineBreaks(element) {
|
||||
let text = '';
|
||||
for (let node of element.childNodes) {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
text += node.textContent;
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
if (node.tagName === 'BR') {
|
||||
text += '\n';
|
||||
} else {
|
||||
text += getTextWithLineBreaks(node);
|
||||
}
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
// 处理标准格式的 mermaid 代码块
|
||||
|
||||
document.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(function(element) {
|
||||
|
||||
// 检查是否已经处理过
|
||||
|
||||
if (element.classList.contains('mermaid-processed')) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
element.classList.add('mermaid-processed');
|
||||
|
||||
let pre = element.parentElement;
|
||||
|
||||
// 优先从 data-mermaid-code 属性获取代码
|
||||
|
||||
let code = element.getAttribute('data-mermaid-code');
|
||||
|
||||
|
||||
|
||||
// 如果没有 data 属性，尝试从内容获取
|
||||
|
||||
if (!code) {
|
||||
|
||||
code = getTextWithLineBreaks(element);
|
||||
|
||||
}
|
||||
|
||||
// 去除首尾空白
|
||||
|
||||
code = code.trim();
|
||||
|
||||
// 验证是否为有效的 Mermaid 代码
|
||||
|
||||
let validKeywords = ['graph', 'flowchart', 'sequenceDiagram', 'classDiagram', 'stateDiagram', 'erDiagram', 'journey', 'gantt', 'pie', 'gitGraph', 'mindmap', 'timeline', 'quadrantChart'];
|
||||
|
||||
let isValid = false;
|
||||
|
||||
for (let keyword of validKeywords) {
|
||||
|
||||
if (code.toLowerCase().startsWith(keyword.toLowerCase())) {
|
||||
|
||||
isValid = true;
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 如果不是有效的 Mermaid 代码，跳过
|
||||
|
||||
if (!isValid) {
|
||||
|
||||
console.log('Skipping invalid Mermaid code:', code.substring(0, 50));
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
// 调试：输出代码内容和换行符
|
||||
|
||||
console.log('Standard Mermaid code found (length: ' + code.length + ')');
|
||||
|
||||
console.log('Contains newlines:', code.indexOf('\n') !== -1);
|
||||
|
||||
console.log('First 100 chars:', code.substring(0, 100));
|
||||
|
||||
// 创建 Mermaid 容器
|
||||
|
||||
let mermaidDiv = document.createElement('div');
|
||||
|
||||
mermaidDiv.className = 'mermaid';
|
||||
|
||||
mermaidDiv.textContent = code;
|
||||
|
||||
// 替换原来的 pre 元素
|
||||
|
||||
pre.parentNode.replaceChild(mermaidDiv, pre);
|
||||
|
||||
|
||||
|
||||
// 立即渲染
|
||||
|
||||
try {
|
||||
|
||||
mermaid.init(undefined, mermaidDiv);
|
||||
|
||||
console.log('Standard Mermaid diagram rendered successfully');
|
||||
|
||||
} catch (e) {
|
||||
|
||||
console.error('Mermaid rendering error:', e);
|
||||
|
||||
console.error('Code that failed:', code.substring(0, 200));
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<?php }?>
|
||||
|
||||
|
||||
|
||||
<?php if (get_option('argon_enable_code_highlight') == 'true') { /*Highlight.js*/?>
|
||||
|
||||
<link rel="stylesheet" href="<?php echo $GLOBALS['assets_path']; ?>/assets/vendor/highlight/styles/<?php echo get_option('argon_code_theme') == '' ? 'vs2015' : get_option('argon_code_theme'); ?>.css">
|
||||
|
||||
Reference in New Issue
Block a user