简介

SyntaxHighlighter已经是一个相对比较成熟稳定的老牌语法高亮插件了，而且还支持复制、在新窗口查看源代码等较多的可选功能，可对Javascript，CSS，PHP，XML等代码进行高亮处理。

使用

1.  引入文件

<link rel="stylesheet" href="static/css/shCoreDefault.css">
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/js/shCore.js"></script>
<script src="static/js/shBrushCss.js"></script>
<script src="static/js/shBrushJScript.js"></script>
<script src="static/js/shBrushXml.js"></script>

说明：无论对Javascript，CSS，PHP，XML那种代码处理都需要引入shCore.js文件，其他文件可以根据需要选择使用

2. 简单使用

<script type="text/javascript">
        $(document).ready(function () {
            $(".article_content pre").each(function () {
                var $this = $(this);
                if ($this.attr("class").indexOf("brush:") != -1) {
                    var lang = $this.attr("class").split(';')[0].split(':')[1];
                    $this.attr('name', 'code');
                    $this.attr('class', lang);
                }
            });
            dp.SyntaxHighlighter.HighlightAll('code');
            });
</script>

注意事项：

1）源代码中的"<"和">"都应该替换成"<"和">"，否则可能无法正确进行语法高亮修饰。

2）Syntaxhighlighter在Chrome浏览器中会显示竖向滚动条，让代码框看起来很不美观，修复的方法是定义overflow-y属性，可以直接修改源文件，也可以在主题样式表中写，Sola选择写在主题的style.css中：

.*** .syntaxhighlighter {
    overflow-y: hidden !important;
}

相关链接

官方地址 ：https://wallpapergod.com/macbook-pro

GitHub 地址 ：https://github.com/syntaxhighlighter