Typecho highlight.js 动态添加语言支持

许多博客网站都使用 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>

添加新评论