README

作为自定义块和 KirbyText 提供的 Server-side 代码高亮

基于 highlight.php 构建，而 highlight.php 又是 highlight.js 的一个端口。

主要特性

🏗 与 Kirby 的 code 块一起工作
🏳️‍🌈 支持 189 种语言
💫 提供 94 种样式
⛳️ 自动检测 KirbyText 的语言

要求

Kirby 3.8+

安装

Composer

composer require johannschopplich/kirby-highlighter

下载

下载并将此存储库复制到 /site/plugins/kirby-highlighter。

使用方法

使用 Kirby Blocks 字段

此插件覆盖了 Kirby 的内部 code 块。因此，您无需做任何更改。

像以前一样使用 code 块，输出将自动高亮显示

fields:
    example:
        label: Paste code here
        type: blocks
        fieldsets:
            - code

在 KirbyText 中

在您的 KirbyText 字段中创建一个代码块，并可选地设置代码语言

```css
.currentColor {
  color: currentColor;
}
```

或使用此插件中的新 code-KirbyTag，并用 base64 编码的代码字符串

(code: LmN1cnJlbnRDb2xvciB7CiAgY29sb3I6IGN1cnJlbnRDb2xvcjsKfQ== lang: css)

输出如下

<pre class="hljs"><code><span class="hljs-selector-class">.currentColor</span> {
    <span class="hljs-attribute">color</span>: currentColor;
}</code></pre>

语法高亮功能可以进行更改。您可以选择两种高亮模式之一

显式模式（默认）
自动语言检测模式（可选）

显式模式

在显式模式下，您必须定义代码块的语言。否则将跳过高亮显示。

自动语言检测

或者，您可以使用自动检测模式，该模式将使用库认为最佳的语言来高亮显示您的代码。强烈建议您显式选择语言或限制自动检测的语言数量。这减少了错误和不必要的低效选择过程。

要启用自动语言检测，请将

johannschopplich.highlighter.autodetect 设置为 true
johannschopplich.highlighter.languages 设置为应从中选择的语言名称数组

选项

前端样式

由于此插件仅处理代码高亮，因此您必须自己在前端链接样式。我建议直接从 highlight.js 项目中选择一个可用的主题：highlight.js/src/styles/

存储库中的 CSS 文件得到维护，并且不时会添加新主题，因此在此存储库中包含副本将是多余的。

我最喜欢的主题之一是 Night Owl by Sarah Drasner。例如，您可以下载 CSS 文件并将其保存到您的 Kirby 项目中，文件名为 assets/css/hljs-night-owl.css。现在您只需将其包含在您的模板中 <?= css('assets/css/hljs-night-owl.css') ?>。或者，使用您选择的 CSS 打包器。

行号

如果您选择激活行号功能，则需要包含额外的CSS样式以显示行号。

使用伪元素的基本示例

pre.hljs .hljs-code-line {
    counter-increment: line;
}

pre.hljs .hljs-code-line::before {
    content: counter(line);
    display: inline-block;
    margin-right: 1em;
    opacity: 0.5;
}

致谢

Geert Bergman及为出色的highlight.php端口做出的贡献。
Martin Folkers，他的Kirby Highlight插件构建了此包的基础。

johannschopplich / kirby-highlighter

维护者

详情