fix: 修复代码块语法高亮丢失 + 语言标签注入 + 安全性增强

- 新增 cdnjs.cloudflare.com CSP 白名单,允许加载 highlight.js
- 消毒策略放行 span 元素,保留 highlight.js 高亮 class
- 详情页和新帖子页引入 highlight.js 库和 GitHub 主题
- 代码块语言选择器默认 text,支持 prev/next 循环切换语言
- 代码块语言标签注入兼容 data-language 和 code class 双来源
- 修复 utils.js defer 导致 common.js 执行时 getCSRFToken 未定义
This commit is contained in:
2026-05-28 15:21:44 +08:00
parent 91f2cbebc1
commit fe81c879b0
6 changed files with 305 additions and 348 deletions

View File

@ -1,4 +1,5 @@
{{template "layout/header.html" .}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/github-dark.min.css">
<body>
{{template "layout/nav.html" .}}
@ -45,18 +46,34 @@
{{template "layout/footer.html" .}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
// ---- 代码块语言标签注入 ----
// ---- 代码块语言标签注入 + 语法高亮 ----
(function() {
document.querySelectorAll('.post-detail-body pre').forEach(function(pre) {
// 从 pre 的 data-language 或 code 的 class 中获取语言
var lang = pre.getAttribute('data-language');
if (lang) {
var label = document.createElement('div');
label.className = 'code-lang-label';
label.textContent = lang;
pre.insertBefore(label, pre.firstChild);
pre.style.paddingTop = '32px';
if (!lang) {
var code = pre.querySelector('code');
if (code) {
var match = code.className.match(/language-(\w+)/);
if (match) lang = match[1];
}
}
lang = lang || 'text';
var label = document.createElement('div');
label.className = 'code-lang-label';
label.textContent = lang;
pre.insertBefore(label, pre.firstChild);
pre.style.paddingTop = '32px';
// 语法高亮
var code = pre.querySelector('code');
if (code && lang !== 'text') {
code.classList.add('language-' + lang);
hljs.highlightElement(code);
}
});
})();