Markdown

Sep 11, 2020

2 min read

Link copied

Markdown beginner 
guide
 Code and Syntax Highlight

Learn how to create code and Syntax highlight using markdown language with an example.

Vasanth Jagadeesan

Enterprise solution architect

Imagine you're writing a technical document, you may need to describe block of code in many place. code blocks are the out of the box feature in markdown.

Markdown supports

1. Inline code
2. Blocks

Inline code
Anything that is enclosed within the back-tick are converted to inline code in markdown.

Declare `user` variable and assing `user = "vasanth"`

Output: Declare user variable and assing user = "vasanth"

Block
Anything that is enclosed within the back-tick by lines are converted to blocks code in markdown.

    ```javascript
    var s = "JavaScript syntax highlighting";
    alert(s);
    ```
    ```typescript
    const {id, name} = user;
    console.log(`User id: ${id} and name: ${name}`);
    ```
    ```python
    s = "Python syntax highlighting"
    print s
    ```

var s = "JavaScript syntax highlighting";
alert(s);

const {id, name} = user;
console.log(`User id: ${id} and name: ${name}`);

s = "Python syntax highlighting"
print s

Syntax Highlights are not supported by markdown out of the box, we need to include syntax highlight library to achieve this.

We can use PrismJS for syntax highlight. To add it in your site we can use below CDN links

<!-- Add this script tag before body end tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous"></script>

<!-- Add this link tag in head tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css" crossorigin="anonymous" />

Add copy to clipboard(Optional)

<!-- Add this script tag before body end tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" crossorigin="anonymous"></script>

<!-- Add this link tag in head tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/toolbar/prism-toolbar.min.css" />

Conclusion

We have seen how to use Code and Syntax highlight in markdown. We will learn about Tables, Blockquotes and HTML in markdown in upcoming series.
Subscribe and Share.