Markdown cheat sheet
Feb 10, 2024
3 min read
![](/_ipx/_/images/avatar.jpeg)
This blog is a static blog generator that uses markdown files to generate blog posts. It uses Nuxt-content under the hood.
Standard markdown features
You can use all standard markdown features such as: text formatting, images, links, code blocks, etc.
You should read the official markdown documentation to learn more about markdown.
Edit this file to see how it works.
Horizontal Rules
Emphasis
This is bold text
This is bold text
This is italic text
This is italic text
Strikethrough
Blockquotes
Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
...or with spaces between arrows.
Lists
Unordered
- Create a list by starting a line with
+
,-
, or*
- Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Very easy!
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- You can use sequential numbers...
- ...or keep all the numbers as
1.
Start numbering with offset:
- foo
- bar
Code
Inline code
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
Sample text here...
Nuxt-content provide code highlighting with shiki. You can specify the language of the code block to enable syntax highlighting: This is a paragraph with a code block:
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
It's also possible to display a code block with a specific file name:
export default () => {
console.log('Code block')
}
Tables
Option | Description |
---|---|
data | path to data files to supply the data that will be passed into templates. |
engine | engine to be used for processing templates. Handlebars is the default. |
ext | extension to be used for dest files. |
Right aligned columns
Option | Description |
---|---|
data | path to data files to supply the data that will be passed into templates. |
engine | engine to be used for processing templates. Handlebars is the default. |
ext | extension to be used for dest files. |
Links
Autoconverted link https://www.google.com
Youtube and Twitter embed
You can embed youtube videos and tweets in your markdown files.
Images
This is a paragraph with an image
Emojies
Classic markup: π π’ π π
Footnotes
Footnote 1 link1.
Footnote 2 link2.
Duplicated footnote reference2.
Advanced markdown features
You can use advanced markdown features such as graphs, mathematical formulas and custom components.
Graphs
You can use mermaid to create diagrams and flowcharts.
Here is an example of a basic flowchart:
Mathematical formulas
Centered formula
Using code block
Inline formula
This is an inline formula .
Frontmatter
It also supports frontmatter to add metadata to your markdown files.
---
id: "2"
title: "Use markdown power"
description: "Use markdown at its full potential."
date: "2024-02-09"
tags:
- markdown
cover: "doc/markdown.png"
---
id
is mandatory if you want to use the comment system. It is used to identify the article.title
anddescription
are used for SEO and social sharing. It's also used on the index page. Don't forget to fill them.date
is used to sort the articles. Date in the future will not be displayed.tags
are only used to display the tags on the article page. It's optional.cover
is used to display an image on the index page. It's also used when you share your article on social media. It's optional (it's however better to have one).
Custom components
On top of the standard markdown features, you can also use custom components with Vue.js to extend markdown features.
Read the custom components documentation to learn more.