Skip to content

Commit

Permalink
关于预着色的代码块的高亮问题说明
Browse files Browse the repository at this point in the history
  • Loading branch information
movsb committed Apr 20, 2024
1 parent 0a55a28 commit f848c43
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 1 deletion.
13 changes: 13 additions & 0 deletions docs/TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,16 @@
比如,页面地址是 `/about`,base 是 `/123/`,锚点是 `#name`
那么,修改前,锚点的绝对地址是 `/123/#name`,这会导致浏览器重新加载。
而如果渲染时把锚点改成 `/about#name`,就不会重新加载了。

## 代码高亮

后端渲染/手写的带废材的代码块不能被正确高亮:

```html
<pre>
<code>export PS1="<span style="color:blue;">\\[</span>\033[31m<span style="color:blue;">\\]</span>\W \$<span style="color:blue;">\\[</span>\033[m<span style="color:blue;">\\]</span> "</code>
</pre>
```

暂时没有好办法,尽量不这样写。
参考:<https://prismjs.com/faq.html#why-is-pre-existing-html-stripped-off>
7 changes: 6 additions & 1 deletion theme/blog/statics/scripts/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,11 @@ TaoBlog.fn.externAnchor = function() {
}();

// 代码高亮
// 必须是 <pre><code class="language-xxx"></code></pre>
TaoBlog.fn.highlight = function(pre) {
// 早期代码兼容:
// <pre class="code" lang="cpp"></pre>
// 处理成 `lang-xxx` 形式。
{
if (pre.classList.contains('code') && pre.getAttribute('lang') != '' && !pre.firstElementChild) {
let code = document.createElement('code');
Expand All @@ -66,7 +68,9 @@ TaoBlog.fn.highlight = function(pre) {
pre.appendChild(code);
}
}
// 必须是 <pre><code class="language-xxx"></code></pre>

// 没有指定 `language-xxx` 的代码块的处理:加上 language-none。
// 注意:有些 <pre><code> 是后端渲染/手写标记着色的,此时不需要前端着色。
{
let code = pre.querySelector(':scope > code');
if (code) {
Expand All @@ -82,6 +86,7 @@ TaoBlog.fn.highlight = function(pre) {
}
}

// 主要的代码着色行。
Prism.highlightAllUnder(pre);

// 自动滚动行号
Expand Down

0 comments on commit f848c43

Please sign in to comment.