# Displaying code in Markdown

# Code listings in Markdown files

If you're writing technical documentation you may want a way to delineate blocks of code, sometimes known as a code fence. The result is also known as a code block.

# Creating a code block, aka code fence

The simplest way to show code is to wrap it between two lines consisting of 3 backticks in a row:

```
title: Welcome to Example.com
```

And the result would be:

title: Welcome to Example.com

You can get exactly the same effect by preceding each line of code with exactly 4 spaces.

# Highlighting code

You can highlight lines of code easily. Immediately after the three tickmarks (or any language specifier, explained in the next section), enclose the line numbers in curly braces. You can include ranges, and you can specify multiple expressions separated by commas.

For example, you'd use {5} to specify line 5, {12-17} to specify lines 12 through 17. The example below highlights lines 5 and 6, 12 through 17, and line 19:

# Markdown:

```javascript{5-6,12-17,19}
export function getLocalVueByMode (mode) {
  const localVue = createLocalVue()
  localVue.use(Router)

  // register global component
  localVue.component('OutboundLink', mockComponent('outbound-link'))

  // register page component in root route.
  localVue.component(i18nSiteData.pages[0].key, mockComponent('page-component'))
  localVue.component(simpleSiteData.pages[0].key, mockComponent('page-component'))

  // data mixin
  if (mode === 'i18n') {
    localVue.mixin(dataMixin(i18nSiteData))
  } else {
    localVue.mixin(dataMixin(simpleSiteData))
  }

  return localVue
}

# Result:

export function getLocalVueByMode (mode) {
  const localVue = createLocalVue()
  localVue.use(Router)

  // register global component
  localVue.component('OutboundLink', mockComponent('outbound-link'))

  // register page component in root route.
  localVue.component(i18nSiteData.pages[0].key, mockComponent('page-component'))
  localVue.component(simpleSiteData.pages[0].key, mockComponent('page-component'))

  // data mixin
  if (mode === 'i18n') {
    localVue.mixin(dataMixin(i18nSiteData))
  } else {
    localVue.mixin(dataMixin(simpleSiteData))
  }

  return localVue
}

# Vue code inside code blocks

If you're documenting Vue.js itself, see Escaping.

# Keyword highlighting for computer languages

Suppose you're documenting YAML. You could follow the 3 backticks with the word yaml to show it with keyword highlighting:

```yaml
title: Welcome to Example.com
```

The published result would show like this:

 title: Welcome to Example.com

Many, many languages are supported. Here are a few examples:

# bash

Markdown source:

```bash
echo hello, world.
```

Published result:

 echo hello, world.

# Javascript

Markdown source:

```js
document.write('hello, world.)
```

Published result:

  document.write('hello, world.)

# Markdown

Markdown source:

 ```markdown
  ### hello, world.
 ```

Published result:

### hello, world.

# Markdown (alternative)

Markdown source:

 ```md
  ### hello, world.
 ```

Published result:

### hello, world.

# Python

Markdown source:

```python
print("hello, world.")
```

Published result:

print("hello, world.")

# Languages with keyword highlighting support in VuePress

VuePress gets its keyword highlighting support through the Prism Javascript library.

Here are many of the most common ones.

Complete list can be found in the "languages" node of the PrismJS source file components.json.