Style Guide

This is a list of style guidelines and best practices for content found on this site.

Semantics

Headings

The page title uses the H1 tag so top-level content tags start with H2.
Use the Markdown # pound to define headings.

Markdown

This site uses the WordPress JetPack Markdown plugin JP MArkdown.

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.

Common Examples

Element Markdown HTML
Headings ## Header 2
### Header 3
#### Header 4
#### Header 5
###### Header 6 (deepest header level)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Strong **Strong**
__Strong__ 		Strong
Strong
Emphasize *Emphasize*
_Emphasize_ 		Emphasize
Emphasize
Anchor Link [link text](http://example.com "link title") link text
Bullet Points - bullet one
- bullet two
- bullet three
  • bullet one
  • bullet two
  • bullet three
Blockquote > This is some text in a block quote.

This is some text in a block quote.

Tables

Simple tables can be created with markdown using pipes | and hyphens -. Hyphens are used to create each column’s header, while pipes separate each column.

  • You must include a blank line before your table in order for it to correctly render.
  • There must be at least three hyphens for each column separating the header row from the body content.
  • You can use markdown formatting within your table.

__First Name__ | __Last Name__ | __Age__
--- | --- | ---
John | Doe | 23
Jane | Doe | 25
First Name Last Name Age
John Doe 23
Jane Doe 25

You can align text to the left, right, or center of a column by including colons : to the left, right, or on both sides of the hyphens within the header row.

Left-aligned | Center-aligned | Right-aligned
:--- | :---: | ---:
left | center | right
left | center | right
Left-aligned Center-aligned Right-aligned
left center right
left center right

Markdown Inside Tags

To allow markdown parsing within block-level elements (like div tags), put markdown="1" as the first attribute in the element:

<div markdown="1" class="myclass">

parse this!

</div>

More Resources

Syntax Highlighting

All code tags are styled with the Prism javascript library.

  • To highlight code within page content wrap it with a code tag, then wrap that with a pre tag.
  • You must use the &lt; entity to make the < character inside code tags, as well as for all other special characters.
  • The start of the content should have no space between it and the pre tag or the space will be rendered.
  • By default Prism will guess what language it is formatting. A set of languages IDs are loaded by default: markup, html, xml, svg, mathml, css, clike, js. More languages can be loaded at runtime. Apply the class name language-xxxx where xxxx is a language ID on any parent element to use a specific language.

Example
Putting this code in the page:

<pre class="language-html"><code>
    &lt;p>hello&lt;/p>
</code></pre>

Will produce this on the page:

<p>hello</p>

More Resources List

Demo Wrapper

See-More Wrapper

Applying the CSS class .see-more to an element will by default show the content of that element as a “see more” button. Clicking the button toggles showing and hiding the content.

This code:

<div markdown="1" class="see-more">

This content is __hidden__ until clicked.

</div>

Will produce this on the page:

This content is hidden until clicked.