Markdown

squido uses CommonMark spec to process the markdown formatted posts.

A quick syntax summary to get your started:

Type	Renders
Italic or _Italic_	Italic
*Bold* or _Bold_	Bold
# Heading 1	Heading 1
# Heading 2	Heading 2
# Heading 3	Heading 3
[Link](https://a.com)	Link
[Image](https://url/a.png)
> Blockquote	Blockquote
* List * List * List or - List - List - List	List List List
1. List 2. List 3. List or 1) List 2) List 3) List	List List List
Horizontal rule: --- or ***	Horizontal rule:
`Inline code` with backticks	Inline code with backticks
``` javascript const test = () => {    console.log('test'); }; ```	const test = () => {    console.log('test'); };

Playground

You can play around with the Markdown Playground here.

Code syntax highlighting

squido uses Highlight.js for code highlighting. This means you can use the code block example above with code wrapped in ``` backticks. You can specify the language by adding the language for your code block.

For example, adding this:

``` javascript
function test(p1, p2) {
   console.log('test');
};
```

Renders this:

function test(p1, p2) {
  console.log('test');
};

Markdown helpers

Attributes

You can add any HTML attributes including ID's and classes by adding {attribute} to your Markdown syntax.

Adding a class to a header (style-me is the class):

# header {.style-me}

Adding a data-toggle attribute to a paragraph:

paragraph {data-toggle=modal}

You can also use this on tables with multiple classes. Eg (note the empty line under the table):

My table       | Header                        
-------------- | ----------
Table          | Contents

{.table .table-hover .table-bordered}

Renders this:

Heading anchors

All headings are automatically rendered as # anchors to hyperlink (skip) to sections within a page / post. This means you add the /#heading-name to the URL to automatically jump to that heading.

For example: https://squido-docs.markmoffat.com/markdown/#playground