PS: 如果你最近在尝试这个功能,却发现上传prism.css和prism.js文件后,在主题的funtions.php中进行引用,无法生效(或者可能你弄不清楚那个路径到底用什么),那么可以试试下面的方法

  1. 访问Prism官网,点击“Download”,然后根据需要自行选择配置,配置好后在页面底部下载两个文件(prism.css 和 prism.js)。
  2. 上传两个文件到你当前的主题文件夹(我这里用的是Enfold,所以…)
  3. 更改前下载你的主题文件夹内的footer.php和header.php,这里是为了备份。以防你后面操作失败又不知道怎么改回来。
  4. 复制一份下载好的文件到别的文件夹,用 Notepad++ 进行编辑
<script src="/wp-content/themes/enfold/prism.js"></script>
  • footer.php 修改示例-供参考
<link href="/wp-content/themes/enfold/prism.css" rel="stylesheet" />
  • header.php 修改示例-供参考

请注意

  1. prism.css和prism.js上传到wp-content/themes/你目前在用的主题,例如我这里的/wp-content/themes/enfold,如果你用的主题是Avada,则是/wp-content/themes/avada
  2. 同理,上述两条语句,也需要根据目前使用的主题进行修改
  3. 如果更换主题,需要重复上面的步骤(把两个文件拷贝过去,然后修改该主题文件夹内的footer.php和header.php)

如何使用

发布post时切换到HTML编辑模式,然后将代码替换下面的中文位置

<pre><code class="language-php">
这里粘贴代码
</code></pre>

效果示例


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