WordPress基于Prism实现代码高亮功能

释放双眼,带上耳机,听听看~!

前面的文章有讲过使用Crayon Syntax Highlighter插件来实现代码高亮的功能,这个插件虽然很强大,但是又感觉不美观,今天来介绍一款基于Prism来实现代码高亮的功能,下面来开始演示。

Prism介绍

Prism是一个轻量级的、可扩展的语法高亮器,它是根据现代web标准构建的。成千上万的网站都在使用它,包括一些你每天访问的网站。
Prism非常的灵活方便,你可以自定义你想要的代码块风格来实现自己代码块的样式。
Prism官网:https://prismjs.com/

Prism下载

进入官网后点击DOWNLOAD,然后选择风格,Prism有两个版本,分别为开发版本和最小版本
1.我们先选择版本,然后选择代码风格

2.选择你的代码块所能支持的语言

3.选择你需要的插件内容,这里面有显示代码行号、显示语言,显示复制功能等。

4.选择完成后,把它生成的css和js文件全部下载下来

设置Prism

然后把这两个文件上传到wordpres主题的根目录下

上传完成后,编辑主题目录下的funcations.php文件,在末尾添加以下内容来引用我们放在主题根目录的prism.css及prism.js文件

function add_prism() {
        wp_register_style(
            'prismCSS',
            get_stylesheet_directory_uri() . '/prism.css'
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism.js'
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

这样就可以使用我们定义的代码块了,但是各位在文章内写代码的时候,一定要根据不同的语法来定义代码块的格式。
但是大多数大家都是使用markdown语法来撰写文章,markdown语法来定义代码块可以使用语言 xxxx来实现代码块内容,也可以根据相应的软件定义的功能来实现代码块。

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索