Markdown Widget

This article outlines what the Markdown Page Widget is, how to install it, and how to use it in Pages.

What is it?

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext documents.

The Markdown Widget allows Page Editors to add content to Pages using the markdown syntax. The Widget is especially made for developers who prefer to write documentation using markdown.

To use the Widget, the Markdown Widget App must be installed by the Admin.

How to install

To install the Markdown Widget, as an Admin, you can:

Navigate to the Admin Settings by clicking your avatar
Click Apps
Search for Markdown Widget or Scroll down to find the Markdown Widget in the list of apps
Click Install

The Markdown Widget App should now be installed and can be used by Page Editors.

How to use the Widget

To use the Widget, as a Page Owner, Author, or Editor, you can:

Navigate to a Page
Click the Edit icon at the top right of the Page
Click or create a Section
Add a Widget to the Section
Select the Markdown Widget

The Widget will be added to the Page and will show a text editor where Markdown markup can be added. The preview of markdown can be see below the text editor as seen in the screenshot below.

On the top right of the Widget, there is an MD Template link that will replace the content in the editor with a sample markdown text.

You can also edit the Widget Style from the Widget menu on the left.

Saving the Page will save the markdown content. In the view mode, the Widget will show a rendered markdown.

Formatting

Headers

Heading 1 – #
Heading 2 – ##
Heading 3 – ###
Heading 4 – ####
Heading 5 – #####
Heading 6 – ######

Horizontal line

The following can be used to create a horizontal line:

Emphasis

**This is a bold text**
__This is bold text__
*This is an italicized text*
_This is an italicized text_
~~Strikethrough~~

Blockquotes

> Blockquote

Blockquotes can also be nested by using additional greater-than signs right next to each other, or with spaces between arrows.

>> Blockquote
> > > Blockquote

Lists

Unordered

Create an unordered list by starting a line with either one of the following:

Sub-lists are made by indenting 2 spaces before the start of the text:

* Ac tristique libero volutpat at

Marker character changes forces a new sublist to start:

+ Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit

Ordered

Create an ordered list by starting with 1, then 2, then 3, and so on:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Alternatively, you can create an ordered list by keeping all the numbers as 1.

Code

Inline code

To inlined write code, you must add ` at the beginning and ` at the end of the code.

`Inlined code`

Indented code

To write indented code, add an indent at the beginning of the code.

Indented code 1
Indented code 2
Indented code 3

Block code "fences"

You can create block code “fences” by adding ``` in between your code. For example:

```

Sample text here...

```

Tables

An example of how to write a table can be found below:

| Beginning of | your table |

| ------ | ----------- |

The beginning of your table will be bolded automatically.

Note that | ------ | ----------- | must come after the beginning of your table. For the table to appear, you don’t have to have the exact number of dashes as shown in the example, but you have to have a minimum of two dashes and two boxes per column. For example:

This will work: | -- | -- |
This will not work: | - | - |
This will not work: | -- |

You can add more columns by adding another | Sample tex | next to the beginning of your table.

You also don’t need to have the same number of | -- | -- | as the number of columns you want to have.

You can then add more rows by adding more text between | symbols.

Please find the example below:

| Name | Surname | Date of birth |

| -- | -- |

| Alicia | Vikander | October 3rd, 1988 |

| Bill | Skarsgård | August 9th, 1990 |

Right aligned columns

To have your table columns to be aligned on the right, you need to add a colon symbol at the end of each | -- |.

For example: