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

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 |