怎样为Discuz添加代码高亮

2021年9月9日 | 分类: 【技术】

【方案】

[1314]代码高亮显示 V1.0.5(study_codehighlight)

更新日期: 2019-12-13
兼容版本: X2.5 X3 X3.1 X3.2 X3.3 X3.4 X3.5 F1.0 L1.0
适配编码: GBK UTF8SC UTF8TC BIG5

介绍：
1. 基于 Hightlight.js 9.14.2，支持 89 种显示样式
2. 支持 Apache、Bash、C#、C++、CSS、CoffeeScript、Diff、HTML, XML、HTTP、Ini, TOML、JSON、Java、JavaScript、Makefile、Markdown、Nginx、Objective-C、PHP、Perl、Properties、Python、Ruby、SQL、Shell Session等的代码高亮
3. 注意：语法高亮的浏览器兼容性由 highlight 的兼容性决定，不保证兼容所有浏览器。手机端没有代码复制功能。

插件的设置：

显示风格
使用的版块
显示的用户组
代码框的高度（PC端）
是否显示横向滚动条
显示行号
复制代码文字颜色
复制代码文字背景颜色
手机触屏版是否处理:
手机触屏版高度
手机触屏版显示横向滚动条

【相关】

官网：http://highlightjs.org/

源码：https://github.com/isagalaev/highlight.js

最新版本：11.2.0

【需求】

需求：行号边距更宽一点

编辑：source/function/function_core.php 58行

$_var_3 = $_var_3 . ("<style>." . $_var_9 . " li {margin-left: 5em;padding-left: 5px;border-left: 1px solid #CDCDCD !important;}</style>");

需求：设置代码区域的字体和字号

找到所选配色方案的 .css 文件。

编辑：images/styles/github.css

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
  font-size: 12px;
  font-family: "Courier New";
}

参考：https://github.com/zenozeng/fonts.css/
参考：https://www.cnblogs.com/wayhome123/p/13408587.html
参考：https://gist.github.com/lzqwebsoft/6458377