typecho 本身代码不支持高亮需要用到一些插件,之前我用的是CodeStyle,但是功能有些残缺,只支持高亮,无法复制,识别当前语言类型并展示,因此我找到了一个更加不错的高亮插件,CodePrettify,在这里推荐一下。

地址是:https://gitee.com/xcnte/Code-Prettify-for-typecho

基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,提供多种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能。

并且在仓库中作者提供了一些常见 bug 的修复方法。

然后我个人在这个基础上做了一些简单的样式调整,来感受一下这款新插件。

比如:

public static function header() {
    $style = Helper::options()->plugin('CodePrettify')->code_style;
    $cssUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/styles/' . $style;
    echo '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" />';
}
$(".text img").click(function() {
        $.previewImage(this.src);
    });
    $.previewImage = function (src) {
        var img = new Image(), index = layer.load(2, {time: 0, scrollbar: false, shade: [0.02, '#000']});
        img.style.background = '#fff', img.style.display = 'none';
        img.src = src;
        document.body.appendChild(img), img.onerror = function () {
            layer.close(index);
        }, img.onload = function () {
            layer.open({
                type: 1, shadeClose: true, success: img.onerror, content: $(img), title: false,
                area: img.width > 1140 ? '1140px' : img.width, closeBtn: 1, skin: 'layui-layer-nobg', end: function () {
                    document.body.removeChild(img);
                }
            });
        };
    };