博客优化

WordPress怎么用Prism.js实现代码高亮？

publish-date 2024-07-03
update-date 2024-07-04
# WordPress

写在前面

本文仅涉及以自托管Prism.js的方式实现的代码高亮

准备工作

  1. 打开Prism.js的官方网站 prismjs.com
  2. 点右上角的DOWNLOAD进入自定义下载页面
  3. 选择好后，滚到最下面点击DOWNLOAD JS和DOWNLOAD CSS
  4. 保存路径为WordPress的子主题目录，wp-content/themes/{your-child-theme}
  5. 打开functions.php，将以下代码粘贴到最后
function load_prism() {
    wp_enqueue_style('prismcss', get_stylesheet_directory_uri() . '/prism.css');
    wp_enqueue_script('prismjs', get_stylesheet_directory_uri() . '/prism.js');
}
add_action('wp_enqueue_scripts', 'load_prism');

开始使用

以区块编辑器为例：

  1. 键入/code回车，插入代码区块
  2. 输入或粘贴代码进去
  3. 选中该代码区块
  4. 展开右侧栏的高级
  5. 在额外的 CSS 类下的metabox内输入lang-php（这里的php仅作示例，需替换为实际情况）
  6. 更新文章，前端即可显示了

我的选择

仅供参考，请根据自己的实际需求选择

Themes

Languages

Plugins