*HTML.txt* HTML/XHTML Editing Macros by Christian J. Robinson Last change: 2025 Feb 28 *HTML.vim* *HTML.zip* *HTML-macros* *XHTML-macros* *HTML-plugin* This is a set of HTML/XHTML macros, menus, and toolbar buttons for Vim 9.1.1157 or later to make editing HTML files easier. The original Copyright goes to Doug Renze, although his efforts have been heavily modified and extended in this implementation. All the changes are Copyright © 1998 - 2025 Christian J. Robinson. These macros and the supporting scripts are distributable under the terms of the GNU GPL version 3 or later.
1. Introduction html-intro 2. Author'snotes html-author-notes 3. Customization Variables html-variables 4. Commands html-commands 5. Mappings for Normal<...>Tags html-tags 6. Mappings for &...; Entity Codes character-entities 7. How to Use Browser Mappings browser-control 8. Miscellaneous Extras html-misc
1. Introduction *html-intro* To start, you should familiarize yourself with Vim enough to know the terminology, and you should know HTML to some degree. The mappings are local to the buffer the script was sourced from (normally this happens automatically when editing an HTML type buffer), and the menu and toolbar are active only for buffers the script was sourced from. This help file follows the Vim help file standards. To see what modes a mapping works in see the tags above and to the right. The notation is X_TT, where "X" means the mode, and "TT" means the mapping. For example, the |;;| mapping below works in normal mode (n_;;), insert mode (i_;;), and visual mode (v_;;). This plugin does not define any mappings for :-command mode. I have tried to keep the tags in mostly alphabetical order, but related tags are grouped in various ways, which interferes with that ordering. *html-smart-tag* Thenoted tags are "smart", meaning Vim will detect whether to close then open a tag instead of open then close the tag. For example, if the cursor is inside italicized text and you type ;it, it will insert</I><I>instead of<I></I>. Only tags that should never nest are candidates for being "smart". *n_;;* *i_;;* *v_;;* ;; Most of the mappings start with ; so ;; is mapped to insert a single ; character in insert mode, behave like a single ; in normal mode, etc. (The semicolons in this mapping are changed to whatever g:htmlplugin.map_leader is set to.) *i_;&* ;& The HTML character-entities insert mode mappings start with &, so typing ;& in insert mode will insert a literal & character. (In actuality this mapping is defined as g:htmlplugin.map_leader + g:htmlplugin.entity_map_leader to insert whatever is in g:htmlplugin.entity_map_leader.) (Notethat this mapping behaves very differently in visual mode. See: v_;&) *html-<Tab>* *html-tab* *html-CTRL-I* *i_html-<Tab>* *i_html-tab* *i_html-CTRL-I* *v_html-<Tab>* *v_html-tab* *v_html-CTRL-I*<Tab>If the cursor is on a closing tag the<Tab>key jumps the cursor after the tag. Otherwise the<Tab>key will jump the cursor to an unfilled tag somewhere in the file. For example, if you had the tag:And you hit<A HREF=""></A><Tab>, your cursor would be placed on the second " so you could insert text easily. After filling in some text, the next time you hit<Tab>it would be placed on the< character of </A>. And the third time you hit<Tab>the cursor would be placed on the > of</A>, and so on. This works for tags split across lines, such as:<TABLE>See g:htmlplugin.tab_mapping if you do not want these mappings to be defined, in which case ;</TABLE><Tab>will be used for the mappings instead. [I think the use of tab is acceptable because I do not like the idea of hard tabs or indentation greater than one or two spaces in HTML.] *html-<S-Tab>* *html-shift-tab* *html-SHIFT-CTRL-I* *i_html-<S-Tab>* *i_html-shift-tab* *i_html-SHIFT-CTRL-I* *v_html-<S-Tab>* *v_html-shift-tab* *v_html-SHIFT-CTRL-I* This is much like the above<Tab>mapping but goes in reverse. *i_;<Tab>* *i_;tab* *i_;CTRL-I* *n_;<Tab>* *n_;tab* *n_;CTRL-I* *i_;<S-Tab>* *i_;shift-tab* *i_;SHIFT-CTRL-I* *n_;<S-Tab>* *n_;shift-tab* *n_;SHIFT-CTRL-I* ;<Tab>To insert a hard tab (; then the tab key). If g:htmlplugin.tab_mapping is set this mapping replaces the normal html-tab mapping instead. (See g:htmlplugin.map_leader) And likewise, ;<S-Tab>(shift-tab) can be used. *html-template* *n_;html* ;html This macro inserts a basic template at the top of the file. If the buffer already contains some text you are asked if you want to replace it or add the template anyway. (See g:htmlplugin.map_leader) See g:htmlplugin.template for information on how to customize the template.
2. Author'snotes: *html-author-notes* This plugin makes a number of assumptions under the umbrella of assuming the user's Vim binary was compiled with a standard level of features, sometimes called the "Normal" version. However, this has not been fully tested by the author because he operates with the "Huge" version that includes nearly all compile-time features available to Vim. The Content-Type charset automatic detection value based on the 'fileencoding' / 'encoding' option has a very incomplete translation table from the possible values that Vim uses. I could use help with this. I need someone to help me update the BrowserLauncher code for MacOS, namely to test to make sure it still works, and add support for Google Chrome. I will never include mappings for certain tags, such as<BLINK></BLINK>and<MARQUEE></MARQUEE>(which were always nonstandard). As far as I am concerned these tags should never have existed.
3. Customization Variables *html-variables* *html-configuration* *html-customization* *g:htmlplugin* You can set the g:htmlplugin global |Dictionary| and b:htmlplugin buffer-local |Dictionary| variables to control the behavior of the plugin. It is recommended you set this variable in your |vimrc|, as some of the keys are only effective if they are set before the plugin loads.Notethat you need to do ":let g:htmlplugin ={}" (or b:htmlplugin) first or you will get an error, or you can just set everything at once in your |vimrc|, e.g.:let g:htmlplugin = {\ 'author_name': 'John Smith',\ 'author_email': 'jsmith@example.com',\ 'xhtml_mappings': v:false,\ 'tag_case': 'uppercase'\}Alsonotethat in the following text, "truthy" means anything besides "no", |v:false|/"false", "off", 0, or "" (empty value), case insensitive. This is different than Vim's |truthy| / |falsy| values. *g:htmlplugin.xhtml_mappings* *b:htmlplugin.xhtml_mappings* Set this variable to a "truthy" value if you prefer XHTML compatible tags to be defined. Setting this forces b:htmlplugin.tag_case to "lowercase". This is automatic if you are already editing a file that Vim detects as XHTML. This variable must be set before HTML.vim is sourced for the current buffer. You can also set this on a per-buffer basis by using b:htmlplugin.xhtml_mappings instead. e.g.::let g:htmlplugin.xhtml_mappings = 'yes'(However, XHTML is out of date as of this writing and this mode is not recommended, and it is only supported for historical reasons.) *g:htmlplugin.tag_case* *b:htmlplugin.tag_case* This variable can be set to "l" / "lower" / "lowercase" or "u" / "upper" / "uppercase" to determine the case of the text in the HTML tags. This variable must be set before HTML.vim is sourced for the current buffer (i.e. before the buffer is loaded). The default is "lowercase". You can also set this globally by setting g:htmlplugin.tag_case or on a per-buffer basis by using b:htmlplugin.tag_case instead. This variable is ignored when editing XHTML files (see g:htmlplugin.xhtml_mappings). e.g::let g:htmlplugin.tag_case = 'lowercase'*g:htmlplugin.tag_case_autodetect* Set this variable to a "truthy" value if you want to automatically detect what the value of b:htmlplugin.tag_case should be. This is done by examining the file for both upper and lower case tags (tag attributes are not examined). If only one type is found the tag case for the buffer is set to that value. This variable is ignored if you have set g:htmlplugin.xhtml_mappings or b:htmlplugin.xhtml_mappings. e.g.::let g:htmlplugin.tag_case_autodetect = 'yes'*g:htmlplugin.map_leader* This variable can be set to the character you want for the leader of the mappings defined under html-tags, the default being ";". This variable must be set before HTML.vim is sourced. You can set this to your |mapleader| or |maplocalleader|. e.g.::let g:htmlplugin.map_leader = g:maplocalleader*g:htmlplugin.entity_map_leader* This variable can be set to the character you want for the leader of the character entity insert mode mappings defined under character-entities, the default being "&". This variable must be set before HTML.vim is sourced. If you attempt to set this to the same value as g:htmlplugin.map_leader you will get an error. e.g.::let g:htmlplugin.entity_map_leader = '\'*g:htmlplugin.map_override* Set this variable to a "falsy" value if you do not want this plugin to override mappings that already exist. When this variable is not set you will get a warning message when this plugin overrides a mapping. This variable must be set before HTML.vim is sourced. e.g.::let g:htmlplugin.map_override = 'yes'This only applies to the mappings defined internally to the plugin. If you call the HTMLMapObject.Map() function elsewhere you will still get a warning message when there is an already existing mapping and the mapping will still be overridden. *g:htmlplugin.no_maps* *b:htmlplugin.no_maps* Set this variable to a |List| to match against mappings. If a mapping to be defined matches one of the items in the list it will not be defined. You can also set this on a per-buffer basis by using b:htmlplugin.no_maps instead. The list items are case sensitive, will not undergo g:htmlplugin.map_leader and g:htmlplugin.entity_map_leader substitution, and must be set before HTML.vim is sourced. e.g., to suppress the<A HREF>,<IMG SRC>and the centered headings tags::let g:htmlplugin.no_maps = [';ah', ';im', ';H1', ';H2', ';H3',\ ';H4', ';H5', ';H6']This only applies to the mappings defined internally to the plugin. If you call the HTMLMapObject.Map() function elsewhere the mapping will be defined even if it matches this list; this is useful if you wish to define custom variants of some of the plugin's mappings without getting warning messages. *g:htmlplugin.tab_mapping* Set this variable to a "falsy" value if you do not want the tab key to be mapped in normal, visual and insert mode. ;<Tab>will be used instead. See html-tab and i_;tab. This variable must be set before HTML.vim is sourced for the current buffer. e.g.::let g:htmlplugin.tab_mapping = 'no'Notethat you can suppress the defining of both<Tab>and ;<Tab>as a mapping by adding "\t" to g:htmlplugin.no_maps instead. *g:htmlplugin.toolbar* Set this variable to a "falsy" value if you do not want this plugin to modify the Vim toolbar and add "T" to 'guioptions'. This variable must be set before HTML.vim is sourced. e.g.::let g:htmlplugin.toolbar = 'no'*g:htmlplugin.menu* Set this variable to a "falsy" value if you do not want the menu items to be defined at all. This implies that g:htmlplugin.toolbar is set as well. This variable must be set before HTML.vim is sourced. e.g.::let g:htmlplugin.menu = 'no'*g:htmlplugin.toplevel_menu* Set this to the toplevel menu where you want the HTML menu to become a submenu. The value must be a |List|, must be set before the first time the script is sourced, and there is no way to override the "HTML" menu name. e.g.::let g:htmlplugin.toplevel_menu = ['Plugin']*g:htmlplugin.toplevel_menu_priority* Set this to the priority (position) you want for the toplevel HTML menu. If you placed the HTML menu in a submenu, it affects the HTML's menu within that submenu position. The value must be a positive |Number|, and must be set before the first time the script is sourced, e.g., make the menu appear before all others::let g:htmlplugin.toplevel_menu_priority = 1*g:htmlplugin.template* *b:htmlplugin.template* Set this variable to the location of your template file to be used by the n_;html mapping. You can also set this on a per-buffer basis by using b:htmlplugin.template instead. If unset, a basic internal template will be used. See html-template-tokens for special tokens you can use within the template. *g:htmlplugin.author_name* *b:htmlplugin.author_name* *g:htmlplugin.author_email* *b:htmlplugin.author_email* Within the internal template, b:htmlplugin.author_name is inserted insideb:htmlplugin.author_email is converted to |<META NAME="Author" CONTENT="...">b:htmlplugin.authoremail_encoded| and inserted inside< e.g.:<LINK REL="made" HREF="mailto:...">:let g:htmlplugin.author_name = 'John Smith':let g:htmlplugin.author_email = 'jsmith@example.com'These two variables are also used for the<ADDRESS></ADDRESS>section of the internal template. The default for these variables are empty strings. *g:htmlplugin.author_email_encoded* *b:htmlplugin.author_email_encoded* This variable will be set using HTMLUtilObject.TranscodeString() if your g:htmlplugin.author_email variable is set. (Do not set this variable yourself, it will be overwritten when the template macro is used.) *g:htmlplugin.author_url* *b:htmlplugin.author_url* The author's homepage. Replaces the |authorurl| token in the template. *g:htmlplugin.bgcolor* *g:htmlplugin.textcolor* *g:htmlplugin.linkcolor* *g:htmlplugin.alinkcolor* *g:htmlplugin.vlinkcolor* *b:htmlplugin.bgcolor* *b:htmlplugin.textcolor* *b:htmlplugin.linkcolor* *b:htmlplugin.alinkcolor* *b:htmlplugin.vlinkcolor* These control the CSS in the internal template and can also be used as html-tokens in the user defined template. They default to::let g:htmlplugin.bgcolor = '#FFFFFF':let g:htmlplugin.textcolor = '#000000':let g:htmlplugin.linkcolor = '#0000EE':let g:htmlplugin.alinkcolor = '#FF0000':let g:htmlplugin.vlinkcolor = '#990066'*g:htmlplugin.default_charset* This defaults to "UTF-8" and is the value used if a character set can not be detected by the 'fileencoding' or 'encoding' options. See i_;ct and html-tokens for how this is used. (Also see html-author-notes) *g:htmlplugin.charset* *b:htmlplugin.charset* If either of these variables are set it completely overrides the Content-Type charset detection for the i_;ct mapping and in the html-tokens. Normally these should be left unset.
*html-template-tokens* *html-tokens* When you define a template file with the g:htmlplugin.template or b:htmlplugin.template variable, special tokens within the template will automatically replaced with their corresponding variable value:Token: Variable: Description:*%authorname%* b:htmlplugin.author_name Author's name *%authoremail%* b:htmlplugin.author_email_encoded Author's email address, encoded to prevent spam *%authorurl%* b:htmlplugin.author_url Author's homepage *%bgcolor%* b:htmlplugin.bgcolor Main background color *%textcolor%* b:htmlplugin.textcolor Main text color *%linkcolor%* b:htmlplugin.linkcolor Unvisited link color *%alinkcolor%* b:htmlplugin.alinkcolor Mouse hover link color *%vlinkcolor%* b:htmlplugin.vlinkcolor Visited link colorSpecial tokens:%date% *%date%* This is replaced with the output of strftime("%B %d, %Y") (e.g.: March 16, 2004). You can send custom fields to the |strftime()| call by embedding !... (rather than %...) notation before the second "%" in the token. e.g.:%date!m/!d/!Y !l:!M !p !Z%Would produce something like:03/08/2007 5:59 PM MSTNotethat spaces before and after the format string are ignored, and you can get literal "%" and "!" characters inside the custom format by preceding them with backslashes. e.g.:(%date \%!r\! %)Would produce something like:(%05:59:34 PM!)See http://strftime.net/ for a list of tokens that may work on your system, but remember to use "!" characters in place of "%" characters. %time% or %time12% *%time%* *%time12%* This is replaced with the output of strftime("%r %Z") (e.g.: 05:59:34 PM MST) %time24% *%time24%* This is replaced with the output of strftime("%T %Z") (e.g.: 17:59:34 MST) %charset% *%charset%* This is replaced by a string that is automatically detected based on the 'fileencoding' or 'encoding' option. This can be overridden, see g:htmlplugin.default_charset and g:htmlplugin.charset. (Also see html-author-notes) %vimversion% *%vimversion%* The current version of Vim, based on |v:version| and |v:versionlong|. For example, if v:version was "901" and v:versionlong was "9010220" the %vimversion% token would be replaced by "9.1.220". %htmlversion% *%htmlversion%* The current version of this HTML plugin. %include{file}% *%include%* This will include{file}into the current template at the location it appears.{File}is searched for relative to the template and the directory of the current buffer. For example, if you had the template:<!DOCTYPE html><HTML LANG="en"><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=%charset%"><META NAME="Author" CONTENT="%authorname%"><META NAME="Copyright" CONTENT="Copyright (C) %date% %authorname%"><LINK REL="made" HREF="mailto:%authoremail%"><STYLE TYPE="text/css"><!--BODY{background: %bgcolor%; color: %textcolor%;}A:link{color: %linkcolor%;}A:visited{color: %vlinkcolor%;}A:hover, A:active, A:focus{color: %alinkcolor%;}--></STYLE></HEAD><BODY><P></P></BODY>You would get something like:</HTML><!DOCTYPE html><HTML LANG="en"><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><META NAME="Author" CONTENT="John Smith"><META NAME="Copyright" CONTENT="Copyright (C) August 16, 2021 John Smith"><LINK REL="made" HREF="mailto:jsmith@example.com"><STYLE TYPE="text/css"><!--BODY{background: #FFFFFF; color: #000000;}A:link{color: #0000EE;}A:visited{color: #990066;}A:hover, A:active, A:focus{color: #FF0000;}--></STYLE></HEAD><BODY><P></P></BODY></HTML>
4. Commands *html-commands* The following commands are only defined in HTML buffers. *:HTMLabout* :HTMLabout Show information about the plugin. *disable-HTML-macros* *disable-HTML-mappings* *disable-HTML-plugin* *enable-HTML-macros* *enable-HTML-mappings* *enable-HTML-plugin* *:HTMLplugin* :HTML[plugin]{disable/off/enable/on}This command allows the HTML macros to be disabled and re-enabled. This is useful for editing inline PHP, JavaScript, etc. where you would want to be able to type literal ";", "&" and tab characters without interference. (Also see i_;;, i_;& and i_;<Tab>)Notethat all of the mappings defined by calling HTMLMapObject.Map()--including all of the mappings defined by this script--are disabled/enabled when this command is used, regardless of what g:htmlplugin.map_leader is set to. *:ColorChooser* *:CC* :ColorChooser :CC Open a popup with the standard HTML color palette displayed and highlighted with their respective color. (Notethat the highlighting only works in the |GUI| or a |'termguicolors'| capable terminal.) Keyboard movement commands such as "j" and "k" apply in this popup. Pressing enter selects the hexadecimal color number, shift-enter selects the color name, "r" selects the rgb() value, and "R" selects the rgb() percent value. You can abort by pressing escape or "q". You can also either double-click on the name to select it, or the color number to select that. Finally you can hold down shift while you double click to insert the rgb() value, or hold down control and double click to insert the rgb() percent value. This command fails if you are not in an HTML buffer. (See: |;cc|)
5. Mappings for Normal<>Tags *html-tags* Most of these mappings are insert or visual mappings. In insert mode the tag is inserted and the cursor placed where you would likely want to insert text. In visual mode, the tag is wrapped around the visually selected text in a hopefully logical manner. (See i_;ah, v_;aH and i_;ab for explicit examples--the rest of the mappings that work in visual mode are similar.) *html-operator-mappings* *html-motion-mappings* *n_;* Thenoted (with n_;) normal mode ;-mappings take a{motion}operator. These mappings function as if you had visually highlighted the text covered by the motion and invoked the corresponding visual mapping. If you are editing an XHTML file (see g:htmlplugin.xhtml_mappings) the tags will be compatible with XHTML. (However, XHTML is out of date and this mode is not recommended, and is only supported for historical reasons.)Notethat you can change the leader character for these mappings from ';' to another character of your preference. See g:htmlplugin.map_leader. *html-doctype* *n_;4* *i_;4* ;4 Inserts<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">< at the top of the file. If the current buffer is XHTML, it will be<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(See g:htmlplugin.xhtml_mappings) *n_;s4* *i_;s4* ;s4 Does the same as n_;4, but the document type is strict rather than transitional. (Notethat these macros are meant for a transitional document type and transitional tag mappings will always be defined, so be careful.) *n_;5* *i_;5* ;5 Insertsat the top of the file, for HTML 5. (<!DOCTYPE html>Notethere is no transitional or strict version of this.) *n_;cc* *i_;cc* *v_;cc* ;cc A shortcut mapping to call :ColorChooser. *html-content-type* *i_;ct* ;ct Insertsat the current cursor position. The actual value of the charset is automatically detected based on the 'fileencoding' or 'encoding' option. This can be overridden--see g:htmlplugin.default_charset and g:htmlplugin.charset. (If this doesn't insert the correct charset value, see html-author-notes.) *html-comment* *i_;cm* *v_;cm* *n_;cm* ;cm Comment tag:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">(html-smart-tag) (n_;) *html-a-href* *i_;ah* *v_;ah* *n_;ah* ;ah Anchor hyper link:<!-- -->Visual mode puts the visually selected text<A HREF=""></A><A HREF="">here</A>and positions the cursor on the second ". (html-smart-tag) (n_;) *i_;aH* *v_;aH* *n_;aH* ;aH Same as i_;ah, but puts the visually selected text<A HREF="here">and places the cursor on the< of </A>. If this is used in insert mode rather than visual mode, the contents of the |clipboard| are placed between the quotes. (n_;) *i_;at* *v_;at* *n_;at* ;at Like i_;ah but include TARGET="" in the tag. (n_;) *i_;aT* *v_;aT* *n_;aT* ;aT Like i_;aH but include TARGET="" in the tag. (n_;) *html-article* *i_;ar* *v_;ar* *n_;ar* ;ar Self-contained article:<ARTICLE>(n_;) *html-aside* *i_;as* *v_;as* *n_;as* ;as Content aside from surrounding context:</ARTICLE><ASIDE>(n_;) *html-abbreviation* *i_;ab* *v_;ab* *n_;ab* ;ab Abbreviation:</ASIDE>Visual mode puts the visually selected text<ABBR TITLE=""></ABBR><ABBR TITLE="">here</ABBR>and positions the cursor on the second ". (n_;) *i_;aB* *v_;aB* *n_;aB* ;aB Same as i_;ab, but puts the visually selected text <ABBR TITLE="here"> and places the cursor on the< of </ABBREV>. If this is used in insert mode rather than visual mode, the contents of the |clipboard| are placed between the quotes. (n_;) *html-address* *i_;ad* *v_;ad* *n_;ad* ;ad Address:(n_;) *html-audio* *i_;au* *v_;au* *n_;au* ;au Audio with controls (n_;)<ADDRESS></ADDRESS><AUDIO CONTROLS><SOURCE SRC="" TYPE="">Your browser does not support the audio tag.See: https://www.w3schools.com/tags/tag_audio.asp *html-video* *i_;vi* *v_;vi* *n_;vi* ;vi Video with controls (n_;)</AUDIO><VIDEO WIDTH="" HEIGHT="" CONTROLS><SOURCE SRC="" TYPE="">Your browser does not support the video tag.See: https://www.w3schools.com/tags/tag_video.asp *html-bold* *i_;bo* *v_;bo* *n_;bo* ;bo Boldfaced Text:</VIDEO>(html-smart-tag) (n_;) *html-base-href* *i_;bh* *v_;bh* *n_;bh* ;bh Base URL:<B></B>(n_;) *html-base-target* *i_;bt* *v_;bt* *n_;bt* ;bt Base target:<BASE HREF="">(n_;) *html-bigger* *i_;bi* *v_;bi* *n_;bi* ;bi Bigger text:<BASE TARGET="">(<SPAN STYLE="font-size: larger;"></SPAN>Note<BIG>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-blockquote* *i_;bl* *v_;bl* *n_;bl* ;bl Block quote:<BLOCKQUOTE>(html-smart-tag) (n_;) *html-body* *i_;bd* *v_;bd* *n_;bd* ;bd Document body:</BLOCKQUOTE><BODY>(n_;) *html-line-break* *i_;br* ;br Line break:</BODY>*html-canvas* *i_;cv* *v_;cv* *n_;cv* ;cv Canvas:<BR>(n_;) *html-generic-button* *i_;bn* *v_;bn* *n_;bn* ;bn Generic Button:<CANVAS WIDTH="" HEIGHT=""></CANVAS>If you want a form button, see n_;bu. (n_;) *html-center* *i_;ce* *v_;ce* *n_;ce* ;ce Center:<BUTTON TYPE="button"></BUTTON>(<DIV STYLE="text-align: center;"></DIV>Note<CENTER>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-citation* *i_;ci* *v_;ci* *n_;ci* ;ci Citation:(html-smart-tag) (n_;) *html-code* *i_;co* *v_;co* *n_;co* ;co Code:<CITE></CITE>(html-smart-tag) (n_;) *html-definition-lists* *html-dl* *i_;dl* *v_;dl* *n_;dl* ;dl Definition list:<CODE></CODE><DL>(n_;) *html-definition-term* *html-dt* *i_;dt* *v_;dt* *n_;dt* ;dt Definition term:</DL>(n_;) *html-definition-body* *html-dd* *i_;dd* *v_;dd* *n_;dd* ;dd Definition body:<DT></DT>(n_;) *html-deleted* *i_;de* *v_;de* *n_;de* ;de Deleted text:<DD></DD>(html-smart-tag) (n_;) *html-details* *i_;ds* *v_;ds* *n_;ds* ;ds Details with summmary:<DEL></DEL><DETAILS><SUMMARY></SUMMARY><P></P>Visual mode puts the selected text in place of the</DETAILS><P></P>. (n_;) *html-defining-instance* *html-dfn* *i_;df* *v_;df* *n_;df* ;df Defining instance:(html-smart-tag) (n_;) *html-division* *i_;dv* *v_;dv* *n_;dv* ;dv Document Division:<DFN></DFN><DIV>(n_;) *html-embed* *i_;eb* *v_;eb* *n_;eb* ;eb Embedded element:</DIV>Visual mode puts the selected text SRC="here". (n_;) *html-object* *i_;ob* *v_;ob* *n_;ob* ;ob Generic embedded object:<EMBED TYPE="" SRC="" WIDTH="" HEIGHT=""><HTML DATA="" WIDTH="" HEIGHT="">< Visual mode puts the selected text</HTML>< here<HTML DATA="" WIDTH="" HEIGHT="">(n_;) *html-object-parameter* *i_;pm* *v_;pm* *n_;pm* ;pm Object parameter:</HTML>.Visual mode puts the selected text NAME="here". (n_;) *html-emphasize* *i_;em* *v_;em* *n_;em* ;em Emphasize:<PARAM NAME="" VALUE="">(html-smart-tag) (n_;) *html-font-size* *i_;fo* *v_;fo* *n_;fo* ;fo Font size:<EM></EM>(<SPAN STYLE="font-size: ;"></SPAN>Note<FONT>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-font-color* *i_;fc* *v_;fc* *n_;fc* ;fc Font color:(<SPAN STYLE="color: ;"></SPAN>Note<FONT>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-figure* *i_;fg* *v_;fg* *n_;fg* ;fg Figure element:<FIGURE>(html-smart-tag) (n_;) *html-figure-caption* *i_;fp* *v_;fp* *n_;fp* ;fp Figure caption:</FIGURE>(html-smart-tag) (n_;) *html-footer* *i_;ft* *v_;ft* *n_;ft* ;ft Footer:<FIGCAPTION></FIGCAPTION><FOOTER>(n_;) *html-header* *i_;hd* *v_;hd* *n_;hd* ;hd Header:</FOOTER><HEADER>(n_;) *html-headings* *i_;h1* *v_;h1* *n_;h1* *i_;h2* *v_;h2* *n_;h2* *i_;h3* *v_;h3* *n_;h3* *i_;h4* *v_;h4* *n_;h4* *i_;h5* *v_;h5* *n_;h5* *i_;h6* *v_;h6* *n_;h6* ;h1 through ;h6 Headings, levels 1-6:</HEADER>(n_;) *i_;H1* *v_;H1* *n_;H1* *i_;H2* *v_;H2* *n_;H2* *i_;H3* *v_;H3* *n_;H3* *i_;H4* *v_;H4* *n_;H4* *i_;H5* *v_;H5* *n_;H5* *i_;H6* *v_;H6* *n_;H6* ;H1 through ;H6 Headings, levels 1-6, centered:<H_></H_>(n_;) *i_;hg* *v_;hg* *n_;hg* ;hg Header grouping:<H_ STYLE="text-align: center;"></H_><HGROUP>(n_;) *html-head* *i_;he* *v_;he* *n_;he* ;he Head:</HGROUP><HEAD>(n_;) *html-horizontal-rule* *i_;hr* ;hr Horizontal rule:</HEAD>*i_;Hr* ;Hr Horizontal rule:<HR>^ *html-html* *i_;ht* *v_;ht* *n_;ht* ;ht HTML document:<HR STYLE="width: 75%;"><HTML>(n_;) *html-inline-frame* *i_;if* *v_;if* *n_;if* ;if Inline frame:</HTML><IFRAME SRC="">(n_;) *html-image* *i_;im* *v_;im* *n_;im* ;im Image:</IFRAME>Places the cursor on the second " of the SRC="". In visual mode it puts the visually selected text ALT="here" and places the cursor on the second " of the SRC="". (n_;) (see also n_;mi) *i_;iM* *v_;iM* *n_;iM* ;iM Same as i_;im, but puts the visually selected text <IMG SRC="here" ALT=""> and places the cursor on the second " of ALT="". If this is used in insert mode rather than visual mode, the contents of the |<IMG SRC="" ALT="">clipboard| are placed between the quotes. (n_;) *html-inserted* *i_;in* *v_;in* *n_;in* ;in Inserted text:(html-smart-tag) (n_;) *html-italics* *i_;it* *v_;it* *n_;it* ;it Italicized text:<INS></INS>(html-smart-tag) (n_;) *html-inline-javascript* *i_;js* ;js Inline JavaScript:<I></I><SCRIPT TYPE="application/javascript">*html-inline-javascript-module* *i_;jm* ;jm JavaScript module:</SCRIPT><SCRIPT TYPE="module">*html-sourced-javascript* *i_;sj* ;sj External (sourced) JavaScript:</SCRIPT>*html-javascript-module* *i_;mo* ;mo External (sourced) JavaScript module:<SCRIPT SRC="" TYPE="application/javascript"></SCRIPT>*html-noscript* *i_;ns* *v_;ns* *n_;ns* ;ns Alternate content for browsers with script handling turned off:<SCRIPT SRC="" TYPE="module"></SCRIPT><NOSCRIPT>(n_;) *html-list-item* *i_;li* *v_;li* *n_;li* ;li List item:</NOSCRIPT>inside<LI></LI><UL>or<OL>. (n_;) *html-header-link* *i_;lk* *v_;lk* *n_;lk* ;lk Link, inside the header:(n_;) *html-main* *i_;ma* *v_;ma* *n_;ma* ;ma Main document content:<LINK HREF=""><MAIN>(n_;) *html-meter* *i_;mt* *v_;mt* *n_;mt* ;mt Meter bar indicator (not for progress, use n_;pg instead):</MAIN>(n_;) *html-mark* *i_;mk* *v_;mk* *n_;mk* ;mk Marked/highlighted text:<METER VALUE="" MIN="" MAX=""></METER>(html-smart-tag) (n_;) *html-meta* *i_;me* *v_;me* *n_;me* ;me Meta information:<MARK></MARK>Places the cursor on the second " of NAME="". Visual mode puts the visually selected text<META NAME="" CONTENT=""><META NAME="here" CONTENT="">and places the cursor on the second " of CONTENT="". (n_;) *i_;mE* *v_;mE* *n_;mE* ;mE Same as i_;me, but puts the visually selected text <META NAME="" CONTENT="here"> and places the cursor on the second " of NAME="". If this is used in insert mode rather than visual mode, the contents of the |clipboard| are placed between the quotes. (n_;) *html-http-equiv* *i_;mh* *v_;mh* *n_;mh* ;mh Meta http-equiv:Places the cursor on the second " of HTTP-EQUIV="". Visual mode puts the visually selected text<META HTTP-EQUIV="" CONTENT=""><META HTTP-EQUIV="" CONTENT="here">. (n_;) *html-update-image-size* *i_;mi* *v_;mi* *n_;mi* ;mi Automatically add or update the WIDTH and HEIGHT attributes of the<IMG>tag under the cursor. Currently this only supports GIF, JPEG, PNG, TIFF (not supported by most browsers), and WEBP files. *html-navigation* *i_;na* *v_;na* *n_;na* ;na Navigation links:<NAV>(n_;) *html-ordered-list* *i_;ol* *v_;ol* *n_;ol* ;ol Ordered (numbered) list:</NAV><OL>(n_;) *html-paragraph* *i_;pp* *v_;pp* *n_;pp* ;pp Paragraph:</OL><P>(html-smart-tag) (n_;) *i_;/p* ;/p Like above, but inserts:</P></P>This is intended to be used when the cursor is between<P><P>and</P>in insert mode and you want to start a new paragraph without having to move the cursor. This shouldn't be necessary now that the |;pp| tag is smart. *html-preformatted-text* *i_;pr* *v_;pr* *n_;pr* ;pr Preformatted text:<PRE>(html-smart-tag) (n_;) *html-progress* *i_;pg* *v_;pg* *n_;pg* ;pg Progress bar indicator:</PRE>Visual mode puts the selected text VALUE="here". (n_;) *html-quote* *i_;qu* *v_;qu* *n_;qu* ;qu Quoted text:<PROGRESS VALUE="" MAX=""></PROGRESS>(html-smart-tag) (n_;) *html-sample* *i_;sa* *v_;sa* *n_;sa* ;sa Sample text:<Q></Q>(html-smart-tag) (n_;) *html-section* *i_;sc* *v_;sc* *n_;sc* ;sc Page section:<SAMP></SAMP><SECTION>(n_;) *html-small* *i_;sm* *v_;sm* *n_;sm* ;sm Small text:</SECTION>(<SPAN STYLE="font-size: smaller;"></SPAN>Note<SMALL>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-span* *i_;sn* *v_;sn* *n_;sn* ;sn Span with class attribute:Visual mode puts the selected text<SPAN CLASS=""></SPAN><SPAN CLASS="">here</SPAN>. (n_;) *i_;ss* *v_;ss* *n_;ss* ;ss Span with style attribute:Visual mode puts the selected text<SPAN STYLE=""></SPAN><SPAN STYLE="">here</SPAN>. (n_;) *i_;sN* *v_;sN* *n_;sN* ;sN Span:Visual mode puts the selected text<SPAN></SPAN><SPAN>here</SPAN>. (n_;) *html-strong* *i_;st* *v_;st* *n_;st* ;st Strong text:(html-smart-tag) (n_;) *html-inline-css* *i_;cs* *v_;cs* *n_;cs* ;cs Inline CSS Style:<STRONG></STRONG><STYLE TYPE="text/css"><!---->(n_;) *html-linked-css* *i_;ls* *v_;ls* *n_;ls* ;ls Linked CSS style sheet:</STYLE>(n_;) *html-subscript* *i_;sb* *v_;sb* *n_;sb* ;sb Subscript:<LINK REL="stylesheet" TYPE="text/css" HREF="">(html-smart-tag) (n_;) *html-superscript* *i_;sp* *v_;sp* *n_;sp* ;sp Superscript:<SUB></SUB>(html-smart-tag) (n_;) *html-title* *i_;ti* *v_;ti* *n_;ti* ;ti Title:<SUP></SUP>(n_;) *html-time* *i_;tm* *v_;tm* *n_;tm* ;tm Time:<TITLE></TITLE>(n_;) *html-teletype* *i_;tt* *v_;tt* *n_;tt* ;tt Teletype Text (monospaced):<TIME DATETIME=""></TIME>(<SPAN STYLE="font-family: monospace;"></SPAN>Note<TT>is not HTML 5 compatible, so we use CSS instead.) (n_;) *html-underline* *i_;un* *v_;un* *n_;un* ;un Underlined text:(html-smart-tag) (n_;) *html-unordered-list* *i_;ul* *v_;ul* *n_;ul* ;ul Unordered list:<U></U><UL>(n_;) *html-variable* *i_;va* *v_;va* *n_;va* ;va Variable:</UL>(html-smart-tag) (n_;) *html-word-break* *html-wbr* *i_;wb* ;wb Possible line break (work break opportunity):<VAR></VAR>(n_;) *html-tables* *i_;ta* *v_;ta* *n_;ta* ;ta Table:<WBR><TABLE>(n_;) *n_;tA* ;tA Interactive table; you will be interactively prompted for the table rows, columns, border width (using CSS), table header and table footer. *html-table-headrow* *i_;tH* *v_;tH* *n_;tH* ;tH Table header row:</TABLE>(n_;) *html-table-body* *i_;tb* *v_;tb* *n_;tb* ;tb Table body:<THEAD></THEAD>(n_;) *html-table-footer* *i_;tf* *v_;tf* *n_;tf* ;tf Table footer row:<TBODY></TBODY>(n_;) *html-table-caption* *i_;ca* *v_;ca* *n_;ca* ;ca Table caption:<TFOOT></TFOOT>(n_;) *html-table-row* *i_;tr* *v_;tr* *n_;tr* ;tr Table row:<CAPTION></CAPTION><TR>(n_;) *html-table-data* *i_;td* *v_;td* *n_;td* ;td Table data (column element):</TR>(n_;) *html-table-cheader* *i_;th* *v_;th* *n_;th* ;th Table column header:<TD></TD>(n_;) *html-forms* *i_;fm* *v_;fm* *n_;fm* ;fm Form container:<TH></TH><FORM ACTION="">(html-smart-tag) (n_;) *html-form-button* *i_;bu* *v_;bu* *n_;bu* ;bu Form button:</FORM>Visual mode puts the selected text VALUE="here". (n_;) *html-form-checkbox* *i_;ch* *v_;ch* *n_;ch* ;ch Form checkbox:<INPUT TYPE="BUTTON" NAME="" VALUE="">Visual mode puts the selected text VALUE="here". (n_;) *html-form-date-input* *i_;cl* *v_;cl* *n_;cl* ;cl Form date input field:<INPUT TYPE="CHECKBOX" NAME="" VALUE="">Visual mode puts the selected text NAME="here". (n_;) *html-form-datalist* *i_;da* *v_;da* *n_;da* ;da Form text input field with a datalist:<INPUT TYPE="DATE" NAME=""><INPUT LIST=""><DATALIST ID=""></DATALIST>Visual mode puts the selected text in the LIST value and the ID value. (n_;) *html-form-fieldset* *i_;fd* *v_;fd* *n_;fd* ;fd Fieldset container with legend:</INPUT><FIELDSET><LEGEND></LEGEND>Visual mode puts the selected text after the LEGEND. (n_;) *html-form-file-input* *i_;fi* *v_;fi* *n_;fi* ;fi Form file input field:</FIELDSET>Visual mode puts the selected text VALUE="here". (n_;) *html-form-hidden* *i_;hi* *v_;hi* *n_;hi* ;hi Hidden form data:<INPUT TYPE="FILE" NAME="" VALUE="" SIZE="20">Visual mode puts the selected text VALUE="here". (n_;) *html-form-time-input* *i_;nt* *v_;nt* *n_;nt* ;nt Form time input field:<INPUT TYPE="HIDDEN" NAME="" VALUE="">Visual mode puts the selected text NAME="here". (n_;) *html-form-password* *i_;pa* *v_;pa* *n_;pa* ;pa Form password input field:<INPUT TYPE="TIME" NAME="">Visual mode puts the selected text VALUE="here". (n_;) *html-radio-button* *i_;ra* *v_;ra* *n_;ra* ;ra Form radio button:<INPUT TYPE="PASSWORD" NAME="" VALUE="" SIZE="20">Visual mode puts the selected text VALUE="here". (n_;) *html-range-slider* *i_;rn* *v_;rn* *n_;rn* ;rn Range slider:<INPUT TYPE="RADIO" NAME="" VALUE="">Visual mode puts the selected text NAME="here". (n_;) *html-form-text-input* *i_;te* *v_;te* *n_;te* ;te Form text input field:<INPUT TYPE="RANGE" NAME="" MIN="" MAX="">Visual mode puts the selected text VALUE="here". (n_;) *html-form-email-input* *i_;@* *v_;@* *n_;@* ;@ Form email input field:<INPUT TYPE="TEXT" NAME="" VALUE="" SIZE="20">Visual mode puts the selected text VALUE="here". (n_;) *html-form-telephone-input* *i_;#* *v_;#* *n_;#* ;# Form telephone input field:<INPUT TYPE="EMAIL" NAME="" VALUE="" SIZE="20">Visual mode puts the selected text VALUE="here". (n_;) *html-form-number-input* *i_;nu* *v_;nu* *n_;nu* ;nu Form number input field:<INPUT TYPE="TEL" NAME="" VALUE="" SIZE="20">Visual mode puts the selected text VALUE="here". (n_;) *html-form-url-input* *i_;ur* *v_;ur* *n_;ur* ;ur Form URL input field:<INPUT TYPE="NUMBER" NAME="" VALUE="" STYLE="width: 5em;">Visual mode puts the selected text VALUE="here". (n_;) *html-form-selection* *i_;se* *v_;se* *n_;se* ;se Form selection box:<INPUT TYPE="URL" NAME="" VALUE="" SIZE="20"><SELECT NAME="">< Visual mode puts the selected text</SELECT>< here<SELECT NAME="">(n_;) *html-form-multiple-selection* *i_;ms* *v_;ms* *n_;ms* ;ms Form multiple selection box:</SELECT>.<SELECT NAME="" MULTIPLE>< Visual mode puts the selected text</SELECT>< here<SELECT NAME="" MULTIPLE>(n_;) *html-form-selection-option* *i_;op* *v_;op* *n_;op* ;op Form selection option (</SELECT>.<OPTION></OPTION>). (html-smart-tag) (n_;) *html-form-option-group* *html-form-optgroup* *i_;og* *v_;og* *n_;og* ;og Form option group:<OPTGROUP LABEL="">< Visual mode puts the selected text</OPTGROUP>< here<OPTGROUP LABEL="">(n_;) *html-form-output* *i_;ou* *v_;ou* *n_;ou* ;ou Form output (</OPTGROUP>.<OUTPUT NAME=""></OUTPUT>). (n_;) *html-form-textarea* *i_;tx* *v_;tx* *n_;tx* ;tx Form text input area:<TEXTAREA NAME="" ROWS="10" COLS="50">< Visual mode puts the selected text</TEXTAREA>< here<TEXTAREA NAME="" ROWS="10" COLS="50">(n_;) *html-form-submit* *i_;su* ;su Form submit button:</TEXTAREA>.*html-form-reset* *i_;re* ;re Form reset button:<INPUT TYPE="SUBMIT">*html-form-label* *i_;la* *v_;la* *n_;la* ;la Form element label:<INPUT TYPE="RESET">Visual mode puts the visually selected text<LABEL FOR=""></LABEL><LABEL FOR="">here</LABEL>and positions the cursor on the second ". (n_;) *v_;lA* *n_;lA* ;lA The same as i_;la but puts the cursor<LABEL FOR="here"></LABEL>and places the cursor on the< of </LABEL>. (n_;) *SSI-includes* Server Side Include directives for Apache and other supported web servers. See: https://en.wikipedia.org/wiki/Server_Side_Includes For all of these the cursor is placed on the second " in insert mode, and highlighted text is inserted between the ""'s for visual mode, except the v_;ie mapping, where text is inserted between the if and else lines. *html-ssi-timefmt* *i_;cf* *v_;cf* *n_;cf* ;cf Config time format:(n_;) *html-ssi_sizefmt* *i_;cz* *v_;cz* *n_;cz* ;cz Config size format:<!--#config timefmt="" -->(n_;) *html-ssi-echo* *i_;ev* *v_;ev* *n_;ev* ;ev Echo contents of an environmental variable:<!--#config sizefmt="" -->(n_;) *html-ssi-include* *i_;iv* *v_;iv* *n_;iv* ;iv Include file relative to the document root:<!--#echo var="" -->(n_;) *html-ssi-flastmod* *i_;fl* *v_;fl* *n_;fl* ;fv Output the last modified timestamp of a file relative to the document root:<!--#include virtual="" -->(n_;) *html-ssi-fsize* *i_;fz* *v_;fz* *n_;fz* ;fz Output the file size of a file relative to the document root:<!--#flastmod virtual="" -->(n_;) *html-ssi-exec* *i_;ec* *v_;ec* *n_;ec* ;ec Print the output of a specified command:<!--#fsize virtual="" -->(n_;) *html-ssi-set* *i_;sv* *v_;sv* *n_;sv* ;sv Set an environmental variable to a specified value:<!--#exec cmd="" -->(n_;) *html-ssi-if-else* *i_;ie* *v_;ie* *n_;ie* ;ie If/then/else conditional:<!--#set var="" value="" --><!--#if expr="" --><!--#else -->(n_;)<!--#endif -->
6. Mappings for &...; Codes *character-codes* *character-entities* A number of mappings have been defined to allow insertion of special characters into the HTML buffer. These are known as characters entities. *n_;&* *v_;&* ;& This mapping converts the motion or visually selected characters to their &...; (name) or &#x...; (hexadecimal) entities if a name for that character doesn't exist, where "..." is equivalent to the ASCII hexadecimal representation. For example, "Fish & Chips" would become: "Fish & Chips". (See i_;&) (n_;) This can be very slow if you translate a long string and syntax highlighting is enabled.Notes: - Spaces are translated to the entity which stands for nonbreaking space, which is slightly different from a space; this is considered a useful compromise. - The "&" in this mapping is not translated to whatever g:htmlplugin.entity_map_leader is set to, while the ";" is translated to whatever g:htmlplugin.entity_map_leader is set to. *n_;star* *v_;star* ;* Similar to n_;& / v_;& but encodes to purely hexadecimal codes instead. *n_;%* *v_;%* ;% This mapping converts the motion or visually selected characters to their %XX hexadecimal string for URIs. For example, "Fish & Chips" would become: "%46%69%73%68%20%26%20%43%68%69%70%73". (n_;) (Notethat this will not touch Unicode characters. See HTMLUtilObject.TranscodeString()) *n_;^* *v_;^* ;^ This mapping will decode the &..., &#...; and %XX elements of the motion or visually selected characters to their actual characters. (n_;) The following mappings work in insert mode only.Notethat you can change the leader character for these mappings from '&' to another character of your preference. See g:htmlplugin.entity_map_leader.Name: Symbol: HTML: Macro:
Ampersand (&) & & && *i_&&* Greater than (>) > > &> *i_&>* Less than (<) < < &< *i_&<* *i_&<space>* *i_&space* Space (non-breaking) &<space>Quotation mark (") " " &' *i_&'* Left Single Quote ‘ ‘ &l' *i_&l'* Right Single Quote ’ ’ &r' *i_&r'* *i_&lquote* Left Double Quote “ “ &l" *i_&rquote* Right Double Quote ” ” &r" Left Angle Quote « « &2< *i_&2<* Right Angle Quote » » &2> *i_&2>* Cent ¢ ¢ &c| *i_&cbar* Lira ₤ &x20A4; &L= *i_&l=* Euro € € &E= *i_&E=* Pound £ £ &# *i_&#* Yen ¥ ¥ &Y= *i_&Y=* Copyright © © &cO *i_&cO* Registered ® ® &rO *i_&rO* Trademark ™ ™ &tm *i_&tm* Multiply × × &x *i_&x* Divide ÷ ÷ &/ *i_&/* Plus/Minus ± ± &+- *i_&+-* Inverted Exclamation ¡ ¡ &! *i_&!* Inverted Question ¿ ¿ &? *i_&?* Degree ° ° &dg *i_&dg* Micro µ µ &mi *i_&mi* Ohm Ω Ω &oh *i_&oh* Paragraph ¶ ¶ &pa *i_&pa* Section § § &se *i_&se* Middle Dot · · &. *i_&.* Bullet • • &* *i_&star* One Quarter ¼ ¼ &14 *i_&14* One Half ½ ½ &12 *i_&12* Three Quarters ¾ ¾ &34 *i_&34* One Third ⅓ ⅓ &13 *i_&13* Two Thirds ⅔ ⅔ &23 *i_&23* One Fifth ⅕ ⅕ &15 *i_&15* Two Fifths ⅖ ⅖ &25 *i_&25* Three Fifths ⅗ ⅗ &35 *i_&35* Four Fifths ⅘ ⅘ &45 *i_&45* One Sixth ⅙ ⅙ &16 *i_&16* Five Sixths ⅚ ⅚ &56 *i_&56* One Eight ⅛ ⅛ &18 *i_&18* Three Eights ⅜ ⅜ &38 *i_&38* Five Eights ⅝ ⅝ &58 *i_&58* Seven Eights ⅞ ⅞ &78 *i_&78* Superscript 0 ⁰ ⁰ &0^ *i_&0^* Superscript 1 ¹ ¹ &1^ *i_&1^* Superscript 2 ² ² &2^ *i_&2^* Superscript 3 ³ ³ &3^ *i_&3^* Superscript 4 ⁴ ⁴ &4^ *i_&4^* Superscript 5 ⁵ ⁵ &5^ *i_&5^* Superscript 6 ⁶ ⁶ &6^ *i_&6^* Superscript 7 ⁷ ⁷ &7^ *i_&7^* Superscript 8 ⁸ ⁸ &8^ *i_&8^* Superscript 9 ⁹ ⁹ &9^ *i_&9^* Subscript 0 ₀ ₀ &0v *i_&0v* Subscript 1 ₁ ₁ &1v *i_&1v* Subscript 2 ₂ ₂ &2v *i_&2v* Subscript 3 ₃ ₃ &3v *i_&3v* Subscript 4 ₄ ₄ &4v *i_&4v* Subscript 5 ₅ ₅ &5v *i_&5v* Subscript 6 ₆ ₆ &6v *i_&6v* Subscript 7 ₇ ₇ &7v *i_&7v* Subscript 8 ₈ ₈ &8v *i_&8v* Subscript 9 ₉ ₉ &9v *i_&9v* En dash – – &n- *i_&n-* Em dash — — &m- *i_&m-* Ellipsis … … &3. *i_&3.* A-grave À À &A` *i_&A`* a-grave à à &a` *i_&a`* E-grave È È &E` *i_&E`* e-grave è è &e` *i_&e`* I-grave Ì Ì &I` *i_&I`* i-grave ì ì &i` *i_&i`* O-grave Ò Ò &O` *i_&O`* o-grave ò ò &o` *i_&o`* U-grave Ù Ù &U` *i_&U`* u-grave ù ù &u` *i_&u`* A-acute Á Á &A' *i_&A'* a-acute á á &a' *i_&a'* E-acute É É &E' *i_&E'* e-acute é é &e' *i_&e'* I-acute Í Í &I' *i_&I'* i-acute í í &i' *i_&i'* O-acute Ó Ó &O' *i_&O'* o-acute ó ó &o' *i_&o'* U-acute Ú Ú &U' *i_&U'* u-acute ú ú &u' *i_&u'* Y-acute Ý Ý &Y' *i_&Y'* y-acute ý ý &y' *i_&y'* A-tilde à à &A~ *i_&A~* a-tilde ã ã &a~ *i_&a~* N-tilde Ñ Ñ &N~ *i_&N~* n-tilde ñ ñ &n~ *i_&n~* O-tilde Õ Õ &O~ *i_&O~* o-tilde õ õ &o~ *i_&o~* A-circumflex   &A^ *i_&A^* a-circumflex â â &a^ *i_&a^* E-circumflex Ê Ê &E^ *i_&E^* e-circumflex ê ê &e^ *i_&e^* I-circumflex Î Î &I^ *i_&I^* i-circumflex î î &i^ *i_&i^* O-circumflex Ô Ô &O^ *i_&O^* o-circumflex ô ô &o^ *i_&o^* U-circumflex Û Û &U^ *i_&U^* u-circumflex û û &u^ *i_&u^* *i_&Aquote* A-umlaut Ä Ä &A" *i_&aquote* a-umlaut ä ä &a" *i_&Equote* E-umlaut Ë Ë &E" *i_&equote* e-umlaut ë ë &e" *i_&Iquote* I-umlaut Ï Ï &I" *i_&iquote* i-umlaut ï ï &i" *i_&Oquote* O-umlaut Ö Ö &O" *i_&oquote* o-umlaut ö ö &o" *i_&Uquote* U-umlaut Ü Ü &U" *i_&uquote* u-umlaut ü ü &u" *i_&yquote* y-umlaut ÿ ÿ &y" *i_"e* Umlaut ¨ ¨ &" A-ring Å Å &Ao *i_&Ao* a-ring å å &ao *i_&ao* AE-ligature Æ Æ &AE *i_&AE* ae-ligature æ æ &ae *i_&ae* C-cedilla Ç Ç &C, *i_&C,* c-cedilla ç ç &c, *i_&c,* O-slash Ø Ø &O/ *i_&O/* o-slash ø ø &o/ *i_&o/* Szlig ß ß &sz *i_&sz* Left single arrow ← ← &la *i_&la* Right single arrow → → &ra *i_&ra* Up single arrow ↑ ↑ &ua *i_&ua* Down single arrow ↓ ↓ &da *i_&da* Left-right single arrow ↔ ↔ &ha *i_&ha* Up-down single arrow ↕ ↕ &va *i_&va* North-West single arrow ↖ ↖ &nw *i_&nw* North-East single arrow ↗ ↗ &ne *i_&ne* South-East single arrow ↘ ↘ &sE *i_&sa* South-West single arrow ↙ ↙ &sw *i_&sw* Left double arrow ⇐ ⇐ &lA *i_&lA* Right double arrow ⇒ ⇒ &rA *i_&rA* Up double arrow ⇑ ⇑ &uA *i_&uA* Down double arrow ⇓ ⇓ &dA *i_&dA* Left-right double arrow ⇔ ⇔ &hA *i_&hA* Up-down double arrow ⇕ ⇕ &vA *i_&vA* North-West double arrow ⇖ ⇖ &nW *i_&nW* North-West double arrow ⇗ ⇗ &nE *i_&nE* North-West double arrow ⇘ ⇘ &sE *i_&sE* North-West double arrow ⇙ ⇙ &sW *i_&sW* Female ♀ ♀ &fm *i_&fm* Male ♂ ♂ &ml *i_&ml* QuarterNote(music) ♩ ♩ &md *i_&md* Sung (music) ♪ ♪ &m8 *i_&m8* EightNote(music) ♫ ♫ &m2 *i_&m2* Flat (music) ♭ ♭ &mb *i_&mb* Sharp (music) ♯ ♯ &mx *i_&mx* G Clef 𝄞 #x1D11E; &gc *i_&gc* F Clef 𝄢 #x1D122; &fc *i_&fc* Checkmark ✓ ✓ &ok *i_&ok* X mark ✗ ✗ &xx *i_&xx* *i_&2star* Filled Star ★ ★ &2* *i_&3star* Hollow Star ☆ ☆ &3* Maltese Cross ✠ ✠ &m+ *i_&m+* Spades Suit ♠ ♠ &sp *i_&sp* Clubs Suit ♣ ♣ &cl *i_&cl* Hearts Suit ♥ ♥ &he *i_&he* Diamonds Suit ♦ ♦ &di *i_&di* Rx (Prescription) ℞ ℞ &rx *i_&rx* Infinite ∞ ∞ &00 *i_&00* Greaterthan Equal ≥ ≥ &>= *i_&>=* Lessthan Equal ≤ ≤ &<= *i_&<=* Not Greaterthan ≯ ≯ &!> *i_&!>* Not Lessthan ≮ ≮ &!< *i_&!<* Not Equal ≠ ≠ &!= *i_&!=* Square Root √ √ &sq *i_&sq* Dagger (footnote) † † &dt *i_&dt* Double Dagger ‡ ‡ &dd *i_&dd* Care Of (c/o) ℅ ℅ &co *i_&co* Backspace ⌫ ⌫ &bs *i_&bs* Delete ⌦ ⌦ &dl *i_&dl* The Greek Alphabet:Name: Symbol: HTML: Macro:
Upper Alpha Α Α &Al *i_&Al*
Upper Beta Β Β &Be *i_&Be*
Upper Gamma Γ Γ &Ga *i_&Ga*
Upper Delta Δ Δ &De *i_&De*
Upper Epsilon Ε Ε &Ep *i_&Ep*
Upper Zeta Ζ Ζ &Ze *i_&Ze*
Upper Eta Η Η &Et *i_&Et*
Upper Theta Θ Θ &Th *i_&Th*
Upper Iota Ι Ι &Io *i_&Io*
Upper Kappa Κ Κ &Ka *i_&Ka*
Upper Lambda Λ Λ &Lm *i_&Lm*
Upper Mu Μ Μ &Mu *i_&Mu*
Upper Nu Ν Ν &Nu *i_&Nu*
Upper Xi Ξ Ξ &Xi *i_&Xi*
Upper Omicron Ο Ο &Oc *i_&Oc*
Upper Pi Π Π &Pi *i_&Pi*
Upper Rho Ρ Ρ &Rh *i_&Rh*
Upper Sigma Σ Σ &Si *i_&Si*
Upper Tau Τ Τ &Ta *i_&Ta*
Upper Upsilon Υ Υ &Up *i_&Up*
Upper Phi Φ Φ &Ph *i_&Ph*
Upper Chi Χ Χ &Ch *i_&Ch*
Upper Psi Ψ Ψ &Ps *i_&Ps*
Lower alpha α α &al *i_&al*
Lower beta β β &be *i_&be*
Lower gamma γ γ &ga *i_&ga*
Lower delta δ δ &de *i_&de*
Lower epsilon ε ε &ep *i_&ep*
Lower zeta ζ ζ &ze *i_&ze*
Lower eta η η &et *i_&et*
Lower theta θ θ &th *i_&th*
Lower iota ι ι &io *i_&io*
Lower kappa κ κ &ka *i_&ka*
Lower lambda λ λ &lm *i_&lm*
Lower mu μ μ &mu *i_&mu*
Lower nu ν ν &nu *i_&nu*
Lower xi ξ ξ &xi *i_&xi*
Lower omicron ο ο &oc *i_&oc*
Lower pi π π &pi *i_&pi*
Lower rho ρ ρ &rh *i_&rh*
Lower sigma σ σ &si *i_&si*
Lower sigmaf ς ς &sf *i_&sf*
Lower tau τ τ &ta *i_&ta*
Lower upsilon υ υ &up *i_&up*
Lower phi φ φ &ph *i_&ph*
Lower chi χ χ &ch *i_&ch*
Lower psi ψ ψ &ps *i_&ps*
Lower omega ω ω &og *i_&og*
Lower theta θ ϑ &ts *i_&ts*
Lower upsih υ ϒ &uh *i_&uh*
Lower piv ϖ ϖ &pv *i_&pv*
Roman Numerals, Upppercase:
Name: Symbol: HTML: Macro:
1 Ⅰ Ⅰ &R1 *i_&R1*
2 Ⅱ Ⅱ &R2 *i_&R2*
3 Ⅲ Ⅲ &R3 *i_&R3*
4 Ⅳ Ⅳ &R4 *i_&R4*
5 Ⅴ Ⅴ &R5 *i_&R5*
6 Ⅵ Ⅵ &R6 *i_&R6*
7 Ⅶ Ⅶ &R7 *i_&R7*
8 Ⅷ Ⅷ &R8 *i_&R8*
9 Ⅸ Ⅸ &R9 *i_&R9*
10 Ⅹ Ⅹ &R10 *i_&R10*
11 Ⅺ Ⅺ &R11 *i_&R11*
12 Ⅻ Ⅻ &R12 *i_&R12*
50 Ⅼ Ⅼ &R50 *i_&R50*
100 Ⅽ Ⅽ &R100 *i_&R100*
500 Ⅾ Ⅾ &R500 *i_&R500*
1000 Ⅿ Ⅿ &R1000 *i_&R1000*
Roman Numerals, Lowercase:
Name: Symbol: HTML: Macro:
1 ⅰ ⅰ &r1 *i_&r1* 2 ⅱ ⅱ &r2 *i_&r2* 3 ⅲ ⅲ &r3 *i_&r3* 4 ⅳ ⅳ &r4 *i_&r4* 5 ⅴ ⅴ &r5 *i_&r5* 6 ⅵ ⅵ &r6 *i_&r6* 7 ⅶ ⅶ &r7 *i_&r7* 8 ⅷ ⅷ &r8 *i_&r8* 9 ⅸ ⅸ &r9 *i_&r9* 10 ⅹ ⅹ &r10 *i_&r10* 11 ⅺ ⅺ &r11 *i_&r11* 12 ⅻ #x217b; &r12 *i_&r12* 50 ⅼ ⅼ &r50 *i_&r50* 100 ⅽ ⅽ &r100 *i_&r100* 500 ⅾ ⅾ &r500 *i_&r500* 1000 ⅿ #x217f; &r1000 *i_&r1000*
7. How to Use Browser Mappings *browser-control* You can use a browser to preview your current HTML document.Notethat support for more browsers will probably not be added as many browsers use the same rendering engines as either Firefox or Google Chrome. For Mac OS X: *browser-control-macos* Opening new tabs and windows depends on the built-in Graphic User Interface Scripting architecture of Mac OS X which comes disabled by default. You can activate GUI Scripting by selecting the checkbox "Enable access for assistive devices" in the Universal Access preference pane. For Unix: *browser-control-unix* The following mappings are only defined if you have installed the corresponding browsers. n_;db is only defined if xdg-open is installed. For Windows (and Cygwin): *browser-control-windows* The following mappings, aside from n_;db are only defined if you have installed the corresponding browsers in a standard location (i.e. on your C:\ drive). *html-default-browser* *n_;db* ;db Call the default browser on the current file. For Unix this requires "xdg-open" to be installed. *html-edge-browser* *n_;ed* ;ed Make Microsoft Edge view the current file, starting Edge if it is not running. You will get an error dialog if Edge is not installed. (Only on Windows.) *n_;ned* ;ned Same as n_;ed, but start a new browser window. (Only on Windows.) *n_;ted* ;ted Same as n_;ned, but open a new tab. (Only on Windows.) *html-firefox-browser* *n_;ff* ;ff Make Firefox view the current file, starting Firefox if it is not running. *n_;nff* ;nff Same as n_;ff, but start a new browser window. *n_;tff* ;tff Same as n_;nff, but open a new tab. *html-chrome-browser* *n_;gc* ;gc Make Google Chrome view the current file, starting Chrome if it is not running. (May behave the same as n_;tgc.) (Currently not available on MacOS. See html-author-notes.) *n_;ngc* ;ngc Same as n_;gc, but start a new browser window. (Currently not available on MacOS. See html-author-notes.) *n_;tgc* ;tgc Same as n_;ngc, but open a new tab. (Currently not available on MacOS. See html-author-notes.) *html-opera-browser* *n_;oa* ;oa Make Opera view the current file, starting Opera if it is not running. *n_;noa* ;noa Same as n_;oa, but start a new browser window. *n_;toa* ;toa Same as n_;noa, but open a new tab. *html-safari-browser* *n_;sf* ;sf Make Safari view the current file, starting Safari if it is not running. (Only on MacOS.) *n_;nsf* ;nsf Same as n_;sf, but start a new browser window. (Only on MacOS.) *n_;tsf* ;tsf Same as n_;nsf, but open a new tab. (Only on MacOS.) *html-lynx-browser* *n_;ly* ;ly Use Lynx to view the current file. This behaves like n_;nly if the Vim |GUI| is running. (Only on Unix and Cygwin.) *n_;nly* ;nly Same as n_;ly, but in a new xterm. This behaves like n_;ly if there is no DISPLAY environmental variable. (Notethat this will fall back to using `:terminal` if xterm is not found.) (Only on Unix and Cygwin.) *n_;tly* ;tly Same as n_;ly, but in a new Vim window, using `:terminal`. (Only on Unix and Cygwin.) *html-w3m-browser* *n_;w3* ;w3 Use w3m to view the current file. This behaves like n_;nw3 if the Vim |GUI| is running. (Only on Unix and Cygwin.) *n_;nw3* ;nw3 Same as n_;w3, but in a new xterm. This behaves like n_;w3 if there is no DISPLAY environmental variable. (Notethat this will fall back to using `:terminal` if xterm is not found.) (Only on Unix and Cygwin.) *n_;tw3* ;tw3 Same as n_;w3, but in a new Vim window, using `:terminal`. (Only on Unix and Cygwin.) *html-links-browser* *n_;ln* ;ln Use Links to view the current file. This behaves like n_;nln if the Vim |GUI| is running. (Only on Unix and Cygwin.) *n_;nln* ;nln Same as n_;ln, but in a new xterm. This behaves like n_;ln if there is no DISPLAY environmental variable. (Notethat this will fall back to using `:terminal` if xterm is not found.) (Only on Unix and Cygwin.) *n_;tln* ;tln Same as n_;ln, but in a new Vim window, using `:terminal`. (Only on Unix and Cygwin.)
8. Miscellaneous Extras *html-misc* Some of the functions used by the HTML mappings: *html-functions*
These functions are wrapped into various classes and must be imported and a new object created to be used. For example, to to create an object, first include the respective file(s) in your |vim9script|:vim9scriptimport autoload 'HTML/Map.vim'import autoload 'HTML/Util.vim'<Then create the object(s):var HTMLMapObject = Map.HTMLMap.new()var HTMLUtilObject = Util.HTMLUtil.new()Hereafter, example objects will be used for the various functions listed: HTMLUtilObject.BoolVar('{variable}') *HTMLUtilObject.BoolVar()* Tests to see if the contents of the named variable in the string argument (don't forget the quotes!) are "truty" in a very broad sense of the word.True: 1/true/yes/y/onFalse: 0/false/no/n/off/none/null/(blank value)This function cannot work on function-local variable names; only prefixable variables such as |b:|, |g:|, |s:|, |t:|, |v:|, and |w:| variables are valid for testing, and the default, if unspecified, is to check for a g: (global) variable. HTMLUtilObject.ColorChooser({how}) *HTMLUtilObject.ColorChooser()* Create the Color Chooser popup.{how}determines if it is inserted ('i') or appended ('a') at the cursor position. HTMLUtilObject.Bool('{variable}') *HTMLUtilObject.Bool()* This is the helper function called by HTMLUtilObject.BoolVar() and does the actual test, so it can be used more directly if desired. HTMLUtilObject.IsSet('{variable}') *HTMLUtilObject.IsSet()* Tests to see if the named variable is set. (Don't forget the quotes!) *HTMLUtilObject.FilesWithMatch()* HTMLUtilObject.FilesWithMatch([{filelist}], '{pattern}', [max]) Search{filelist}for{pattern}, scanning at most{max}lines per file for the match. A list of files that matched is returned. *HTMLUtilObject.ToRGB()* HTMLUtilObject.ToRGB({string}[,{bool}]) Convert a #XXXXXX Hexadecimal color{string}to rgb() format.{bool}determines whether to convert to percentages (|v:true|) or 0-255 format. A blank string is returned on error. *HTMLUtilObject.TranscodeString()* HTMLUtilObject.TranscodeString({string}[,{...}]) Returns{string}encoded into HTML entities, or decode HTML encoded strings. The second argument controls how the string is handled:Argument: Behavior:d/decode Decode the %XX, &...;, &#...;, and &#x...; elements of the provided string % Encode as a %XX URI string x Encode as a &#x...; string (hexadecimal) omitted Encode as a &...; or &#x...; string (name, or hexadecimal) other No change to the string See n_;&, n_;star, and n_;% for examples.Notes: - Unicode characters can not be safely converted to %XX hex strings for URIs due to a limit in the specification, so this function will leave them untouched. This limitation does not apply to encoding to or from &...; entities. - Null characters will be converted to newlines, due to a limitation in Vim itself. *HTMLMapObject.GenerateTable()* HTMLMapObject.GenerateTable([{rows},{columns},{border-width},{thead},{tfoot}]) This is normally called by the n_;tA, mapping but it can be called with argumetns to non-interactively generate a table:Argument: Behavior:{rows}|Number|: Number of rows to insert{columns}|Number|: Number of columns to insert{border-width}|Number|: Width of the border in pixels (not HTML5 compatible; leave at 0 and use CSS){thead}|Boolean|: Whether to insert a table header{tfoot}|Boolean|: Whether to insert a table footer If a table header or table footer is inserted, a table body tag will also be inserted.Notethat the header and footer is exclusive of the row count. This function returns true if a table was generated, false otherwise. *HTMLMapObject.Map()* HTMLMapObject.Map({maptype},{lhs},{rhs}[,{options}]) This function defines a mapping, local to the buffer and silent.{maptype}is any map command.{lhs}and{rhs}are equivalent to `:map` arguments, see |map|. This is useful for autocommands and HTML filetype plugins. If{lhs}starts with "<lead>" that string will replaced with the contents of g:htmlplugin.map_leader. If{lhs}starts with "<elead>" that string will replaced with the contents of g:htmlplugin.entity_map_leader. Any text in{rhs}that is enclosed by [{}] will be converted to uppercase/lowercase according to the g:htmlplugin.tag_case or b:htmlplugin.tag_case variable, and the [{}] markers will be removed. If{rhs}is an empty string and{maptype}is a normal mapping, then the plugin assumes you're creating an mapping that takes a motion/operator to complete it, and it will be mapped onto the corresponding visual mapping. In other words, the plugin uses visual mode over the motion/operator area and then executes the corresponding visual map. These are equivalent:viw;bo;boiwBoth will put<b></b>around the word under the cursor.{options}is optional, but if it exists it's a |Dictionary| that specifies changed mapping behavior; for insert mode and visual mode mappings:Run the{"expr": true}{rhs}of the mapping as an expression and "type" the result.Do not add extra magic to the visual mapping. This suppresses the other options.{"extra": false}The visual or normal (operator) mapping enters insert mode. (For visual or normal mode mappings.){"insert": true}Re-indent the visually selected lines, plus N lines below. This value is usually going to be 1, and sometimes 2; very rarely other values. This function returns true if a map was defined, false otherwise. (For visual mappings.) *HTMLMapObject.NextInsertPoint()* HTMLMapObject.NextInsertPoint([{"reindent": N}{mode},{direction}]) This is normally called by the i_;<Tab> mapping, but it works the same if called any other way. The{mode}argument is either 'i' or 'n' (default) which means |Insert| or |Normal|. In insert mode, if the cursor is on the start of a closing tag it places the cursor after the tag. The{direction}argument is either 'f' or 'b', which means search forward or backward, respectively. The defaults for the two options are 'n' and 'f'. This function returns true if the cursor was moved, false otherwise. HTMLMapObject.PluginControl({what}) *HTMLMapObject.PluginControl()* This is normally called by the :HTMLplugin command. It can either enable the mappings by specifying "on" or "true" as{what}, or "off" or "false" to disable. HTMLMapObject.Template() *HTMLMapObject.Template()* This is normally called by the n_;html mapping, but it works the same if called any other way. This function returns true if the cursor is on an insert point after creating the template in the buffer, false otherwise. *HTMLUtilObject.SetIfUnset()* HTMLUtilObject.SetIfUnset({variable},{value}) This function sets{variable}to{value}if the variable is not already set. A{value}of "" makes sure the variable is set with an empty string, a{value}of [] initializes to an empty list, and a value of{}initializes to an empty dictionary. Be sure to enclose the variable name in quotes. This function will not work for function-local variables (|l:var|). This function returns Util.SetIfUnsetR.success if the variable was set, Util.SetIfUnsetR.exists if it already existed, and Util.SetIfUnsetR.error for an error (|enum|). vim:tw=78:ts=8:sw=0:ft=help:fo=tcq2:ai:
Generated by vim2html on 7.3.2025