Markdown beginner guide Code and Syntax Highlight
Learn how to create code and Syntax highlight using markdown language with an example.

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
- Inline code
- 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.