有朋自远方来,不亦乐乎。
纯代码部署prism代码高亮
原创 橘子书  发布于 1年前 ( 2017-07-16 ) 阅读: 4,683 次 评论: 29 条 A+

昨天抽空,将Leo主题所使用的,升级到了最新版本。

港真的,单单以代码高亮来讲,我个人十分推荐使用它,因为prism.js是一个轻量、可扩展的代码语法高亮库。

prism

至于集合到主题的方法,其实也很简单,只需引入prism.js与prism.css两个文件即可。具体方法如下:

一、下载prism所需的js与css文件

直接到prism官网,按需下载即可。

下载须知

因为prism.js是可定制的拓展高亮库,所以里面的选择项很多,再加上都是英文,因此需要用户按需勾选。

1.Themes:代码高亮风格选择,有7种皮肤可供选择;

2.Languages:按需添加所需要的代码语言,比如我只用到php、js、css、SQL而已,所以只需要勾选它们即可;

3.Plugins:辅助插件,比如显示行号、显示代码语言名称,以及复制copy代码(此次之所以升级最新版本,就是因为它开始支持点击copy了)

二、部署js与css文件

将下载到的js与css文件放进主题目录,然后分别在header与footer文件当中引入prism,大概位置请参照如下代码:

<html>
<head>
	...
	<link href="具体的prism.css路径" rel="stylesheet" /><!--header.php-->
</head>
<body>
	...
	<script src="具体的prism.js路径"></script>//<!--footer.php-->
</body>
</html>

三、使用方法

跟平时使用代码高亮插件一样,直接用【预格式化】块。例如:

<pre><code class="language-php">代码内容</code></pre>

代码高亮功能的部署到此结束。

1 2下一页
Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:29   其中:访客  20   博主  9

发表评论

莫慌,小狮子正在努力加载评论...
  1. 狂放
    狂放1 ( 2017.11.03 22:38:28 )  9楼

    为什么插入没有用

  2. 明月登楼
    明月登楼3 ( 2017.07.21 15:26:58 )  8楼

    换用360主机卫士了!特来秀一下!

  3. 闲鱼
    闲鱼2 ( 2017.07.18 22:54:02 )  7楼

    这个很好,值得收藏,可能是自带的转换高亮把我养懒了,不准备折腾这个,哈哈

  4. Koolight
    Koolight2 ( 2017.07.18 22:49:24 )  6楼

    手动也比较麻烦啊!