WP使用Prism.js高亮代码

一、安装

https://prismjs.com/ 下载prism.js

把prism.js和prism.css保存在网站根目录/library文件夹下

访问网站根目录/usr/themes/主题名文件夹

打开footer.php

添加这两段代码:

<link rel="stylesheet" type="text/css" href="/library/prism.css" />
<script type="text/javascript" src="/library/prism.js"></script>

添加到这里

至此,Prism.js插件就安装完成啦!

二、如何使用

首先,在#文章编辑页面#点击这种地方:

点它!

然后输如任意字符会出现一个工具栏

点击右面的三个点,选择作为HTML编辑

现在,你应该会看见这样的一个界面:

就是这样

把你要展示的代码输入/粘贴(zhān tiē)进里面

屑代码

在代码前添加下面的文本:

<pre>
    <code class="language-代码类型">
        <!--这里填你的代码-->
    </code>
</pre>

效果:

function HelloWorld(){
    alert("Hello World!");
}

TAG:wordpress, prism.js, 代码高亮

发表新评论