docs/content/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks.md

title, intro, redirect_from, versions, shortTitle

title	intro	redirect_from	versions	shortTitle
Creating and highlighting code blocks	Share samples of code with fenced code blocks and enabling syntax highlighting.	/articles/creating-and-highlighting-code-blocks /github/writing-on-github/creating-and-highlighting-code-blocks /github/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks	fpt ghes ghae ghec * * * *	Create code blocks

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 %}

Tip: To preserve your formatting within a list, make sure to indent non-fenced code blocks by eight spaces.

{% endtip %}

To display triple backticks in a fenced code block, wrap them inside quadruple backticks.

````
```
Look! You can see my backticks.
```
````

{% data reusables.user-settings.enabling-fixed-width-fonts %}

Syntax highlighting

You can add an optional language identifier to enable syntax highlighting in your fenced code block.

For example, to syntax highlight Ruby code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

We use Linguist to perform language detection and to select third-party grammars for syntax highlighting. You can find out which keywords are valid in the languages YAML file.

{% if mermaid %}

Creating diagrams

You can use Mermaid syntax to add diagrams. For more information, see "Creating diagrams."

{% endif %}

Further reading

• {% data variables.product.prodname_dotcom %} Flavored Markdown Spec
• "Basic writing and formatting syntax"