[Typecho] 代码高亮插件 TypechoHighlight

TypeCho代码高亮插件,核心来自:highlightjs.org

  • 默认为MAC主题,支持主题切换
  • 支持核心引用CDN资源
  • 支持一键复制
  • 支持行号显示
  • 支持滚动条
  • 支持一键下载代码图
  • 语言支持列表:CDN:[apache,bash,c-like,c,coffeescript,cpp,csharp,css,diff,go,http,ini,java,javascript,json,kotlin,less,lua,makefile,xml,markdown,nginx,objectivec,perl,php,php-template,plaintext,properties,python,python-repl,ruby,rust,scss,shell,sql,swift,typescript,yaml]

1.前言

之前用过一个插件,也是代码高亮的,但是有个js加密了,加密的东西在服务器上用着总感觉不放心,这样就有了弄一个自己的代码高亮插件的想法

2.快速搞定

冲浪一波,基本上都是说用Highlight的方案,核心高亮方式确定并且落地到插件文件中,但是一运行,发现没有行号,网上的人才原来早就解决了,使用了:highlightjs-line-numbers.js 插件,直接搞定,调整样式就七七八八了。
然后发现,没有复制按钮,多不方便,于是找到了:clipboard.js
又是一波调整样式,终于搞定。

3.预览

<html>
    <head>
         <title>你好</title>
    </head>
    <body>1<body>
</html>

2020-12-02_13-29.png

4.使用

clone 下来代码,在usr/plugins/创建目录TypeChoHighLight 把clone下来的代码都复制上去(自行去掉.git) 进入后台插件列表,启用插件。enjoy

(题外话:Highlight的方案,因为语言众多,我只选择了我自己用的几种语言,这样打包出来的js文件会比较小,如果你有其他语言需求,直接上官网下载自定义的语言列表
官网下载链接,官网会帮你打包出来,直接替换到插件目录即可。)

5.下载

插件目前开源到了GitHub仓库上,自取。点击这里访问


本文作者:小蚊子
本文链接:[Typecho] 代码高亮插件 TypechoHighlight - https://djc8.cn/archives/typecho-code-highlighting-plugin-typechohighlight.html
版权声明: 知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

标签: 插件, typecho, highlight, 高亮

添加新评论