许多博客网站都使用 highlight.js 高亮代码,但是可能有时需要用到特定的未自带的语言。本文以 Typecho 为例,叙述一种动态引入思路。
官方页面提到,可以使用下面的方法引入特定语言的高亮模块。但是有些语言可能仅在特定文章中引入,如果一并在 header.php 中引入会造成不必要的流量浪费。
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>我们可以利用 Typecho 的自定义字段功能。可以在需要特殊语言高亮的文章页插入特定语言的样式。将下面的片段插入到 <head> 中即可。
<?php
$highlightTheme = $this->fields->AddHighlight;
if ($highlightTheme !== null && $highlightTheme !== '') {
$languages = array_map('trim', explode(',', $highlightTheme));
foreach ($languages as $lang) {
if (!empty($lang)) {
echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/'. $lang .'.min.js"></script>';
}
}
}
?>这样在自定义字段中添加相应的语言名即可。
| # | 字段名称 | 类型 | 字段值 |
|---|---|---|---|
| 单语言示例 | AddHighlight | 字符 | nginx |
| 多语言示例 | AddHighlight | 字符 | nginx, shell |
单语言示例输出:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/nginx.min.js"></script>