Markdown tips

Headings

# h1 heading

## h2 heading

### h3 heading

#### h4 heading

##### h5 heading

###### h6 heading
1
2
3
4
5
6
7
8
9
10
11

Example

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Horizontal rule

---
1

Example


Emphasis

**Bold text**
_Italic text_
~~Strikethrough text~~
1
2
3

Example

Bold text

Italic text

Strikethrough text

Quotes

> Quotes can
>
> > be nested
1
2
3

Example

Quotes can

be nested

Lists

Unordered

- Lists
  - can be
    - indented
  - second level
1
2
3
4

Example

  • Lists
    • can be
      • indented
    • second level

Ordered

1.  It doesn't matter
1.  what number the line
1.  is prepended with
1
2
3

Example

  1. It doesn't matter
  2. what number the line
  3. is prepended with

Message containers

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a danger warning
:::
1
2
3
4
5
6
7
8
9
10
11

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
:::
1
2
3

Example

STOP

Danger, do not proceed

[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)
1
2
3
4
5
6
7
8
9
10
11

Example

External linkopen in new window

Link with titleopen in new window

Relative link

Relative link to a block

Relative link to a chapter

Relative link to a section

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')
1

Example

Alt text

Code

Inline

Inline `code` on the same line
1

Example

Inline code on the same line

Code block

```js
var foo = function (bar) {
  return bar++;
};
```
1
2
3
4
5

Example

var foo = function (bar) {
  return bar++;
};
1
2
3

Line highlighting in a code block:

```js{2,3}
const foo = bar => {
  bar++;
  console.log(bar);
};
```
1
2
3
4
5
6

Example

const foo = bar => {
  bar++;
  console.log(bar);
};

 
 

1
2
3
4

Emoji 🎉

:tada: :radio:
1

Example

🎉 📻

Vue components

In this project it is possible to use Vueopen in new window 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- *.md -->

<DoubleNumber />
1
2
3

Example

1

Tables

| Tables   |      Are      |  Cool |
| -------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is |   centered    |   $12 |
1
2
3
4

Example

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12