wordpress使用markdown时采用prism进行代码高亮

背景

最近将博客的文章编辑器切换为markdown了,但是发现wordpress主题自带的css无法实现代码高亮,作为强迫症看着非常不舒服,遂想尽方法实现在markdown中实现代码高亮。

1.使用markdown编辑器

首先,你需要将wordpress自带的文章编辑器切换为markdown,这里需要安装markdown插件,几经对比,选择了WP Editor.md插件,一款可以实时预览的markdown编辑器,具体有哪些优点可以详细阅读插件说明。
插件截图:
https://www.shangyexin.com/wp-content/uploads/2018/04/wp_editor.png

最主要的是该插件代码高亮就是使用的prism,所以在编辑阶段的代码会自动使用prism的语法,不需要额外设置。不信你可以查看你文章的html源码,会有下面的语法:

<pre class="language-c"><code class="language-c">  code_here </code></pre>

代码高亮选项的开关在插件的设置,**“语法高亮选项-支持Prism语法高亮”**中开启。

2.去prism官网下载自己专属的css和js文件

下载地址:http://prismjs.com/download.html
选择你常用的语言和配置,点击DOWNLOAD JSDOWNLOAD CSS下载css和js文件,也就是prism.js和prism.css文件。

3.修改wordpress主题

进入主题对应的文件夹,创建prism文件夹,将prism.js和prism.css文件放入该文件夹

修改funcations.php文件,其中的自定义路径就是prism.js和prism.css文件的存放路径

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . 'prism/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . 'prism/prism.js'   //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');
4.Enjoy

好了,这时候你再刷新你的文章,你就会发现已经实现代码高亮了,就是这么简单!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值