Markdown Kitchen Sink
Posted Aug 13, 2018 | 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:
- Money and the free rides
- Lies that you denied
- Calls you’ve been making
- 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”
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:
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:
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, Listexamples) { _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:
Well done!
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:
Ah primo cuz
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:
This is less interesting
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:
Aw stink!
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:
Ooo... careful
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:
Meh
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
-
the footnote text. ↩︎