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

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

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

起始

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

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

使用方法

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

第 2 步:文件夹名改为 CodeHighlighter

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

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

代码写法

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

高亮效果图

代码高亮.png

重要说明

可设置项

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

如有需要,请勾选需要支持的语言定制您的 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

主页:http://www.copterfly.cn/

有问题请留言交流。

(完)

标签: none

已有 15 条评论

  1. 你好博主,请问一下为什么我在使用CodeHighlighter插件高亮代码时无法显示行号呢?
    后台已经勾选显示行号。问题路径:http://www.funly.cn/12-12.html

    1. 已经好了。谢谢

      1. 哦哦,那就好。加油!不好意思,才看到。

  2. qiusnay qiusnay

    你好,我的typecho插件有两个,一个是Markdown编辑器叫EditorMD,另一个就是你本文所说的这个,而那个EditorMD插件设置里面有一个选项 “接管前台Markdown解析”,这个一勾选,那么html源码就不会解析成这种形式了,而是 '''php ,这样的话,prismjs就识别不出来,进而就显示不了行号。
    var pres = document.querySelectorAll('pre');console.log(pres)
    他是读取源代码中的pre标签来显示行号的。
    可是如果我那边不勾选“接管前台Markdown解析”的话,那么代码高亮是能出来了,行号也有了。可是其他markdown语法的就解析不出来了。求解

  3. qiusnay qiusnay

    我的QQ : 2799345551 ,急求回复

  4. 你好,我这边不显示行号怎么办。。。
    路径:https://blog.oceanickang.com/2018/08/19/167.html

  5. 顾白 顾白

    你好 我激活了没效果是怎么回事?

    1. 1 1

      应该要写```而不是'''

  6. 您好,为什么不能显示行数

  7. 你好,为什么我激活之后,写代码还是原来的样式?我已经按照文档的写法写代码了。如下:
    ```javascript (语言类型必填)
    // codes go here
    ```

    然后当前的样式为:http://i.tinso.cn/zh/11.html
    你可以访问一下看那一下效果

  8. zd zd

    全站pajx后,高亮无效,大佬,请问应该怎样写重载函数?

    1. 到我博客看我的说说说明,pjax蛮多问题!舍与得…自己考虑!

    2. 回调已经写好了!

  9. 我的开启了行号,但是行号都不显示,感觉和背景都何为黑色的了

  10. 博主是否可以弄个,行数(代码块前面的行数123456789....)是否滚动的选择?没人喜欢的话,我自己改css固定行数也行!

添加新评论