Markdown Kitchen Sink

| 7 min. (1424 words)

References


Headings


# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Typography


Sup bro! But. Got a dollar for the bus?, this **random morepork** is as outrageously
awesome as a sick [seabed](http://example.com). Mean while, in The Naki,
_Sir Edmond Hillary_ and John Key were up to no good with a bunch of carked it
cheese on toasts. The pearler force of his making scones[^1] was on par with The
Hungery Caterpilar's fully sick pikelet. ~~Put the jug on will you bro, all these
thermo-nuclear craft supplies can wait till later.~~ Auto linking
https://raygun.com and : smile : emoji support is _**on**_

[^1]: the footnote text.

Output:

Sup bro! But. Got a dollar for the bus?, this random morepork is as outrageously awesome as a sick seabed. Mean while, in The Naki, Sir Edmond Hillary and John Key were up to no good with a bunch of carked it cheese on toasts. The pearler force of his making scones1 was on par with The Hungery Caterpilar’s fully sick pikelet. Put the jug on will you bro, all these thermo-nuclear craft supplies can wait till later. Auto linking https://raygun.com and 😄 emoji support is on

Horizontal rule

---

Output:


A horizontal rule can break up some paragraphs


Ordered list

1. Money and the free rides
2. Lies that you denied
3. Calls you've been making
4. Times you've been faking

Output:

  1. Money and the free rides
  2. Lies that you denied
  3. Calls you’ve been making
  4. Times you’ve been faking

Unordered list

- Item 1
- Item 2
- Item 3
- Item 5

Output:

  • Item 1
  • Item 2
  • Item 3
  • Item 5

Blockquote


> Put the jug on will you bro, all these heaps good L&Ps can wait till later.
>
> James and the Giant Peach and his bloody whanau, what a stink buzz.

Output:

Put the jug on will you bro, all these heaps good L&Ps can wait till later.

James and the Giant Peach and his bloody whanau, what a stink buzz.

Testimonial

{{< testimonial text="After the girl guide biscuits have been flogged, you add all the
wicked lamingtons to the wet blanket you've got yourself a meal aw chur ma bro"
title="Peter Smith, CTO, Baked Beans Mobile" >}}

Output:

“After the girl guide biscuits have been flogged, you add all the wicked lamingtons to the wet blanket you've got yourself a meal aw chur ma bro”

Peter Smith, CTO, Baked Beans Mobile

Wistia

{{< wistia id="g161zeh6cn" title="Granular Permissions Demo Final Video" >}}

Output:

Tables


   Name | Age  | Nationality
--------|------|-------------
    Ben | 27   | Jamaican
    Mia | 23   | Hungary

Output:

Name Age Nationality
Ben 27 Jamaican
Mia 23 Hungary

Image


![Image example](http://placehold.it/600x480)

Output:

Image example

Figure


NOTE: Remove the backslash (\), this is just here so that the example will render

{{< figure src="http://placehold.it/400x300" title="A caption to display below the image..." >}}

Output:

A caption to display below the image...

Code block


JavaScript

{{< highlight js >}}
const markdownExample = (codeBlock) => {
  return Math.random() * codeBlock.length;
}
{{< / highlight >}}

Output:

const markdownExample = (codeBlock) => {
  return Math.random() * codeBlock.length;
}

C#

{{< highlight "C#" >}}
using System;
namespace Example.Controllers
{
  [ApplicationAccess]
  public partial class ExampleController : ExampleControllerBase
  {
    private readonly IUnitOfWork _unitOfWork;

    public ExampleController(IUnitOfWork unitOfWork)
    {
      _unitOfWork = unitOfWork;
    }

    private static string GetKey(Application application) => Concat(application.Id, "_Example_Key");

    public void SetExample(Application application, List examples)
    {
      _cacheExample.Set(GetKey(application), examples, new TimeSpan(0, 15, 0));
    }
  }
}
{{< / highlight >}}

Output:

using System;
namespace Example.Controllers
{
  [ApplicationAccess]
  public partial class ExampleController : ExampleControllerBase
  {
    private readonly IUnitOfWork _unitOfWork;

    public ExampleController(IUnitOfWork unitOfWork)
    {
      _unitOfWork = unitOfWork;
    }

    private static string GetKey(Application application) => Concat(application.Id, "_Example_Key");

    public void SetExample(Application application, List<ExampleModel> examples)
    {
      _cacheExample.Set(GetKey(application), examples, new TimeSpan(0, 15, 0));
    }
  }
}

Inline code


After the twink is cooked, you add all the bung cookie times to the Monopoly,
the New Zealand version with Queen Street and stuff you've got yourself a meal.
`$npm install bootstrap --save-dev` Technology has allowed pretty suss blokes
to participate in the global conversation of beached as bottles of milk. Some
`<strong>HTML</strong>` in the mix!

Output:

After the twink is cooked, you add all the bung cookie times to the Monopoly, the New Zealand version with Queen Street and stuff you’ve got yourself a meal. $npm install bootstrap --save-dev Technology has allowed pretty suss blokes to participate in the global conversation of beached as bottles of milk. Some <strong>HTML</strong> in the mix!

Task list


- [ ] a task list item
- [ ] list syntax required
- [ ] incomplete
- [x] completed

Output:

  • a task list item
  • list syntax required
  • incomplete
  • completed

Alerts


Format

Alert types:

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
{{< alert [alert_type] "[title]" >}}
[message]
{{< /alert >}}

Success

{{< alert success "Well done!" >}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Primary

{{< alert primary "Ah primo cuz" >}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Secondary

{{< alert secondary "This is less interesting" >}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Danger

{{< alert danger "Aw stink!" >}}
Aww noo, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Warning

{{< alert warning "Ooo... careful" >}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Info

{{< alert info "Meh" >}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
{{< /alert >}}

Output:

Alert with markdown

The alert can render markdown by using the alternative shortcode % format:

{{% alert primary "This contains markdown" %}}
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

This is another paragraph with a [link](https://raygun.com) in it...
{{% /alert %}}

Output:

This is another paragraph with a link in it…

Video

YouTube

Format:

{{< youtube [YOUTUBE-VIDEO-ID] >}}

Example:

{{< youtube 499sSVkXIMo >}}

Output

Vimeo

Format:

{{< youtube [VIMEO-VIDEO-ID] >}}

Example:

{{< vimeo 112916362 >}}

Output


  1. the footnote text. ↩︎