fix: 优化 Mermaid 代码块识别逻辑 - 使用 textContent 替代 innerHTML 避免 HTML 标签干扰 - 添加 Mermaid 关键字验证,只处理有效的图表代码 - 添加重复处理检测,防止多次渲染 - 延迟渲染确保 DOM 完全加载 - 适配 WP-Markdown 编辑器
This commit is contained in:
92
footer.php
92
footer.php
@@ -191,45 +191,85 @@
|
|||||||
|
|
||||||
document.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(function(element) {
|
document.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(function(element) {
|
||||||
|
|
||||||
let pre = element.parentElement;
|
// 检查是否已经处理过
|
||||||
|
|
||||||
let mermaidDiv = document.createElement('div');
|
if (element.classList.contains('mermaid-processed')) {
|
||||||
|
|
||||||
mermaidDiv.className = 'mermaid';
|
|
||||||
|
|
||||||
// 获取代码内容,保留换行符
|
|
||||||
|
|
||||||
let code = element.innerHTML;
|
|
||||||
|
|
||||||
// 解码 HTML 实体(如 < > &)
|
|
||||||
|
|
||||||
let textarea = document.createElement('textarea');
|
|
||||||
|
|
||||||
textarea.innerHTML = code;
|
|
||||||
|
|
||||||
code = textarea.value;
|
|
||||||
|
|
||||||
// 去除首尾空白,但保留内部换行
|
|
||||||
|
|
||||||
code = code.trim();
|
|
||||||
|
|
||||||
// 过滤掉包含 script 标签的内容(防止误识别)
|
|
||||||
|
|
||||||
if (code.indexOf('<script') !== -1 || code.indexOf('</script') !== -1) {
|
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
element.classList.add('mermaid-processed');
|
||||||
|
|
||||||
|
let pre = element.parentElement;
|
||||||
|
|
||||||
|
// 获取代码内容
|
||||||
|
|
||||||
|
let code = element.textContent || element.innerText;
|
||||||
|
|
||||||
|
// 去除首尾空白
|
||||||
|
|
||||||
|
code = code.trim();
|
||||||
|
|
||||||
|
// 验证是否为有效的 Mermaid 代码(必须以 graph/flowchart/sequenceDiagram 等关键字开头)
|
||||||
|
|
||||||
|
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) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 Mermaid 容器
|
||||||
|
|
||||||
|
let mermaidDiv = document.createElement('div');
|
||||||
|
|
||||||
|
mermaidDiv.className = 'mermaid';
|
||||||
|
|
||||||
mermaidDiv.textContent = code;
|
mermaidDiv.textContent = code;
|
||||||
|
|
||||||
|
// 替换原来的 pre 元素
|
||||||
|
|
||||||
pre.parentNode.replaceChild(mermaidDiv, pre);
|
pre.parentNode.replaceChild(mermaidDiv, pre);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 手动触发渲染(使用 init 方法)
|
// 延迟渲染,确保 DOM 完全加载
|
||||||
|
|
||||||
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
|
setTimeout(function() {
|
||||||
|
|
||||||
|
let mermaidElements = document.querySelectorAll('.mermaid:not(.mermaid-rendered)');
|
||||||
|
|
||||||
|
if (mermaidElements.length > 0) {
|
||||||
|
|
||||||
|
mermaidElements.forEach(function(el) {
|
||||||
|
|
||||||
|
el.classList.add('mermaid-rendered');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
mermaid.init(undefined, mermaidElements);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 100);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user