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

插件开发及发布

版主: woniou

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

帖子Copter » 2018年 5月 2日 12:03

虽然N年前有人发过一个,但是没有复制代码功能不爽,于是自己也造了个轮子。

github开源地址(插件下载地址):https://github.com/Copterfly/CodeHighlighter-for-Typecho

起始

本插件是基于 prismjs 的 Typecho 代码语法高亮显示插件。(1.1版可用,其它版本请自行尝试)

可显示语言类型、行号,有复制代码功能。(请勿与其它同类插件同时启用,以免互相影响)

使用方法

第 1 步:下载本插件,放在 usr/plugins/ 目录中;

第 2 步:文件夹名改为 CodeHighlighter

第 3 步:登录管理后台,激活插件;

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

代码写法

```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. 是否在代码左侧显示行号 (默认开启)

在插件中不方便实现的设置项

由于 prismjs 与 highlightjs 的插件扩展机制不同,所以本插件的有些扩展项是无法设置的。

本插件支持常见的一些语言高亮。您可以打开以下链接查看详情:

http://prismjs.com/download.html#themes ... -clipboard

如有需要,请勾选需要支持的语言定制您的 js 和 css 文件,下载好后,分别替换以下文件:

Typecho 插件目录\CodeHighlighter\static\prism.js

Typecho 插件目录\CodeHighlighter\static\styles\改为对应的风格名.css (如跟您博客样式有冲突,稍作修改此 css 即可)

建议

插件 Plugins 最好至少勾选以下 4 项:

Line Numbers (在代码左侧显示行号)
Toolbar (代码块右上方工具条)
Show Language (显示代码是什么语言【依赖: Toolbar】)
Copy to Clipboard Button (复制代码功能【依赖: Toolbar】)

与我联系

作者:Copterfly
主页:https://www.copterfly.cn/

有问题请留言交流。
Copter
 
帖子: 25
注册: 2010年 3月 10日 08:52

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

帖子piaoyun » 2018年 5月 10日 10:48

谢谢了。正在寻找呢。不知道从wordpress转换过来的数据,之前的文章,是不是要全部重新编辑呢
piaoyun
 
帖子: 9
注册: 2018年 5月 9日 16:39

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

帖子Copter » 2018年 5月 10日 16:44

piaoyun 写道:谢谢了。正在寻找呢。不知道从wordpress转换过来的数据,之前的文章,是不是要全部重新编辑呢

不太清楚,好久没玩WP了。
不过,如果代码写法跟上面要求一样的话,是没有问题的。你可以自己先在本地转换测试一下。
Copter
 
帖子: 25
注册: 2010年 3月 10日 08:52

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

帖子weich » 2019年 1月 19日 16:23

piaoyun 写道:谢谢了。正在寻找呢。不知道从wordpress转换过来的数据,之前的文章,是不是要全部重新编辑呢

不用,我试了,除非你在WP用了特殊的语法,比如直接做的下载样式或密码保护内容之类的,你得从新弄吧!其它的不用,我试了评论,分类都全部跑过来!不过后来我没有拿数据直接扔了,从新用TY从头开始,丢掉以前的WP思维过一段时间就好了!
weich
 
帖子: 96
注册: 2018年 4月 6日 07:48

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

帖子weich » 2019年 1月 19日 16:25

楼上嘤嘤的,我都差点忘记我是来干嘛的了!我想和正搂猪说,插件拿走了,谢谢!被楼上嘤坏了,忘记说啥了!
weich
 
帖子: 96
注册: 2018年 4月 6日 07:48

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

帖子E语云博客 » 2019年 2月 25日 18:30

pjax重载怎么搞啊??
E语云博客
 
帖子: 8
注册: 2019年 2月 21日 14:08

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

帖子Xcnte » 2019年 2月 26日 15:33

E语云博客 写道:pjax重载怎么搞啊??

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
Xcnte
 
帖子: 3
注册: 2018年 6月 23日 19:24


回到 插件及扩展

在线用户

正在浏览此版面的用户:没有注册用户 和 3 位游客