首页 > 网站 > CMS建站 > 正文

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

2020-03-22 19:31:50
字体:
来源:转载
供稿:网友

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

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

1.使用markdown编辑器

首先,你需要将wordpress自带的文章编辑器切换为markdown,这里需要安装markdown插件,几经对比,选择了WP Editor.md插件,一款可以实时预览的markdown编辑器,具体有哪些优点可以详细阅读插件说明。
插件截图:
http://img.VeVb.com/upload/article/000/000/009/2407cf508da36961786cf9d10206ab0a-0.png

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

 pre >

代码高亮选项的开关在插件的设置,“语法高亮选项-支持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(  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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP !

相关推荐:

WordPress 之在注册界面 实现 注册后密码直接显示在页面上

使用PHPstudy在Windows服务器下部署PHP系统

以上就是如何在wordpress中使用markdown时采用prism将代码调亮的详细内容,PHP教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选