wordpress使用prism高亮渲染代码

一直很喜欢CSDN上面的代码模块,既可以设置代码的语言,代码的渲染也做的非常漂亮,就想着能不能在wordpress上面使用,这里我就把我设置wordpress代码渲染的经验过程详细写下来。

声明一下,CSDN代码高亮模块并不是由于编辑器的问题,一开始还弄个markdown的编辑器。。。而是prism(查看csdn文章源码之后才发现。0-0),这是一个轻型的代码高亮模块,可以方便的高亮文章中的代码,基本上常见的语言都是支持的。废话不多说,直接进入wordpress如何使用prism高亮代码环节。

1.安装Prismatic插件

wordpress安装插件很简单,直接在后台插件模块添加新插件搜索Prismatic就可以找到了(我使用的这款,你们也可以看看其他的,适用方法可能不一样),下载激活便是。

《wordpress使用prism高亮渲染代码》

2.使用Prismatic插件高亮代码

其实最坑的是这一步,一开始完全不知道这个咋用。要使用代码高亮功能,当你在写博客需要添加代码的时候,添加自定义的html块(custom-html block),然后在代码块里面加上这段代码

<pre><code class=”language-python”>代码部分</code></pre>

其中python可以修改为任意你自己的代码语言名称,然后在代码部分粘贴上代码就可以了。下面给出一个详细的实例,比如我要写一个bash命令yum update -y并且高亮的话,首先

《wordpress使用prism高亮渲染代码》

添加block(块),并且选择custom HTML(自定义html),然后写上如下代码

《wordpress使用prism高亮渲染代码》

点击发布之后就可以看到如下的代码高亮效果了


yum update -y

这里已经在wordpress里面做出来了代码高亮的效果,但是还是跟csdn的不一样,不过已经挺满意了。不一样的原因应该是css的问题,后续如果有把css样式也采用了话,再来更新吧。再次强调,代码高亮跟编辑器类型没有半毛钱关系。

点赞