Typecho代码高亮插件Code Prettify


Notice: Undefined index: type in /www/wwwroot/annum.cn/usr/themes/handsome/libs/Content.php on line 1119

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

起始

最初基于 Highlight 插件,开发一款名为ColorHighlight插件

但因为插件本身存在不少BUG,自己又不想重写结构,于是便重新基于CodeHighlighter开发了一款

依旧在原有的代码高亮样式上新增了Mac风格,修改了部分JS代码

下载

Github:https://github.com/Xcnte/Code-Prettify-for-typecho

码云:https://gitee.com/xcnte/Code-Prettify-for-typecho

激活

以Handsome主题为例

点击开合查看步骤

第1步:下载插件,解压,放到usr/plugins目录中;

第2步:文件夹名改为CodePrettify;

第3步:登录管理后台,激活插件
(请勿于其他同类插件同时启用,以免互相影响)

第4步:设置:选择主题风格,是否显示行号等。

第5步:修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件

  • handsome.min.css文件里的#post-content pre内容替换为
padding:0;
border-radius:0;
overflow:hidden;
  • handsome.min.css文件里的#post-content pre code内容替换为
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px 0.4px 1px;
padding: 0;
max-height:500px;
padding-left:2em;
  • handsome.min.css文件里末尾添加
#post-content .code-toolbar pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px 0.4px 1px;
padding: 0;
max-height:500px;
padding-left: 3.5em;
}
  • handsome.min.css文件里删除#post-content pre:before下所有内容

如果对主题css没有经过魔改的同学,可以通过直接替换handsome.min.css文件,建议大家使用最新handsome版本

Handsome 5.1.0以上版本:

  提取码:z465

Handsome 5.1.0以下版本:

  提取码:cr2w

用法

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

效果如下:

<?php echo 'hello jrotty!'; ?>

Pjax

如果你的网站有开启Pjax(handsome主题默认开启)

请把以下代码添加到回调函数的地方,在你使用的主题设置里看看

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

可设置项

1、选择高亮主题风格(官方提供的8种风格切换,本人自己新增了三种(Mac风格))
  • coy.css
  • dark.css
  • BlackMac.css(黑色Mac风格)
  • GrayMac.css (默认选中:Mac风格(灰色))
  • WhiteMac.css(白色Mac风格)
  • twilight.css
  • tomorrow-night.css
是否在代码左侧显示行号(默认开启)

后记

新版插件暂时取消了代码窗口化功能(功能已经写好了,但是效果达不到自己的预期,也许下个版本会加回来

插件的兼容性应该不存在什么问题,博主在Handsome主题上使用一切正常

如果你在其他主题使用过程种出现了问题可以随时联系我

文章转载自Xcnte' s Blog 《Typecho代码高亮插件Code Prettify》

Last modification:July 12th, 2019 at 01:44 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment


Notice: Undefined index: type in /www/wwwroot/annum.cn/usr/themes/handsome/libs/Content.php on line 1119