代码高亮目前来说应该是一个博客必备的功能了,对于码农来说,免不了要在自己的博客里发布代码,对于博客爱好者来说,初期的博主都是在不断折腾中进步的,各种学习笔记基本上就是自己代码的备忘了。最近把博客程序换成了typecho,安装代码插件时发现不是因为没有更新无法使用,就是插件的体积非常大,代码高亮插件的原理基本上都是通过指定或判断代码语言,然后调用相应的JS和CSS文件进行着色的,因为插件支持十几甚至几十种语言,所以免不了体积比较大,而对于我来说,常用的语言非常少,比如html,css,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文件,只保留你需要高亮的语言和插件,从而很好的控制文件的大小。

  2、容易用
  Prism使用只需要在页面的合适位置引用prism.cssprism.js,支持HTML5和Markdown。

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

  如何使用Prism:

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

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

<link href="themes/prism.css" rel="stylesheet" />
<script src="prism.js"></script>

  3、调用着色
  在需要代码高亮时使用下述代码

<pre><code class="language-css"> body{background-color:yellow;} </code></pre>

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

  如果你使用的是Markdown编辑器,且定制时勾选了Markdown支持,你也可以这样

        ```css
           body{background-color:yellow;}
        ```

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

最后修改:2024 年 03 月 02 日
如果觉得我的文章对你有用,请随意赞赏