Sublime Text中文文档之 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>-支持PNG,JPG和GIF的图片file://res://data:网址
  • <ul>- 显示<li>标签的项目 符号

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

最佳实践

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

<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>。类名将是darklight,旨在允许在样式幻像和弹出窗口中高级使用CSS。

添加哪个类是基于HSL颜色空间中当前颜色方案的背景颜色的亮度。如果亮度小于0.5,dark则添加。如果亮度大于或等于0.5,light 则将添加。

CSS

以下列表提供了受支持的属性和值的概述:

单位

支持的计量单位包括:

  • rem
  • em
  • px
  • pt

rem建议使用单位,因为它们基于用户的font_size设置,并且不会级联。

颜色

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

  • 命名的颜色:whitetan,等
  • 速记十六进制: #fff
  • 带alpha的速记十六进制: #fff8
  • 全十六进制: #ffffff
  • 完整的十六进制与alpha: #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)
  • transparent

另外,彩色值可使用CSS颜色模块级别4被修改颜色-MOD函数alpha()/ a()blend()blenda()调节器。

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

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

变量

使用自定义属性和var()功能表示法也支持CSS变量。自定义属性是以那些开头的--

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

一个限制是表示var()法不能用于多数值的一部分,例如paddingmargin。使用这些聚合属性时,var()必须使用符号表示完整值。

预定义变量

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

  • var(--background)
  • var(--foreground)
  • var(--redish)
  • var(--orangish)
  • var(--yellowish)
  • var(--greenish)
  • var(--bluish)
  • var(--purplish)
  • var(--pinkish)

选择颜色的算法使用HSL颜色空间,并使用几种启发法来尝试选择适合前景使用的颜色。在不希望自动颜色选择的情况下,颜色方案作者可以使用html { }包含在popupCssphantomCss设置中的它们自己的规则集 来覆盖适当的值。

© SublimeText 中文官网