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

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

CSS

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

单位

支持的计量单位包括：

  • rem
  • em
  • px
  • pt

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

颜色

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

  • 命名的颜色：white，tan，等
  • 速记十六进制：#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() * saturation()/s() * lightness()/l() * blend() * blenda()

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

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

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

变量

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

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

预定义变量

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

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

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

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

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