Markdown tips
Headings
# h1 heading
## h2 heading
### h3 heading
#### h4 heading
##### h5 heading
###### h6 heading
Example
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
Horizontal rule
---
Example
Emphasis
**Bold text**
_Italic text_
~~Strikethrough text~~
Example
Bold text
Italic text
Strikethrough text
Quotes
> Quotes can
>
> > be nested
Example
Quotes can
be nested
Lists
Unordered
- Lists
- can be
- indented
- second level
Example
- Lists
- can be
- indented
- second level
- can be
Ordered
1. It doesn't matter
1. what number the line
1. is prepended with
Example
- It doesn't matter
- what number the line
- is prepended with
Message containers
::: tip
This is a tip
:::
::: warning
This is a warning
:::
::: danger
This is a danger warning
:::
Example
TIP
This is a tip
WARNING
This is a warning
DANGER
This is a danger warning
You can also customize the title of the block:
::: danger STOP
Danger, do not proceed
:::
Example
STOP
Danger, do not proceed
Links
[External link](https://google.com)
[Link with title](https://google.com 'Title')
[Relative link](/lt/)
[Relative link to a block](/contribute/)
[Relative link to a chapter](/contribute/markdown-tips.md)
[Relative link to a section](/contribute/markdown-tips.md#message-containers)
Example
WARNING
Don't forget to close off relative links with a ´/´, otherwise you will get a 404.
Images
![Alt text](/icons/android-chrome-192x192.png 'Title')
Example
Code
Inline
Inline `code` on the same line
Example
Inline code
on the same line
Code block
```js
var foo = function (bar) {
return bar++;
};
```
Example
var foo = function (bar) {
return bar++;
};
Line highlighting in a code block:
```js{2,3}
const foo = bar => {
bar++;
console.log(bar);
};
```
Example
const foo = bar => {
bar++;
console.log(bar);
};
Emoji 🎉
:tada: :radio:
Example
🎉 📻
Vue components
In this project it is possible to use Vue components inside markdown
files
.vuepress/components/DoubleNumber.vue
<template>
<div class="doubler">
<h3>{{ number }}</h3>
<button @click="double">Double</button>
</div>
</template>
<script>
export default {
data() {
return {
number: 1,
};
},
methods: {
double() {
this.number = this.number * 2;
},
},
};
</script>
<style scoped>
.doubler {
text-align: center;
}
button {
color: #fff;
font-size: 1.2rem;
background-color: var(--c-brand);
padding: 1.5rem;
border: none;
}
</style>
<!-- *.md -->
<DoubleNumber />
Example
1
Tables
| Tables | Are | Cool |
| -------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
Example
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |