Creating and highlighting code blocks
Share samples of code with fenced code blocks and enabling syntax highlighting.
Who can use this feature?
Markdown can be used in the GitHub web interface.
In this article
Fenced code blocks
You can create fenced code blocks by placing triple backticks``` before and after the code block. We recommend placing a blank line before and after code blocks to make the raw formatting easier to read.
```function test() { console.log("notice the blank line before this function?");}```
Tip
To preserve your formatting within a list, make sure to indent non-fenced code blocks by eight spaces.
To display triple backticks in a fenced code block, wrap them inside quadruple backticks.
```````Look! You can see my backticks.```````
If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on GitHub. For more information, seeAbout writing and formatting on GitHub.
Syntax highlighting
You can add an optional language identifier to enable syntax highlighting in your fenced code block.
Syntax highlighting changes the color and style of source code to make it easier to read.
For example, to syntax highlight Ruby code:
```rubyrequire 'redcarpet'markdown = Redcarpet.new("Hello World!")puts markdown.to_html```This will display the code block with syntax highlighting:
Tip
When you create a fenced code block that you also want to have syntax highlighting on a GitHub Pages site, use lower-case language identifiers. For more information, seeAbout GitHub Pages and Jekyll.
We useLinguist to perform language detection and to selectthird-party grammars for syntax highlighting. You can find out which keywords are valid inthe languages YAML file.
Creating diagrams
You can also use code blocks to create diagrams in Markdown. GitHub supports Mermaid, GeoJSON, TopoJSON, and ASCII STL syntax. For more information, seeCreating diagrams.