WordPress使用Prism进行代码高亮

一直在寻找一个比较好看漂亮的代码高亮格式,最终对比发现Prism比较好用而且好看,就利用了这个工具。

1.Prism简介

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

引自Prism官网

Prism是一种轻量级,可扩展的语法高亮显示器,以现代网络标准为基础构建。它已在数千个网站中使用,包括您每天访问的一些网站。

Prism可以提供多种样式的代码高亮,支持非常多的语言,而且还可以使用一些扩展功能,例如显示行号,显示复制按钮,显示语言等,可以说是非常方便。

2.Prism下载

使用Prism需要将 prism.css和prism.js文件 包含在你需要的页面中。第一步需要现在Prism官网下载 prism.css和prism.js文件 。这两个文件是根据你的选择变化的,可以选择主题、选择语言、选择插件。

Prism下载链接: https://prismjs.com/download.html

3.Prism使用

根据自己的需要下载完成后,将得到的prism.css和prism.js文件放到你的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');

OK!在你的代码前面使用

,在代码最后加上 
即可。例如:

<pre><code class="language-python">  code_here code>pre>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇