Markdown editor guide

Markdown is a wide supported lightweight markup language used for formatting text, commonly used in wikis, documentation, and online forums. It allows users to create structured content using a simple syntax, making it easy to read and write. In Cradle a markdown editor can be used for editing the content for pages, articles, products, blogs and collections.  

• Syntax insertion
  Includes buttons for syntax insertion.
• Distraction free
  Full-with mode for a more distraction free experience.
• Media uploads
  Image uploads supporting jpeg, png, webp and gif.
• Extended syntax
  Extended markdown syntax¹ with advanced features such as asides and footnotes.

Changing to the Markdown editor

Markdown syntax

General rules

• Add space after specifying the block type.
• Blank lines between blocks (paragraphs, headings)
• Spaces should not surround content for inline tags (bold, italics)

Text paragraphs

When writing a line of text in markdown it will turn into a HTML paragraph. When using markdown it is important to always leave an empty line between content.

If we want to write

I often wish I were a King,
And then I could do anything.

If only I were King of Spain,
I’d take my hat off in the rain.

Input in markdown

I often wish I were a King\
And then I could do anything.

If only I were King of Spain,\
I'd take my hat off in the rain.

The input uses the empty row to create the two paragraphs and \ to create line-breaks. To generate a line-break it is also possible to add in the HTML tag <br>.

HTML output

<p>I often wish I were a King,<br>
And then I could do anything.</p>
<p>If only I were King of Spain,<br>
I’d take my hat off in the rain.</p>

Headings

By adding # in front of a line of text a heading is created.

# H1 heading

generates the following HTML output

<h1>H1 heading</h1>

Multiple # in front of a line of text will create the different levels of headings.

Markdown input

## H2 heading

HTML output

<h2>H2 heading</h2>

Block attributes

It is possible to specify attributes, for example id, class and title, for HTML blocks by adding the information in between curly brackets {#id .class key="value"}.

Markdown

{#id .class key="value"}
This is my text

HTML output

<p id="id" class="class" key="value">This is my text</p>

Inline styling

Inline styling wraps single words or sentences with HTML tags and are used without any spaces before or after the content.

Some regular text with inline styling added, such as italics *italics* , bold **bold** and with emphasize ***emphasize***.

Sub- and superscript

Also subscript and superscript can be written: H₂O is written as H~2~O and 2¹⁰ as 2^10^.

Link

A link is created with a combination of square and round brackets [link text](URL) .

Link to Cradle CMS

Markdown input

[Link to Cradle CMS](https://cradlecms.com "Visit our main page")

The text wrapped with " after the URL will add a title title="Visit our main page" inside the <a> tag in the HTML output.

HTML output

<p><a href="https://cradlecms.com" target="_blank" title="Visit our main page">Link to Cradle CMS</a></p>

A quick syntax for adding a link is to enclose the URL in angle brackets <>, for example <https://cradlecms.com> will create <a href="https://cradlecms.com" target="_blank">https://cradlecms.com</a>.

Reference-style link

If the same link is to be used several times or needs to be accessed in a systematic way, it might come in handy to instead use the reference syntax. It uses two square brackets [ ] after one another, one of them is specifying an id, which is defined within the document.

Markdown

A reference-style [link][id] will add in the URL specified in the document.

[id]: https://cradlecms.com/  "The title goes here"

HTML output

<p>A reference-style <a href="https://cradlecms.com/" target="_blank" title="The title goes here">link</a> will add in the URL specified in the document.</p>

Rendered output

A reference-style link will add in the URL specified in the document.

Footnotes

Footnotes or endnotes² is a way to add additional information or cite a reference in written content. Footnotes are a feature in markdown, the content of the footnote is in the bottom of the page.

The placement of the footnote is marked by a number within brackets and marking it as superscript, [^1], and the the content for the footnote is defined with the same format with the content after, [^1]: Content, in the document. The number will be adjusted to be in descending order depending on occurrence in the text.

Example of markdown syntax

Footnote is a markdown feature [^1], the content of the footnote is in the bottom of the page.
[^1]: This is the content of the first footnote.

In a citation, in order for the reader to find the reference, full publication details should be given. What the publication details are depend on the media cited. If you are writing on your own website (platform) you are free to choose your own format but here are multiple citation standards to draw inspiration from (APA, MLA, Chicago, Turabian, IEEE).

Images

Images are included with ![Here is my alt-text](/media/filename.png), it is the same syntax as a link but starting with !.

Figure and figcaption tags

Markdown input

!---
![Here is my alt-text](/media/filename.png "This is the title text")
!---
Figure: A figure caption is written here.

HTML output

<figure><p><img src="/media/filename.png" alt="Here is my alt-text" title="This is the title text"></p>
<figcaption>A figure caption is written here.
</figcaption>
</figure>

Blockquotes

Adding a > before a line will wrap the content into <blockquote> tags. If also the following line will start with > the quote continues and enables a multi-paragraph quote.

There is no Earthly way of knowing… which direction we are going. There is no knowing where we’re rowing, or which way the river’s flowing. Is it raining? Is it snowing? Is a hurricane a’blowing? Not a speck of light is showing so the danger much be growing. Are the fires of hell a’glowing? Is the grisley reaper mowing? YES! The danger must be growing for the rowers keep on rowing AND THEY’RE CERTAINLY NOT SHOWING ANY SIGNS THAT THEY ARE SLOWING!!

– Willy Wonka, Willy Wonka & the Chocolate Factory

Markdown input

> There is no Earthly way of knowing... which direction we are going. There is no knowing where we're rowing, or which way the river's flowing. Is it raining? Is it snowing? Is a hurricane a'blowing? Not a speck of light is showing so the danger much be growing. Are the fires of hell a'glowing? Is the grisley reaper mowing? YES! The danger must be growing for the rowers keep on rowing AND THEY'RE CERTAINLY NOT SHOWING ANY SIGNS THAT THEY ARE SLOWING!!
>
> -- Willy Wonka, Willy Wonka & the Chocolate Factory

HTML output

<blockquote>
<p>There is no Earthly way of knowing… which direction we are going. There is no knowing where we’re rowing, or which way the river’s flowing. Is it raining? Is it snowing? Is a hurricane a’blowing? Not a speck of light is showing so the danger much be growing. Are the fires of hell a’glowing? Is the grisley reaper mowing? YES! The danger must be growing for the rowers keep on rowing AND THEY’RE CERTAINLY NOT SHOWING ANY SIGNS THAT THEY ARE SLOWING!!</p>
<p>– Willy Wonka, Willy Wonka &amp; the Chocolate Factory</p>
</blockquote>

Aside

An aside can be used to provide additional information. By starting a line with A> the text will wrap the content into <aside> HTML tags.

If the writings are to be adapted to screen readers it can be a good idea to add a quote inside the aside, this means that we start the line with A> and following with a > and a space in between. The blockquotes are usually handled better then asides.

Markdown syntax

A> This is the content of a side note, the markdown editor creates a `aside` tag which can be styled to suite the behavior wanted.

HTML output

<aside>
<p>This is the content of a side note, the markdown editor creates a <code>aside</code> tag which can be styled to suite the behavior wanted.</p>
</aside>

Unordered list

• With bullets
• Many bullets
• Of stuff
• Listable stuff

* With bullets
* Many bullets
* Of stuff
* Listable stuff

Ordered list 

1. First item
2. Second
3. Third
4. Last

1. First item
2. Second
3. Third
4. Last

Table

Title 1	Title 2	Title 3
Content for first cell	More text	And even more
Content for second row	Text	Text
A final row	Text	The last cell

Tables are created with rows containing content in between pipes, |. A row with dashes, -, in the content sections, | -------- | -------- | -------- | , is put after the head row to create the head section, <thead>. The editor contains a button for table insertion which includes the basic syntax for a table.

Markdown

| Title 1 | Title 2 | Title 3 |
| -------- | -------- | -------- |
| Content for first cell | More text | And even more |
| Content for second row | Text | Text |
| A final row | Text | The last cell |

HTML output

<table>
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Content for first cell</td>
			<td>More text</td>
			<td>And even more</td>
		</tr>
		<tr>
			<td>Content for second row</td>
			<td>Text</td>
			<td>Text</td>
		</tr>
		<tr>
			<td>A final row</td>
			<td>Text</td>
			<td>The last cell</td>
		</tr>
	</tbody>
</table>

Simple syntax

The markdown editor also supports a simple syntax with footer

Markdown

Name    | Age
--------|------
Bob     | 27
Alice   | 23
========|======
Total   | 50

HTML output

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Bob</td>
			<td>27</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>23</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>50</td>
		</tr>
	</tfoot>
</table>

Horizontal line

A <hr> is created with ***.

---

Markdown

***

Code

code can be written inside of backticks (`) and for code blocks triple backticks (```) are used to enclose the segment before and after.