代码高亮现在来说应当是一个博客必备的功能了,对于码农来说,免不了要在自己的博客里公布代码,对于博客爱好者来说,初期的博主都是在不断忙活中进步的,各种学习笔记基本上就是自己代码的备忘了。最近把博客程序换成了typecho,安装代码插件时发觉不是由于没有更新难以使用,就是插件的容积特别大,代码高亮插件的原理基本上都是通过指定或判别代码语言,然后读取相应的JS跟CSS文件进行着色的,因为插件支持十几并且几十种语言,所以免不了容积比较大,而对于我来说,常用的语言十分少,比如html,csstypecho 代码高亮,php等因此希望可以追寻至一种可以定做显示高亮语言的插件。

  另一方面,由于typecho的编辑器原生支持Markdown句型,所以假如能找到一个支持Markdown的语法高亮插件那就更好了,非常幸运的是,我找到了Prism,官方是这么介绍的:

  Prism is a lightweight, extensible syntax highlighter, built with

  modern web standards in mind. It’s used in thousands of websites,

  including some of those you visit daily.

  大意为:Prism是一个羽量级、可扩充的语法高亮显示方案,基于现代Web标准构建。它被应用于数以千计的网页上,包括一些你一直访问的。

  Prism的优势:

  1、可定制

  Prism可以按照你的还要来订制js跟css文件,只保留你还要高亮的语言跟插件typecho 代码高亮,从而挺好的控制文件的大小。

  2、容易用

  Prism使用只须要在页面的合适位置引用prism.css跟prism.js,支持HTML5跟Markdown。

  3、样式多

  Prism有多种代码着色方案,例如Twilight、Solarized 、Dark等。

  如何使用Prism:

  1、定制Prism,下载prism.css跟prism.js文件,如果你不清楚订制选项的用途,你也可以选择Prism的完整版下载。

  定制跟下载地址

  2、引用prism.css跟prism.js,你可以在主题的合适位置加入下边的代码

  

  3、调用着色

  在须要代码高亮时使用下列代码

  <pre> body{background-color:yellow;}

  上面是个高亮CSS代码的实例,如果是其它代码,比如PHP,只需将里面的language-css替换成language-php即可。

  如果你使用的是Markdown编辑器,且订制时钩选了Markdown支持,你也可以这么

  `css

  body{background-color:yellow;}

  `

  赶紧试试给自己的博客添加prism语法高亮吧,查看 更多官方样例 或者 在线试用

Last modification:December 23rd, 2020 at 06:20 am
如果觉得我的文章对你有用,请随意赞赏