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 2Heading 3Heading 4Heading 5Heading 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
|
|
Blockquote |
> 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 apre
tag. - You must use the
<
entity to make the<
character insidecode
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
wherexxxx
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>
<p>hello</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.