RiPlus添加代码高亮-非插件

去prism官网选择样式下载

地址:https://prismjs.com/

vs

进入主题设置

在主题设置——底部设置——网站底部自定义JS代码里添加下面内容:? prism.js地址:https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.js prism.css地址:https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.css prism.min.js地址:https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.min.js prism.min.css地址:https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.min.css

<link href="https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/Littlemyself/dome@1.0.1/prism.js"></script>

样式就和现在看到的代码框一样,有复制功能

file

还有一种方式

将下面的代码复制到主题的funcations.php中

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');
// 目录结构
|--rizhuti-v2    
    |--prism.css    
    |--prism.js    
    |--functions.php    

就这么简单实现代码高亮了。 第二步:编辑文章时,使用文本模式,输入下面的代码。

<pre class="language-"><code class="language-">  代码 </code></pre>
// language-后面添加高亮语言,例如:language-css

使用技巧

如果你想每行代码前带序号,只需要在<pre>标签中加class="line-numbers" 即可。

存在问题

在wordpress5.6.1里面古腾堡编辑器,直接复制markdown,代码高亮不会正常显示。好像5.6还是可以正常显示的。忘记了······ 如果不使用古腾堡编辑器而是和我一样使用的是markdown编写文章的那么就正常写就好了。

不想下载markdown插件,觉得插件臃肿,可以试试下面两种方式:

RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
HMAU » RiPlus添加代码高亮-非插件