Markdown Basics

Articles on the Library use markdown. Here's everything you need to know to format your articles.


Introduction

Codebots Library articles are formatting using markdown.

You can use the edit bar to format to your article.

Edit bar

Alternatively, you can manually apply formatting using the following syntax.


Headings

The following markdown:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Renders as:

Heading 1

Heading 2

Heading 3

Heading 4

Text Formatting

Adding emphasis

  • To bold text, use **bold** or __bold__
  • To italicise text, use *italics* or _italics_
  • To add a strikethrough use ~~strikethrough~~

URLs

The markdown [Link Title](https://www.example.com) will render as Link Title.

Links to Codebots Library articles will automatically render with the articles title. So, the URL https://codebots.app/library-article/codebots/view/65/what-is-codebots will automatically render as https://codebots.app/library-article/codebots/view/65/what-is-codebots.

Lists

Markdown supports both ordered and unordered lists.

The following markdown:

1. Item 1
2. Item 2
    * Subitem a
    * Subitem b
3. Item 3

- Item 1
    Indented text
- Item 2
    - Subitem a
    - Subitem b
- Item 3

Renders as:

  1. Item 1
  2. Item 2

    • Subitem a
    • Subitem b
  3. Item 3
  • Item 1
    Indented text
  • Item 2

    • Subitem a
    • Subitem b
  • Item 3

Note that ` or - ` can both be used to indicated a bullet list.

Code blocks

Code blocks can be inline or fenced. They also support language tags for fenced code blocks.

The following markdown:

**Inline code block example**: `<p>Paragraph</p>`

**Fenced code block example**:
​```html
<div>
    <p>Paragraph</p>
</div>
​```

Renders as:

Inline code block example: <p>Paragraph</p>

Fenced code block example:

<div>
    <p>Paragraph</p>
</div>

Tables

To insert a table, you can click the table icon in the edit bar. Use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. You can use inline code blocks, emphasis, and links to format text inside table cells.

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
Syntax Description
Header Title
Paragraph Text

To make the markdown table easier to read, you can you spaces to pad out the columns so they are a consistent width. They will display in the exact same way however, and in no ways controls the actual column width.

| Syntax    | Description |
| ------ -- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

Footnotes

To insert a foot note add a foot note reference and the foot note itself. The reference represent what will become the super script number link that will appear above the text. For example: [^1] appears as [^1]. Our footnote reference must reference our footnote. We can create this linkage through taking our footnote reference and appending a colon. For example: [^1]: Our footnote looks like this.

We can place a footnote in our sentence[^1].

[^1]: Footnotes will always be rendered at the bottom of the page.

[^1]: Footnotes can appear anywhere in our document, they are not required to be at the bottom of the page. They will always render at the bottom

Media

Images

To upload an image, simple click the image item in the edit bar.

To embed an image hosted elsewhere, the following syntax can be used: ![alt text](image.jpg)

For example, ![placeholder](https://via.placeholder.com/250) will render the following image, with the alt text “placeholder”.

alt text

Video

The Library includes the automatic embedding of videos from YouTube, Vimeo and Loom. To embed a video, simply paste the video URL. It is important that you use the regular share URL of the video, not the embedding URL. This URL will usually look something like this:

  • Loom: https://www.loom.com/share/videoID
  • YouTube: https://www.youtube.com/watch?v=videoID
  • Vimeo: https://vimeo.com/videoID

If you want to include a video URL without embedding it, you will need to wrap it in a link using [title](url)

The library won’t render the video while you are editing, only once it has been published and someone is viewing it.


Unsupported Syntax

The Library does not currently support the following markdown syntax:

  • Heading IDs
  • Task lists

Last updated: 23 June 2020


Start modelling your app today.