BIJIV

Typecho代码语法高亮插件:CodeHighlighter
基于prismjs的代码语法高亮插件for Typecho,可显示语言类型,行号,有复制代码到剪切板功能。 使用方...
扫描右侧二维码阅读全文
16
2019/01

Typecho代码语法高亮插件:CodeHighlighter

基于prismjs代码语法高亮插件for Typecho,可显示语言类型,行号,有复制代码到剪切板功能

使用方法

下载本插件,解压,放到usr/plugins/目录中;
文件夹名改为CodeHighlighter;
登录管理后台,激活插件;
设置:选择主题风格,是否显示行号等。

代码写法

'''javascript (语言类型必填)
// codes go here
'''

重要说明

可设置项
1.选择高亮主题风格(官方提供的8种风格切换)

  • coy.css
  • dark.css
  • default.css
  • funky.css
  • okaikia.css (默认选中,因为比较顺眼)
  • solarized-light.css
  • tomorrow-night.css
  • twilight.css

2.是否在代码左侧显示行号(默认开启)
在插件中不方便实现的设置项
由于 prismjshighlightjs 的插件扩展机制不同,所以本插件的有些扩展项是无法设置的。
本插件支持常见的一些语言高亮。您可以打开以下链接查看详情:
http://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+apacheconf+c+aspnet+bash+cpp+csharp+coffeescript+markup-templating+git+java+less+markdown+nginx+php+sql+python+smarty&plugins=line-numbers+toolbar+show-language+copy-to-clipboard
如有需要,请勾选需要支持的语言定制您的 jscss 文件,下载好后,分别替换以下文件:
Typecho 插件目录\CodeHighlighter\static\prism.js
Typecho 插件目录\CodeHighlighter\static\styles\改为对应的风格名.css (如跟您博客样式有冲突,稍作修改此 css 即可)

建议

插件Plugins最好至少勾选以下4项:
行号(在代码左侧显示行号)
Toolbar(代码块右上方工具条)
显示语言(显示代码是什么语言【依赖:工具栏】)
复制到剪贴板按钮(复制代码功能【依赖:工具栏】)

插件下载

本站下载:

GitHub:https://github.com/Copterfly/CodeHighlighter-for-Typecho

最后修改:2019 年 04 月 08 日 10 : 41 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论