ciaoly
给我的BLOG添加代码高亮

access_time
brush 322个字
whatshot 22 ℃

刚更换了新的主题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(); ?>

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

image-20220801143103719

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

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

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

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

image-20220801145755251

image-20220801145802543

image-20220801145807588

一层层的来, 最外层的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文本框输入带回车换行的文本时有问题, 找个工具压缩一下, 就可以了.

最终效果:

image-20220801165314272

还挺好看的, 凑活着用吧

#如无特别声明,该文章均为 ciaoly 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2022 年 08 月 01 日


create 添加新评论


account_circle
email
language
textsms





关于 DreamCat

主题名称:DreamCat | 版本:X2.6.220211

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld | WhiteBearcn | DFFZMXJ

Designed by HanFengA7 Power by Typecho

Copyright © 2015-2022 by LychApe All rights reserved!

加我的QQ
加我的微博
加我的支付宝
加我的微信