如何在wordpress中使用markdown时采用prism将代码调亮-tutorial php-php.cn

如何在wordpress中使用markdown时采用prism将代码调亮

不言

Lepaskan： 2023-04-02 22:40:02

asal

2849 orang telah melayarinya

这篇文章主要介绍了关于wordpress使用markdown时采用prism进行代码高亮，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

1.使用markdown编辑器

首先，你需要将wordpress自带的文章编辑器切换为markdown，这里需要安装markdown插件，几经对比，选择了WP Editor.md插件，一款可以实时预览的markdown编辑器，具体有哪些优点可以详细阅读插件说明。
插件截图：

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

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

Salin selepas log masuk

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

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

下载地址：http://prismjs.com/download.htm
选择你常用的语言和配置，点击DOWNLOAD JS和DOWNLOAD 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(            
&#39;prismCSS&#39;, 
            get_stylesheet_directory_uri() . &#39;prism/prism.css&#39; //自定义路径
         );          
wp_register_script(            
&#39;prismJS&#39;,            
get_stylesheet_directory_uri() . &#39;prism/prism.js&#39;   //自定义路径
         );        
wp_enqueue_style(&#39;prismCSS&#39;);        
wp_enqueue_script(&#39;prismJS&#39;);
    }
add_action(&#39;wp_enqueue_scripts&#39;, &#39;add_prism&#39;);

Salin selepas log masuk