Movatterモバイル変換

[0]ホーム
URL:

Sublime Text

minihtml Reference
Version:

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

minihtml provides a limited subset of HTML and CSS features found in most webbrowsers. While only certain CSS and HTML features may be implemented, they aredesigned to be standards compliant. Any feature implemented should function thesame way in minihtml as in a browser.

HTML🔗

Tags🔗

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 theAPI to handleclicks on anchor tags.

  • <img> — supports PNG, JPG and GIF images fromfile://,res:// anddata: URLs.

  • <ul> — bullets are displayed for<li> tags.

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

Attributes🔗

The following attributes are supported:

  • class — for CSS selectors

  • id — for CSS selectors

  • style — inline CSS

  • href — callback-based navigation,protocols support

    4073

  • title — tooltips

    4085

Protocols🔗

In HTML sheets, popups, annotations and completion item details, thehref=""attribute of<a> tags automatically supports three protocols:

  • http: — standard URL, will use system default browser to open

  • https: — standard URL, will use system default browser to open

  • subl: — a command name and args to invoke a command

Validsubl: URL formats include:

  • subl:command_name

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

For popups and annotations it is possible to define anon_navigate callbackvia the API that will be called for any URL except for thesubl: protocol.This API-based approach was the only way to handle URLs before build 4073.

4073

Inline Formatting🔗

In the details field of completion items, quick panel items and list inputitems, there is support for a limited, inline formatting subset of minihtml.This allows for some basic text formatting, that respects the theme and colorscheme the user has selected.

The supported tags are:

  • <ahref=""> –protocols

  • <b>

  • <strong>

  • <i>

  • <em>

  • <u>

  • <tt>

  • <code>

4073

Best Practices🔗

To allow color scheme authors to tweak the look of popups and phantoms, it isbest to add a uniqueid="" attribute to the<body> tag of your plugin’sHTML.

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

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

Predefined Classes🔗

When minihtml processes the HTML markup, it will automatically add a singleclass name to the<html> tag. The class name will bedark orlight,and is designed to allow for advanced use of CSS in styling phantoms andpopups.

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

CSS🔗

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

Units🔗

Supported units of measurement include:

  • rem

  • em

  • px

  • pt

rem units are recommended because they are based on the user’sfont_sizesetting, and they will not cascade.

Colors🔗

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)

  • HWB functional notation: hwb(0, 20%, 20%), hwb(0, 20%, 20%, 0.5)

    3181

  • transparent

color() Mod Function (Proprietary)🔗

Additionally, color values may be modified using the CSS Color Module Level 4(05 July 2016)color-mod function withthe following adjusters.Unfortunately in a later draft of CSS Color ModuleLevel 4, the color-mod function was removed.

  • alpha()/a()

  • saturation()/s()

    3179

  • lightness()/l()

    3179

  • blend()

  • blenda()

  • min-contrast() (Proprietary)

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

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

min-contrast() Adjuster🔗

Themin-contrast() adjuster for thecolor() mod function is anon-standard addition that is custom to minihtml. At the time ofimplementation, the CSS Color Module Level 4 spec had acontrast() adjuster,but it only allowed taking a color and modifying it to provide contrast withitself, as opposed to taking a second color (typically a background) and makingsure the foreground has sufficient contrast with the background.

min-contrast() accepts two parameters: a background color to measure thecontrast against, and a minimum contrast ratio between the “base” color and thebackground color. The ratio will be a decimal number, typically between2.0and4.5.

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

Please see the documentation for thecontrast() adjuster fordetails about how the contrast ratio is calculated and how the color ismodified to meet it.

Variables🔗

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

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

The one limitation is that thevar() notation can not be used for part of amulti-number value, such aspadding ormargin. With those aggregateproperties, thevar() notation must be used for the complete value.

Predefined Variables🔗

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

  • var(--background)

  • var(--foreground)

  • var(--accent)3179

  • var(--redish)

  • var(--orangish)

  • var(--yellowish)

  • var(--greenish)

  • var(--cyanish)3179

  • var(--bluish)

  • var(--purplish)

  • var(--pinkish)

The algorithm to pick the colors uses the HSL color space and uses severalheuristics to try and pick colors that are suitable for foreground use. In thecase that the automatic color selection is undesirable, color scheme authorsmay override the appropriate values with their ownhtml{} rule set containedin thepopupCss orphantomCss 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 finda match from the colors used in the color scheme.

Introducing our Git client
Sublime Merge
[8]ページ先頭
©2009-2026 Movatter.jp