Documentation minihtml Reference

Sublime Text contains a custom HTML and CSS engine, named minihtml, for displaying stylized content in editor panes. HTML content can be displayed in both popup windows and phantoms.

minihtml provides a limited subset of HTML and CSS features found in most web browsers. While only certain CSS and HTML features may be implemented, they are designed to be standards compliant. Any feature implemented should function the same way in minihtml as in a browser.


The following tags are styled by the default style sheet:

  • <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>

Special behavior is implemented for a few tags:

  • <a> – a callback can be specified via the API to handle clicks on anchor tags
  • <img> – supports PNG, JPG and GIF images from file://, res:// and data: URLs
  • <ul> – bullets are displayed for <li> tags

Other HTML tags with special behavior are not implemented. This includes tags such as <input>, <button>, <table>, etc.

Best Practices

To allow color scheme authors to tweak the look of popups and phantoms, it is best to add a unique id="" attribute to the <body> tag of your plugin's HTML.

Within the <body> tag, add a <style> tag containing selectors that do not use the id. Leave that for selectors in color schemes to be able to override the plugin.

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

Predefined Classes

When minihtml processes the HTML markup, it will automatically add a single class name to the <html> tag. The class name will be dark or light, and is designed to allow for advanced use of CSS in styling phantoms and popups.

Which class is added is based on the lightness, in the HSL color space, of the background color of the current color scheme. If the lightness is less than 0.5, dark will be added. If the lightness is greater than or equal to 0.5, light will be added.


The following list provides an overview of supported properties and values:


Supported units of measurement include:

  • rem
  • em
  • px
  • pt

rem units are recommended because they are based on the user's font_size setting, and they will not cascade.


Colors may be specified via:

  • Named colors: white, tan, etc
  • Shorthand hex: #fff
  • Shorthand hex with alpha: #fff8
  • Full hex: #ffffff
  • Full hex with alpha: #ffffff80
  • RGB functional notation: rgb(255, 255, 255)
  • RGBA functional notation: rgba(255, 255, 255, 0.5)
  • HSL functional notation: hsl(0, 100%, 100%)
  • HSLA functional notation: hsla(0, 100%, 100%, 0.5)
  • transparent

color() Mod Function

Additionally, color values may be modified using the CSS Color Module Level 4 color-mod function with the following adjusters:

  • 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%));

The color-mod function will be most useful in combination with variables.


CSS variables are also supported using custom properties and the var() functional notation. Custom properties are those starting with --.

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

The one limitation is that the var() notation can not be used for part of a multi-number value, such as padding or margin. With those aggregate properties, the var() notation must be used for the complete value.

Predefined Variables

When a color scheme is loaded, the background and foreground colors are set to CSS variables, along with the closest color found to a handful of basic colors. These are all set in an html { } rule set in the default CSS style sheet.

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

The algorithm to pick the colors uses the HSL color space and uses several heuristics to try and pick colors that are suitable for foreground use. In the case that the automatic color selection is undesirable, color scheme authors may override the appropriate values with their own html { } rule set contained in the popupCss or phantomCss settings.

If a variable with one of the predefined names is set in the selected .sublime-color-scheme, that value will be used instead of trying to find a match from the colors used in the color scheme.


Build 3179

  • Added support for saturation()/s() and lightness()/l() adjusters to color() mod function
  • Added the var(--cyanish) and var(--accent) predefined variables
  • When a .sublime-color-scheme defines one of the predefined variable names, that color value is used