Skip to main content

主题指南

概述​

Highlight.js 主题与语言无关。我们没有试图让一 组丰富的可高亮显示的类在少数几种语言中看起来很棒，我们有一组有限的类可以很好地适用于许多语言。

因此，有两个重要的含义：

  • Highlight.js 主题往往是极简主义的（随着时间的推移，这已经得到改善）。
  • 并非总是可以完全模仿其他高亮显示引擎的主题。

主题定义​

主题是为范围参考中列出的范围定义样式的单个 CSS 文件 。一般准则是设置核心/通用类的样式，但是作者可能会故意选择排除一些（例如，.attr通常不设置样式）。使用我们的 自动检查工具为此提供更多指导。

您不需要为每组类名发明单独的样式，将它们分组是完全可以的：

.hljs-string,
.hljs-section,
.hljs-selector-class,
.hljs-template-variable,
.hljs-deletion {
  color: #800;
}

使用尽可能少或尽可能多的独特风格组合。

自动检查​

我们提供了一个工具来自动检查您的主题，以查看它是否提供了良好的范围覆盖。

./tools/checkTheme.js src/styles/your_theme.css

按照提供的简单指导解决任何问题。

注意事项​

不要使用：

  • 根容器的非标准边框/边距/填充.hljs
  • 特定字体
  • 字体大小、行高以及影响容器内字符位置和大小的任何内容

可以使用：

  • 颜色
  • 斜体、粗体、下划线等
  • 图像背景

这些乍一看似乎是武断的，但在实践中证明是有意义的。

还有一组必须为根容器逐字定义的通用规则：

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
}

如果您的主题位于核心项目中，则无需手动添加这些规则，因为它们是在构建过程中默认添加的。

.subst​

一个重要的警告：不要忘记样式.subst。它用于字符串中的解析部分，几乎总是应该重置为默认颜色：

.hljs,
.hljs-subst {
  color: black;
}