Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save martin12333/ac94865743717bd93a04ce89927d6841 to your computer and use it in GitHub Desktop.
Save martin12333/ac94865743717bd93a04ce89927d6841 to your computer and use it in GitHub Desktop.

Writing template strings in Markdown

With template strings coming to ES6, the backtick (`) means something in Markdown and in JavaScript. If you write this:

To display a message, write `alert(`hello world!`)`.

it'll render like this:

To display a message, write alert(hello world!).

So how can you mix ES6 template strings with Markdown?

Use double backticks

Markdown has always supported using multiple backticks as code delimiters. If you use two, or three, or four backticks to start a snippet of code, then any shorter sequences of backticks within that snippet are shown verbatim in the output.

For example, if you want the output to look like this: alert(`${color} alert!`)

just type: ``alert(`${color} alert!`)``

(In order to make the previous line look like that, I had to use triple-backticks. View source.)

Fenced code blocks are fine

In Github Flavored Markdown fenced code blocks, you don't have to do anything special at all. Template strings don't cause any problems there, though Github's syntax highlighting library doesn't seem to recognize them yet.

This Markdown:

```javascript
var headline = `${greetings}, ${location}${enthusiasm_level}`;
$("#post").html`
  <h1>${headline}</h1>
  ${body}
`;
```

looks like this:

var headline = `${greetings}, ${location}${enthusiasm_level}`;
$("#post").html`
  <h1>${headline}</h1>
  ${body}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment