MD Content Types
Posted Nov 2020
•
Updated Invalid Date
Just a friendly goto place for me to review all the MD types I use in this website
Hi all 👋
Just a boring page to review all the Markdown styles for this Nuxt website.
Markdown is a lightweight markup language that uses plain text formatting syntax, making it easy to write and read formatted documents.
Titles
How to write titles.
id
s are auto generated, so Boring Title, will beid="boring-title"
.In regular MD, If you'd like a custom id the do this →
# Boring Title {#boring}
.But in Nuxt Content you'll need to warp in brackets →
# [Boring Title]{#boring}
.
Boring H1 Title
# Boring H1 Title
Humdrum H2 Title
## Humdrum H2 Title
Dull H3 Title
### Dull H3 Title
Monotonous H4 Title
#### Monotonous H4 Title
Stale H5 Title
##### Stale H5 Title
Tiresome H6 Title
###### Tiresome H6 Title
Basic formatting
Input → **This is Strong Text**
Output → This is Strong Text
Input → *This is Emphasized Text*
Output → This is Emphasized Text
Input → ~~This is Strikethrough~~
Output → This is Strikethrough
Input → `This is code`
Output → This is code
Input → **`This`** ~~is **combo**~~ ***formatting***
Output → This
formattingis
combo
Blockquotes
> This is a *Blockquote*. Write > to use it
This is a Blockquote. Write
>
to use it
Input ↓
> Cruelty has a human heart,
> And Jealousy a human face;
> Terror the human form divine,
> And Secresy the human dress.
>
>> The human dress is forged iron,
>>
>>> The human form a fiery forge,
>>
>> The human face a furnace sealed,
>>
> The human heart its hungry gorge.
Output ↓
Cruelty has a human heart,
And Jealousy a human face;
Terror the human form divine,
And Secresy the human dress.The human dress is forged iron,
The human form a fiery forge,
The human face a furnace sealed,
The human heart its hungry gorge.
A Divine Image By William Blake
Lists
Ordered List
- Ordered list item
- Another ordered list item
- Indented item
- The First
- The Second
- Another indented item.
Additional text for indented item - Indented item
- Yet another ordered list item ^footnote.
Additional text for item
Unordered List
- Ordered list item
- Another ordered list item
- Indented item.
- Another indent
- The First
- The Second
- Another item in that indent
- Another indent
- Another indented item.
Love is all you need
Text for indented item - Indented item.
- Yet another ordered list item ^footnote.
!> Blockquote in a list
Code Snippets
Input ↓
```
This is a Preformatted tag (pre). Warp with ``` to use
```
Or just use a tab indent
Output ↓
This is a Preformatted tag (pre). Warp with ``` to use
Or just use a tab indent
CSS
Input ↓
```css
/* css comment */
p {
color: red;
}
```
Output ↓
/* css comment */
p {
color: red;
}
Javascript
Input ↓
```js
// js comment
export default {
props: {
showMeLove: { default: true },
}
};
```
Output ↓
// js comment
export default {
props: {
showMeLove: { default: true },
}
};
Images
In order to have the image caption right there should be 2 things:
Syntax ↓
![alt](src)
Input ↓
![Night Thoughts](/misc/night-thoughts.webp)
Output ↓
To add a nice looking subtitle
- No space between the image and the caption
- The caption should have an
*
, i.e be anem
tag
Input ↓
![Night Thoughts](/misc/night-thoughts.webp)
*Night Thoughts by William Blake, Watercolor*
Output ↓Night Thoughts by William Blake, Watercolor
Links
Visit my website Yonatan Kof.
Visit my website Yonatan Kof.
IDs to heading are being generate automatically, You can link to them like so, by referring to their id
Sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.
Tables
Syntax | Description |
---|---|
Header | Title |
Paragraph | Text |
Syntax | Description | Test Text |
---|---|---|
Header | Title | Here's this |
Paragraph | Text | And more |
Checkbox – MIA
Missing in Action is design for the Checkbox
It looks bad and right now I don't really know how to manipulate its CSS
-
Write the press release - Me not done
- Update the website
- Contact the media
Custom components
Add a Youtube Embed
Input option 1 ↓
::YouTubePlayer{videoId="Bwe5Msh75eY" title="'Night' by William Blake" desc="Some description"}
::
Input option 2 ↓
:::YouTubePlayer
---
videoId: Bwe5Msh75eY
title: 'Night' by William Blake
desc: Some description
---
:::
Output ↓