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.

TIP

There are too many languages to make an exhaustive list here, but you can find them in the PrismJS source file components.json under languages.

Here are many of the most common ones.

LanguageTag
Applecriptapplescript
Asciidocasciidoc
ASP.NETaspnet
batch filesbatch
CSScss
Gogo
HTTPhttp
Javajava
Javascriptjs
JSONjson
Markupmarkup
Markdownmarkdown
Markdownmd
Objective-Cobjectivec
PHPphp
Powershellpowershell
Pythonpy
Rubyruby
SASSsass
SQLsql
Swiftswift
VB.NETvbnet
Vimvim
Wikiyaml

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