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) Link
> 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
  1. List
  2. List
  3. 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:

My table Header
Table Contents

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://docs.squido.org/markdown/#playground

Tags:
markdown |