香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播

在WordPress中使用轻量级代码高亮Prism.js

在网上找了很久很久的代码高亮的插件,没有一个满意的,包括这个Prism.js,我可能有强迫症吧。我对代码高亮只有三个要求,一是可以一键复制,二是轻量级,三是手机端显示友好。而在我使用了十多个代码高亮插件以后,发现所有的都对手机端非常不友好。经过长达半年的纠结后,我想明白了一个道理:

能用代码的人是不会用手机编辑的。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播于是释然了,突然就发现Prism.js是全世界最好的代码高亮插件了。虽然一直说插件,但Prism.js并不是插件,默认情况下载只有10K左右的代码,现在我把在WordPress中使用轻量级Prism.js代码高亮教程写一篇,当然最主要的还是我自己看。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播非常简单,简单到这个教程我都可以不用配图。

1,首先进入官网prismjs.com,直接点击下载,进入到下载页面。然后选择核心代码(必选)、主题颜色(旁边有个圆圈预览)、语法包(选择自己想要的,比如我主要是是PHP和CSS),插件(我用了复制功能)。

2,看不懂英语的话,利用浏览器的一件翻译功能翻译成汉字就好了。

3,选择好后,直接点下面的下载,两个文件,一个是下载JS,一个是下载CSS。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播4,把下载好的JS和CSS,上传到你网站的根目录(其实想上传到哪里都可以,但我个人建议上传到网站根目录,简单方便)。

5,在当前主题的header.php里的<head>后面插入<link href=”prism.css” rel=”stylesheet” />

6,在当前主题的footer.php里的</body>前面插入<script src=”prism.js”></script>

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播7,完成,开始在前端展现。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播Prism.js代码高亮安装好了,但是怎么用呢,在文本模式下,插入代码

<pre class=”line-numbers”><code class=”language-css”>你的代码</code></pre>

解释:language-css是语言为CSS的意思。line-numbers是显示行数的意思,前提是要选择了显示行数的插件。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播是不是每次都要插入这个代码呢,是的,非常的烦,所以,可以在编辑器里面加一个快截按钮,但我认为没啥必要,既然你都要贴代码了,还在乎多敲那么几个字母吗,到是解决html代码被转移的问题更为重要。

香港最快开奖结果直播现场-香港最快开奖结果直播 香港最快-香港最快开奖现场直播结果118-香港最快开马现场直播根据Prism.js官方给的教程,其实也很简单,简单到我是没看懂。

评论0

请先

没有账号? 忘记密码?