远方的海
远方的海,WordPress,免费
2015 Sep 28 23 : 10

用Prismjs实现wordpress,ghost等的代码高亮(非插件)

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

Prismjs是一款代码高亮插件,Prismjs以其超级简洁轻便的代码完成了相当完美的代码高亮效果。JS之父Brendan Eich在他的个人博客里也使用了Prismjs来实现代码高亮。

Prismjs就是这么一款潮流时尚简单的拓展包,想要加上这种代码高亮就和Sven一起来看看。

Prismjs的高亮效果

语言没有图片有说服力,我们来看看prismjs的代码高亮效果。以我们熟悉的javascript代码为例,代码高亮效果如下:

用Prismjs实现wordpress,ghost等的代码高亮(非插件)

简直惊艳,简洁不花哨,有国际范。其实除了这款效果之外,Prismjs还提供了四款别的效果,比如很多人喜欢的这种黑色背景的代码高亮效果等:

用Prismjs实现wordpress,ghost等的代码高亮(非插件)

如果你想自己体验一下做好了版的效果,虽然远方的海没有设置高亮,但是大家可以查看我个人博客的代码高亮测试:这里用的是CSS高亮点击查看效果。(远方的海现在也开启了Prismjs高亮效果)

当然只支持js、css的代码高亮简直就是耍流氓,这款小工具支持了500多种代码高亮

Prismjs高亮代码下载

既然这么好用,那么代码包一定很大咯?一般的代码高亮动辄几百kb是有的。

用Prismjs实现wordpress,ghost等的代码高亮(非插件)

但是Prismjs的代码高亮只有不到10kb!轻如蝉翼,薄如纤纸。

点击前往下载页面:点击前往。下载的步骤也很简单,我们一起看:

  1. 选择Minified version,这个也就是压缩过的,体积更少。
  2. 选择Core,这个必须要选的。
  3. 选择自己喜欢的主题,这里Sven最喜欢的就是默认主题,所以就直接选择了default
  4. 选择你需要的语言环境,这个不需要多说了,几百个里面总可以找到你喜欢和你需要的。

选择完之后,点击下载就行了。或者直接复制也没有问题。

安装代码

代码已经获得了,现在我们要把这个代码放入wordpress主题里面。步骤如下:

一、直接引用代码

方案1:这个JS代码可以直接放在随主题加载的.js文件中即可,CSS代码也可以直接放到主题的style.css里面。

二、多一次请求引用代码

方案2:也可以把下载的文件放入当前主题文件夹中,如下多加载一次请求,这个看个人喜好了:

	...
	<link href="prism.css的地址" rel="stylesheet" />
	<script src="prism.js的地址"></script>

需要注意的是,为了代码高亮效果不重叠,请把原先主题中的pre和code的样式去掉!

使用高亮

高亮的调用格式如下,比如css代码:(language后面放入代码的语言,比如css,php,javascript等等)

<pre><code class="language-css">here insert your code.</code></pre>

快捷自动写格式

把下面的代码放入主题的functions.php中,就可以加入一个大块代码的标签,编辑的时候可以自动插入调用prismjs的语句。一按下大块代码就OK了。

///////////ShortCodes from seavia///////////
function seavia_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'insert-code', '大块代码', '<pre class="line-numbers"><code class="language-markup">','</code></pre>');
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'seavia_add_quicktags' );

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端
上一篇:

您可能也会喜欢

发表回复

Post Comment


  1. Scott Ju :

    http://www.mrju.cn/2224.html 帮我看看是怎么了,css js markup?css 和 js有反应,markup没什么效果。

    2016-5-24
  2. Scott Ju :

    为什么的我的只能显示css的,遇到js代码和html代码都不起效了。js代码直接空白,html代码里的标签都显示,只显示标签包住的内容。

    2016-5-24