WordPress无插件实现代码高亮

WordPress的代码高亮有很多基于WordPress的插件,效果都大同小异,其实也没有必要装太多插件。这里使用了比较简单的方法实现代码高亮。

首先,代码都写在pre code代码块中

首先,代码需要写在pre标签 code标签中。这个要规范,不然鬼知道你的代码在哪里,给谁着色。

因为我用的markdown离线编辑器,所以不需要这样配置,发现有朋友代码包裹有点麻烦。我记录一下。

使用古腾堡编辑器的

直接插入代码块把需要包裹的代码放进去,然后右侧高级,额外的css类加上一个language-html,替换html为你需要着色的语言名称,css/js/python

使用经典编辑器的

点击编辑器的文本模式,进入代码模式,用代码把元素包裹

<pre class=" language-html"> <!-- class里是语言的类型,比如language-html -->
    <code class=" language-html">
        代码放在这里
        
    </code>
</pre>

然后,引入js文件和css文件

大部分wp代码着色软件都是用的prismjs进行的渲染,这里只需要把对应的css文件和js文件引入系统就可以了。

第一步:定制代码着色样式

可以去prismjs定制自己代码着色样式,勾选好下载即可,需要下载cssjs两个文件。

  • 显示样式
  • 支持语言

第二步:在模板文件中引入css和js文件

上传css和js文件到
这里以autumn pro主题为示例,

  • 上传css和js文件到wp-content/themes/Autumn-Pro/static的css文件夹,和js文件夹。
  • 进入wp-content/themes/Autumn-Pro/header.php 插入代码引用
<link rel="stylesheet" href="https://www.dajimao.cn/wp-content/themes/Autumn-Pro/static/css/prism.css">
<script src="https://www.dajimao.cn/wp-content/themes/Autumn-Pro/static/js/prism.js"></script>

注意修改自己的css和js文件路径,替换好自己的网址

刷新搞定!

补充

这里引入静态文件的方法比较简单,不是很好,但胜在简单易理解。也可以修改为别的函数注册的方式,不过不推荐新手操作。

大吉猫

记录自己使用过的软件,学习过的资料,还有可能对大家有用的东西

相关推荐

加强WordPress会员安全

安装WPJAM插件及扩展插件会员管理,进入后台-用户,用户设置 功能都很实用,也提高了安全性, 屏蔽了用户后台的 …

暂无评论

微信扫一扫,分享到朋友圈

WordPress无插件实现代码高亮