博客优化

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

publish-date 2024-07-04
update-date 2024-11-18
# WordPress

写在前面

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

准备工作

  1. 打开Highlight.js的官方网站 highlightjs.org
  2. 点导航栏里的Download进入自定义下载页面
  3. 选择好后，点击右侧绿色Download按钮
  4. 保存到本地，解压后挑选需要的文件，复制到WordPress的子主题目录：
    wp-content/themes/{your-child-theme}
  5. 我挑选了github-dark.css和highlight.min.js，改成你自己的
  6. 打开functions.php，将更改后的代码粘贴到最后
function load_highlight() {
    wp_enqueue_style( 'highlightcss', get_stylesheet_directory_uri() . '/github-dark.css' );
    wp_enqueue_script( 'highlightjs', get_stylesheet_directory_uri() . '/highlight.min.js');
    wp_add_inline_script( 'highlightjs', 'hljs.highlightAll();' );
    }
add_action( 'wp_enqueue_scripts', 'load_highlight' );

开始使用

  1. 键入/code回车，插入代码区块
  2. 输入或粘贴代码
  3. 更新文章，前端即可显示了