Welcome to a brief overview of how to use Markdown HTML within the specific StarterSite V2 fields. We will focus on fields that include larger descriptions and premium content blocks.
After seeing a few examples of Markdown HTML in action, most will find that it is quite simple to use. The examples below are composed in a before/after style, showing examples of syntax as well as the HTML output produced by Markdown.
New Lines and Paragraphs
To create a new line, add two spaces at the end of your text and press the Enter key.
A paragraph is simply one or more consecutive lines of text separated by one or more blank lines. A blank line is any line that is not accompanied by text.
You can move your copy to the next line by pressing the Spacebar key twice, or if you’d like to create a new paragraph you can press the Enter key twice.
MARKDOWN EXAMPLES:
To create a paragraph, simply add your copy and create a new paragraph by pressing the Enter key twice.
You can create a line containing nothing but spaces or tabs to also create a new paragraph.
This is just a regular paragraph.
HTML OUTPUT:
<p>To create a paragraph you simply add your first line and then add a blank line. This could be as simple as pressing the Enter key twice.</p>
<p>You could even create a line containing nothing but spaces or tabs and that would also create a new paragraph.</p>
<p>This is just a regular paragraph.</p>
Headers
Markdown offers two ways to create headers. You can create <h1> and <h2> by underlining with the equals sign (=) and hyphens (-), respectively. Alternatively, you can put 1-6 hash marks (#) at the beginning of the line — the number of hashes equals the resulting HTML header level.
MARKDOWN EXAMPLES:
A First Level Header
====================
A Second Level Header
---------------------
Here is the second way to create a header:
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
HTML OUTPUT:
<h1>A First Level Header</h1>
<h2>A Second Level Header</h2>
<p>Here is the second way to create a header:</p>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
Phrase Emphasis
Markdown uses simple asterisks and underscores to indicate spans of emphasis as seen in the examples below.
MARKDOWN EXAMPLES:
You can use an asterisk before and after a statement to *emphasize* a phrase.
You can also use an underscore before and after to _emphasize_ a phrase.
Use two asterisks for **strong emphasis**.
Alternatively, you can __use two underscores instead__.
HTML OUTPUT:
<p>Use an asterisk before and after to <em>emphasize</em> a phrase.
You can also use an underscore before and after to <em>emphasize</em> a phrase.</p>
<p>Use two asterisks for <strong>strong emphasis</strong>.
Alternatively, you can <strong>use two underscores instead</strong>.</p>
Lists
To create an unordered (bulleted) list, use asterisks, plus signs, and hyphens (*, +, and -) as list markers. To create an ordered list, simply add numbers in sequence (1,2,3 etc... followed by a full stop. Then add your text data.
MARKDOWN EXAMPLES:
Unordered Lists:
* Apple.
* Banana.
* Orange.
+ Apple.
+ Banana.
+ Orange.
- Apple.
- Banana.
- Orange.
Ordered List:
1. Red
2. Green
3. Blue
Unordered List with paragraphs”
* An item in the list.
After leaving one blank line, this line becomes a paragraph.
* Another item in the list.
HTML OUTPUT:
Unordered Lists:
<ul>
<li>Apple.</li>
<li>Banana.</li>
<li>Orange.</li>
</ul>
<ul>
<li>Apple.</li>
<li>Banana.</li>
<li>Orange.</li>
</ul>
<ul>
<li>Apple.</li>
<li>Banana.</li>
<li>Orange.</li>
</ul>
Ordered List:
<ol>
<li>Red.</li>
<li>Green.</li>
<li>Blue.</li>
</ol>
Unordered List with paragraphs:
<ul>
<li>
<p>An item in the list.</p>
<p>After leaving one blank line, this line becomes a paragraph.</p>
</li>
<li>Another item in the list.</li>
</ul>
Links
To create a link, you need to use square brackets to establish the text you want to change into a link. You can also include an alternative title by using a single quotation mark. See this in the action below:
MARKDOWN EXAMPLES:
This is an [example link](http://example.com/).
Additionally, you may include a title attribute in the parentheses: [example link](http://example.com/ 'With a Title').
[You can also create an inline-style link like this.](https://www.google.com)
[Or even an inline-style link with a title](https://www.google.com 'Googles Homepage')
HTML OUTPUT:
<p>This is an <a href="http://example.com/">
example link</a>.</p>
<p>Additionally, you may include a title attribute in the parentheses: <a href="http://example.com/" title="With a Title">example link</a></p>
<p><a href="https://www.google.com/">You can also create an inline-style link like this.</a></p>
<p><a href="https://www.google.com/" title="Googles Homepage">Or even an inline-style link with a title.</a></p>
** Note that the titles appear while a mouse hovers over the link.
Images
To add an image, begin with an exclamation mark and then follow the same logic as you would create links by using square brackets. You can see examples below:
MARKDOWN EXAMPLES:
This is how you combine an image and a link:
[](http://example.com/)
HTML OUTPUT:
<p><img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="An image with alternative text"></p>
<p><img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="An image with alternative text and a title" title="Title"></p>
<p>This is how you combine an image and a link:
<a href="http://example.com/"><img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="An image with alternative text and a title" title="Title"></a></p>
** Note that the image above does not reflect actual usage. In your HTML example, the link is available when the image is clicked.