在 WordPress 上使用 highlight.js

我一直在寻找一个可以替代我在博客上使用的语法高亮器的软件，因为SyntaxHighlighter Evolved从来没有真正让我满意过（代码块旁边有不必要的广告，样式很差）。

我想要一个轻量级的解决方案，然后找到了highlight.js。它可以在客户端突出显示代码块，只需几行即可启用：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

曾经遇到过有一个插件可以将其集成到 WordPress，但出于安全原因已被删除（我不确定这意味着什么）。

这其实并不重要；因为安装这个库非常简单，所以我决定自己写一个插件。它和你想象的一样简单，因为它只添加了上面显示的三行代码。它会加载最新版本的库和来自 jsdelivr 的 CSS 文件。

要从 Gutenberg 创建代码块，只需以三个反引号开始一个新段落：“`，然后将代码粘贴到其中。

插件存储库在这里，但是该插件非常简单，我可以将代码粘贴在这里：

<?php
/**
 * Plugin Name: HighlightJS WP
 * Plugin URI: https://github.com/AdrienPoupa/HighlightJS-WP
 * Description: HighlightJS WordPress Integration
 * Version: 1.0.0
 * Author: Adrien Poupa
 * Author URI: https://adrien.poupa.net
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

 // Prevent direct access

if ( ! defined( 'WPINC' ) ) {
  die;
}

add_action( 'wp_enqueue_scripts', 'hjswp_enqueue_wphighlightjs' );

/**
 * Load HighlightJS
 */

function hjswp_enqueue_wphighlightjs() {

  // Enable the plugin only for singular posts

  if ( ! is_singular() ) {
    return;
  }

  wp_enqueue_style( 'highlightjs-css', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css' );
  wp_enqueue_script( 'highlightjs', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js', '', 'latest', true );
  wp_add_inline_script( 'highlightjs', 'hljs.initHighlightingOnLoad();' );
}

如果您希望加载特定版本的highlight.js或者想要使用不同的主题，您可能需要修改它。

我尝试将其发布到 WordPress.org，但显然我不能，因为他们“不再接受框架、样板和库作为独立插件”。哦，算了，就从这里获取吧