侧边栏壁纸
博主头像
iColak's Blog

人生来来往往,来日并不方长

  • 累计撰写 107 篇文章
  • 累计创建 32 个标签
  • 累计收到 381 条评论

目 录CONTENT

文章目录

Typecho代码高亮插件Code Prettify

苏维歌
2022-04-25 / 0 评论 / 0 点赞 / 33 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2024-07-05,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用

  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(语言类型必填)

\```
删除上边代码中的\
若不填写语言类型,则无效果

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);}

下载

[download file='Code-Prettify-for-typecho' size='1MB']https://github.com/Xcnte/Code-Prettify-for-typecho[/download] [download file='Code-Prettify-for-typecho' size='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. 是否在代码左侧显示行号 (默认开启)
0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区