给我的BLOG添加代码高亮

刚更换了新的主题DreamCat, 原来的代码高亮插件CodePrettify不太兼容, 来改一改.

首先看了看Source面板, 没加载CodePrettify里面的JS文件. 去看看CodePrettify的源代码, 在footer函数里注入了JS文件.

// Some code...
public static function footer() {
        $jsUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/prism.js';
        $jsUrl_clipboard = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/clipboard.min.js';
//Some code...    
    echo <<<HTML
<script type="text/javascript" src="{$jsUrl_clipboard}"></script>
<script type="text/javascript" src="{$jsUrl}"></script>

但是检查在页面里并没有生成这几个标签, 怀疑是主题的问题. 搜一搜前人的经验, 还真有类似的: Typecho插件footer注入不生效问题. 果断在footer.php里添加代码(并提个issue)

<?php $this->footer(); ?>

刷新页面, 有了, 但又不完全有.

看起来需要调css了. 打开原作者的Blog, 对着他的样式开始调吧.

首先是DOM结构, 插件里的JS把一个code标签变成了这样:

<div class="code-toolbar">
    <pre class="line-numbers language-powershell">
        <code class="language-powershell">

再检查原BLOG里的尺寸, 三层元素的尺寸分别为:

一层层的来, 最外层的code-toolbar正常, <pre>标签异常. 先解决掉<pre>标签的padding. 在主题设置里面, 可以注入全局CSS, 在里面为<pre>注入padding: 0;.

再看<code>标签, 从原作者的Blog里看到<code>标签有padding-left, 找到相关的代码, 复制出来, 同样是在主题设置里注入. 最终需要注入的CSS如下:

.mdui-typo pre[class*=language-] code {
    position: relative;
    display: block;
    overflow-x: auto;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.mdui-typo pre[class*=language-] {
    padding: 0
}

DreamCat的自定义CSS文本框输入带回车换行的文本时有问题, 找个工具压缩一下, 就可以了.

最终效果:

还挺好看的, 凑活着用吧

最新的Release 2.8.221001(LTS)版本中加入了代码高亮插件, 最终注入的css如下:

.code-toolbar pre[class*=language-] code {
    position:relative;
    display:block;
    overflow-x:auto;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.code-toolbar pre[class*=language-] {
    padding:0 !important;
    border-top-left-radius:0 !important;
}

另外就是逆向还原一下该feature: 新增代码高亮, 禁用主题内置的代码高亮插件.

给我的BLOG添加代码高亮

作者: ciaoℒy

时间: 2022-08-01