prism-autoloader-plus：可自定义程度更高的 Prism 高亮 Loader

瞎折腾 0 Comments

这个：https://github.com/immccn123/prism-autoloader-plus

主要是因为最近给 doxygen 写了一版代码高亮逻辑，然后发现官方提供的 Autoloader 最致命的是，没有办法做到「懒加载」。

于是就在原版 Autoloader 基础上改了一个可以添加更多配置的。

不过就是与原版 Autoloader 不兼容，但是问题不大！反正都是从原版改的。

bundle 里面有一点 ES6 语法，如果你需要支持旧版浏览器的话说出来就好的，我改就行了（主要是咱也懒得给旧版浏览器做支持

特性

其实就是加了更多的配置项啦。

你可以自定义：

  1. Prism 语言脚本加载的路径
  2. 语言依赖（因为部分语言是从像 clike 这样的中间语言继承的）
  3. 语言链接

使用方法

引入脚本：

<script src="prism-autoloader-plus.min.js"></script>
<!-- or use CDN -->
<script src="https://cdn.jsdelivr.net/npm/@immccn123/prism-autoloa[email protected]/prism-autoloader-plus.min.js"></script>

然后配置：

<script>
  Prism.plugins.autoloader.languages_path =
    "https://unpkg.com/[email protected]/components/"; // trailing slash is required
  // Addtional
  Prism.plugins.autoloader.lang_dependencies = {
    doxycpp: "cpp",
    "language-string": ["multiple", "dependencies"],
  };
  // Addtional
  Prism.plugins.autoloader.lang_urls = {
    doxycpp:
      "//fastly.jsdelivr.net/npm/prism-cpp-doxygen/prism-cpp-doxygen.min.js",
  };
</script>

请务必确认引入插件脚本的时候没有使用 async，否则会导致插件加载顺序错乱 qaq

这样子的话，就大功告成啦！

我站也在用，但是好像因为 LiteSpeed 插件的问题可能会看不到脚本的加载，不过没关系啦 qaq

还有，因为 bundle size 比原生的要大一点，所以如果你没有相关的配置需求还是建议用原版的～（但其实 gzip 之后差别应该也没有那么大的）