HTML-C Shortcuts A more concise way of writing HTML
Welcome
HTML-C is an unofficial superset of HTML that can be used within HTML templates.
It adds shortcuts to make reading and writing HTML easier, by reducing repetition and visual noise.
Whitespace
The HTML-C pre-processor will remove all surrounding whitespace from each line.
If you need a space between elements, you can add a
.
<div> <b>text 1</b> <b>text 2</b> <b>text 3</b> </div> // converts to... <div><b>text 1</b><b>text 2</b><b>text 3</b></div>
Shortcuts
Slash Tags </>
It’s not necessary to include the tag name in closing tags. A single slash is fine.
<p> This is a <em>special message</> just for you! </>
Double-Arrow Tags <...>>
Double-arrow tags automatically close at the end of the line.
Include a space after the tag, for readability. It will be trimmed.
<h2>> Look at these bullets <ul> <li>> This is bullet 1 <li>> This is bullet 2 <li>> This is bullet 3 </>
Nesting Double-Arrow Tags
You can use more than one double-arrow tag per line. They will be closed in the correct order.
// THT template: <h2>> Unread Messages: <strong>> 2 // will translate to... <h2>Unread Messages <strong>2</strong></h2>
Triple-Arrow Tags <...>>>
Content inside of triple-arrow tags is passed through verbatim.
Extra indentation and surrounding whitespace is trimmed.
This is useful for <pre>
and <textarea>
tags.
<pre>>> if (condition) { // run code here } </>
Dotted Tags <.class>
At the start of the tag, you can include CSS-style selectors to specify the class or classes.
If no tag name is included, it will default to div
.
<.sidebar> <p>> Make sure you <span.callout>do it</>: <.button.button-primary>> Press the Button </> // converts to... <div class='sidebar'> <p>Make sure you <span class='callout'>do it</span>:</p> <div class='button button-primary'>Press the Button</div> </div>