首页
友情链接
统计
关于本站
Search
1
毛玻璃UI-小菜狗同款个人主页
2,047 阅读
2
PHP 实现图片验证码之给 Typecho 评论加上验证码
1,478 阅读
3
Typechho网站美化技巧
928 阅读
4
Typecho Joe主题如何增加页码分页功能
756 阅读
5
Typecho个性主题模板
670 阅读
网站源码
Typecho
划水日常
wordpress
zblog
网络教程
游戏
登录
/
注册
Search
标签搜索
主题
教程
插件
网站美化
php
pjax
个人主页
发卡网
CSS
wordpress自定义字段
seo
HTML
wordpress函数代码
简洁
统计
当面付
要饭
ipv6
教材
打赏
小菜狗
累计撰写
123
篇文章
累计收到
27
条评论
首页
栏目
网站源码
Typecho
划水日常
wordpress
zblog
网络教程
游戏
页面
友情链接
统计
关于本站
搜索到
19
篇与
的结果
2023-03-14
Typecho代码高亮插件Code Prettify
介绍最初基于 Highlight 插件,写一款名为 ColorHighlight插件但因为插件本身存在不少BUG,自己又不想重写,便重新基于 CodeHighlighter写了一款在原有的代码高亮样式上新增了Mac风格代码,修改了JS代码使用以Handsome主题为例,其它主题可能出现样式错误第 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主题为例:主题 --> 设置外观 --> 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);}说明可设置项选择高亮主题风格 (官方提供的 6 种风格切换,本人自己新增了三种(Mac风格))coy.cssdark.cssBlackMac.css(黑色Mac风格)GrayMac.css (默认选中:Mac风格(灰色))WhiteMac.css(白色Mac风格)twilight.csstomorrow-night.css是否在代码左侧显示行号 (默认开启)后记很多人反馈插件在其它主题上没有效果或是样式不正常由于有些主题是自带代码高亮,会存在样式冲突,无法对每个主题都完美兼容精力有限,只能尽量做好handsome主题完美兼容有问题也欢迎留言下载地址隐藏内容,请前往内页查看详情
2023年03月14日
53 阅读
1 评论
0 点赞
1
2
3