Typecho代码高亮插件Code Prettify

247次阅读
没有评论

共计 1264 个字符,预计需要花费 4 分钟才能阅读完成。

提醒:本文最后更新于 2024-04-15 23:28,文中所关联的信息可能已发生改变,请知悉!

使用

  1. 下载本插件,解压,放到 usr/plugins/ 目录中;
  2. 文件夹名改为 CodePrettify;
  3. 登录管理后台,激活插件(请勿与其它同类插件同时启用,以免互相影响)
  4. 设置:选择主题风格,是否显示行号等。
  5. 最新版本 handsome 主题内置的高亮与该插件冲突,请进入后台 -> 设置外观 -> 主题增强功能里关闭主题内置高亮
  6. 外观设置 -> 开发者选项 -> 自定义 CSS,添加以下 css 代码即可
    #post-content pre code {
     display:block;
     overflow-x:auto;
     position:relative;
     margin:0;
     padding-left:50px;
    }
    pre code {
     position:relative;
     display:block;
     overflow-x:auto;
     margin:4.4px 0.px .4px 1px;
     padding:0;
     max-height:500px;
     padding-left:3.5em
    }

语法

\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的 \

若不填写语言类型,则无效果

PJAX

如果你的网站有开启 Pjax
请把以下代码添加到回调函数的地方,在你使用的主题设置里看看
以 Handsome 主题为例:

  1. 主题 –> 设置外观 –> Pjax –> PJAX 回调函数
    if (typeof Prism !== 'undefined') {var pres = document.getElementsByTagName('pre');
                 for (var i = 0; i < pres.length; i++){if (pres[i].getElementsByTagName('code').length > 0)
                         pres[i].className  = 'line-numbers';}
    Prism.highlightAll(true,null);}

    若插件里设置不显示行号,PJAX 函数要改为

    if (typeof Prism !== 'undefined') {Prism.highlightAll(true,null);}

下载

 文件名称:Code-Prettify-for-typecho
 文件大小:1MB
 下载声明:本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息。
下载地址:

https://github.com/Xcnte/Code-Prettify-for-typecho[/download]

 文件名称:Code-Prettify-for-typecho
 文件大小:1MB
 下载声明:本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息。
下载地址:

https://gitee.com/xcnte/Code-Prettify-for-typecho[/download]

可设置项

  1. 选择高亮主题风格 (官方提供的 6 种风格切换,本人自己新增了三种(Mac 风格))
    • coy.css
    • dark.css
    • BlackMac.css(黑色 Mac 风格)
    • GrayMac.css(默认选中:Mac 风格(灰色))
    • WhiteMac.css(白色 Mac 风格)
    • twilight.css
    • tomorrow-night.css
  2. 是否在代码左侧显示行号(默认开启)
正文完
觉得有用?欢迎赞赏,感谢!
post-qrcode
 0
苏维歌
版权声明:本文于2022-04-25转载自原文连接,共计1264字。
转载提示:此文章非本站原创文章,若需转载请联系原作者获得转载授权。
评论(没有评论)
验证码