minihtml 参考
版本

Sublime Text 包含一个名为 minihtml 的自定义 HTML 和 CSS 引擎，用于在编辑器窗格中显示样式化内容。HTML 内容可以在弹出窗口和幻影中显示。

minihtml 提供了大多数 Web 浏览器中 HTML 和 CSS 功能的有限子集。虽然可能只实现了某些 CSS 和 HTML 功能，但它们旨在符合标准。任何实现的功能都应在 minihtml 中与浏览器中的功能相同。

HTML🔗

标签🔗

以下标签由默认样式表进行样式设置

  • <html>

  • <head>, <style>

  • <body>

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

  • <div>

  • <p>

  • <ul>, <ol>, <li>

  • <b>, <strong>

  • <i>, <em>

  • <u>

  • <big>, <small>

  • <a>

  • <code>, <var>, <tt>

对一些标签实现了特殊行为

  • <a> — 可以通过 API 指定回调来处理锚标签的点击。

  • <img> — 支持来自 file://、res:// 和 data: URL 的 PNG、JPG 和 GIF 图像。

  • <ul> — 为 <li> 标签显示项目符号。

其他具有特殊行为的 HTML 标签未实现。这包括 <input>、<button>、<table> 等标签。

属性🔗

支持以下属性

  • class — 用于 CSS 选择器

  • id — 用于 CSS 选择器

  • style — 内联 CSS

  • href — 基于回调的导航，协议 支持

    4073

  • title — 工具提示

    4085

协议🔗

在 HTML 表格、弹出窗口、注释和完成项详细信息中，<a> 标签的 href="" 属性自动支持三种协议

  • http: — 标准 URL，将使用系统默认浏览器打开

  • https: — 标准 URL，将使用系统默认浏览器打开

  • subl: — 命令名称和参数，用于调用命令

有效的 subl: URL 格式包括

  • subl:command_name

  • subl:command_name {"arg_name": arg_value, …}

对于弹出窗口和注释，可以通过 API 定义一个 on_navigate 回调，该回调将被调用用于除 subl: 协议之外的任何 URL。这种基于 API 的方法是 4073 版本之前处理 URL 的唯一方法。

4073

内联格式🔗

在补全项、快速面板项和列表输入项的详细信息字段中，支持 minihtml 的有限内联格式子集。这允许进行一些基本的文本格式化，并尊重用户选择的主题和配色方案。

支持的标签是

  • <a href=""> – 协议

  • <b>

  • <strong>

  • <i>

  • <em>

  • <u>

  • <tt>

  • <code>

4073

最佳实践🔗

为了允许配色方案作者调整弹出窗口和幻影的外观，最好在插件 HTML 的 <body> 标签中添加一个唯一的 id="" 属性。

在 <body> 标签中，添加一个 <style> 标签，其中包含不使用 id 的选择器。将此留给配色方案中的选择器，以便能够覆盖插件。

<body id="my-plugin-feature">
    <style>
        div.error {
            background-color: red;
            padding: 5px;
        }
    </style>
    <div class="error"></div>
</body>

预定义类🔗

当 minihtml 处理 HTML 标记时，它会自动向 <html> 标签添加一个类名。类名将是 dark 或 light，旨在允许在样式幻影和弹出窗口时更高级地使用 CSS。

添加哪个类取决于当前配色方案的背景颜色的亮度（在 HSL 颜色空间中）。如果亮度小于 0.5，则添加 dark。如果亮度大于或等于 0.5，则添加 light。

CSS🔗

以下列表概述了支持的属性和值

单位🔗

支持的测量单位包括

  • rem

  • em

  • px

  • pt

rem 单位是推荐的，因为它们基于用户的 font_size 设置，并且不会级联。

颜色🔗

颜色可以通过以下方式指定

  • 命名颜色: white, tan 等

  • 简写十六进制: #fff

  • 带透明度的简写十六进制: #fff8

  • 完整十六进制: #ffffff

  • 带透明度的完整十六进制: #ffffff80

  • RGB 函数式表示法: rgb(255, 255, 255)

  • RGBA 函数式表示法: rgba(255, 255, 255, 0.5)

  • HSL 函数式表示法: hsl(0, 100%, 100%)

  • HSLA 函数式表示法: hsla(0, 100%, 100%, 0.5)

  • HWB 函数式表示法: hwb(0, 20%, 20%), hwb(0, 20%, 20%, 0.5)

    3181

  • transparent

color() Mod 函数 (专有)🔗

此外，颜色值可以使用 CSS 颜色模块级别 4 (2016 年 7 月 5 日) color-mod 函数 进行修改，使用以下调整器。不幸的是，在 CSS 颜色模块级别 4 的后续草案中，color-mod 函数被移除了。

  • alpha()/a()

  • saturation()/s()

    3179

  • lightness()/l()

    3179

  • blend()

  • blenda()

  • min-contrast() (专有)

    3181
.error {
    background-color: color(var(--background) alpha(0.25));
}

.error {
    background-color: color(var(--background) blend(red 50%));
}

color-mod 函数与 变量 结合使用时最为有用。

min-contrast() 调整器🔗

min-contrast() 是 color() mod 函数的非标准添加，是 minihtml 的自定义功能。在实现时，CSS 颜色模块级别 4 规范有一个 contrast() 调整器，但它只允许获取颜色并修改它以提供与自身的对比度，而不是获取第二种颜色（通常是背景）并确保前景与背景具有足够的对比度。

min-contrast() 接受两个参数：一个用于测量对比度的背景颜色，以及“基础”颜色与背景颜色之间的最小对比度比。该比率将是一个十进制数，通常在 2.0 和 4.5 之间。

.error {
    background-color: color(var(--redish) min-contrast(var(--background) 2.5));
}

请参阅 contrast() 调整器 的文档，了解有关如何计算对比度比以及如何修改颜色以满足对比度比的详细信息。

变量🔗

CSS 变量也支持使用自定义属性和 var() 函数式表示法。自定义属性以 -- 开头。

html {
    --fg: #f00;
}
.error {
    background-color: var(--fg);
}

唯一的限制是 var() 表示法不能用于多值属性的一部分，例如 padding 或 margin。对于这些聚合属性，var() 表示法必须用于完整的值。

预定义变量🔗

当加载颜色方案时，背景色和前景色将设置为 CSS 变量，以及找到的最接近少数基本颜色的颜色。这些都在默认 CSS 样式表中的 html { } 规则集中设置。

  • var(--background)

  • var(--foreground)

  • var(--accent) 3179

  • var(--redish)

  • var(--orangish)

  • var(--yellowish)

  • var(--greenish)

  • var(--cyanish) 3179

  • var(--bluish)

  • var(--purplish)

  • var(--pinkish)

选择颜色的算法使用 HSL 颜色空间，并使用一些启发式方法来尝试选择适合前景色使用的颜色。如果自动颜色选择不理想，颜色方案作者可以覆盖相应的 html { } 规则集，该规则集包含在 popupCss 或 phantomCss 设置中。

如果在选定的 .sublime-color-scheme 中设置了具有预定义名称之一的变量，则将使用该值，而不是尝试从颜色方案中使用的颜色中找到匹配项。