延时の奇妙博客
屑延时的屑BLOG
首页
关于
WP使用Prism.js高亮代码
2020.09.20 |yanshiqwq | CSS, Javascript, WordPress, 网站, Web

一、安装

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!");
}
respond-post-158

添加新评论

请填写称呼
请填写合法的电子邮箱地址
请填写合法的网站地址
请填写内容