使 DiscuzX 3.4 论坛支持代码高亮的改造方法
这里使用了 highlight.js，它的特点：
- 支持 196 种语言，242 种样式（绝大多数用不上）
- 自动语言探测（正确率似乎一般）
- 支持使用任意 HTML 标记
- 兼容任意 js 框架
只需要知道它足够牛就OK了。
可以通过 CDN 加速服务器引用：
```html
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/default.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
```
如果需要裁剪定制一些语言，可以直接在官网下载页面（<https://highlightjs.org/download/>）操作：
!(https://file.mculoop.com/images/2022/11/105830sz0xegj6ae6eqg0q_1668147255.jpg)
下载后将 highlight.min.js 和样式表 default.min.css （也可以换用其他样式表）上传到服务器。
<!--more-->
## 修改论坛模板
修改模板 common/header.htm，在 head 标签中加入：
```html
<link rel="stylesheet" href="source/plugin/highlight/default.min.css">
<script src="source/plugin/highlight/highlight.min.js"></script>
```
同样地修改模板的 touch/common/header.htm 以支持移动端。
修改模板 forum/viewthread.htm，在尾部标签 `<div class="pgs mtm mbm cl">` 前加入：
```html
<style>
.hljs {
background: unset;
}
</style>
<script>
document.querySelectorAll("div.blockcode div").forEach(el => {
let reg = RegExp(/^<ol><li>\[\s\S]*?<\/li>/i);
let arr = reg.exec(el.innerHTML);
hljs.configure({ignoreUnescapedHTML: true});
if (arr != null) {
hljs.configure({languages: ]});
el.innerHTML = el.innerHTML.replace(arr, '');
}
hljs.highlightElement(el);
});
document.querySelectorAll("div.blockcode div").forEach(el => {
el.innerHTML = "<ol><li>" + el.innerHTML.replace(/\n/g,"\n</li><li>") +"\n</li></ol>";
});
</script>
```
同样地修改模板的 touch/forum/viewthread.htm（在标签 `<!-- main postlist end -->` 前加入） 以支持移动端。
## 使用方法
按原来的方法正常发帖就可以了（highlight.js 会自动探测所使用的语言）。如果发现语言探测的不对可以指定语言，方法：使用 Discuz 自带的编辑器按钮或 `` 标签（纯文本模式），在首行插入语言标签：`` 即可。
!(https://file.mculoop.com/images/2022/11/160508h40kr1p0p0403nk0_1668147550.jpg)
显示效果（github.min.css 样式）：
!(https://file.mculoop.com/images/2022/11/160512ew88i18tpy5fyydy_1668147572.jpg)
页:
[1]