请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册
搜索
查看: 171|回复: 0

使 DiscuzX 3.4 论坛支持代码高亮的改造方法

[复制链接]

263

主题

0

回帖

1028

积分

管理员

积分
1028
发表于 2023-12-26 00:02:52 | 显示全部楼层 |阅读模式

这里使用了 highlight.js,它的特点:

  • 支持 196 种语言,242 种样式(绝大多数用不上)
  • 自动语言探测(正确率似乎一般)
  • 支持使用任意 HTML 标记
  • 兼容任意 js 框架

只需要知道它足够牛就OK了。

可以通过 CDN 加速服务器引用:

<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/)操作:

下载后将 highlight.min.js 和样式表 default.min.css (也可以换用其他样式表)上传到服务器。

修改论坛模板

修改模板 common/header.htm,在 head 标签中加入:

<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"> 前加入:

<style>
    .hljs {
        background: unset;
    }
</style>

<script>
    document.querySelectorAll("div.blockcode div").forEach(el => {
        let reg = RegExp(/^<ol><li>\[lang:(.+)][\s\S]*?<\/li>/i);
        let arr = reg.exec(el.innerHTML);
        hljs.configure({ignoreUnescapedHTML: true});
        if (arr != null) {
            hljs.configure({languages: [arr[1]]});
            el.innerHTML = el.innerHTML.replace(arr[0], '');
        }
        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 自带的编辑器按钮或 [code] 标签(纯文本模式),在首行插入语言标签:[lang:xxx] 即可。

显示效果(github.min.css 样式):


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|深圳市棱讯科技有限公司 ( 粤ICP备2024228160号-2 )|网站地图

GMT+8, 2024-5-18 09:48 , Processed in 0.019776 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表