1
0
mirror of synced 2025-12-21 10:57:10 -05:00
Files
docs/content/github/writing-on-github/creating-and-highlighting-code-blocks.md
Jason Etcovitch caaee7a124 Update all files to use {% data %} (#15253)
* Add back changes from prior to purge

* Manually fix some invalid Liquid

* Updoot render-content

* Improve test messages to show correct output

* Run el scripto

* Pass the remaining test
2020-09-29 16:01:04 -04:00

1.8 KiB

title, intro, redirect_from, versions
title intro redirect_from versions
Creating and highlighting code blocks Share samples of code with fenced code blocks and enabling syntax highlighting.
/articles/creating-and-highlighting-code-blocks
free-pro-team enterprise-server
* *

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?");
}
```

Rendered fenced code block

{% tip %}

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

{% endtip %}

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
```

Rendered code block with Ruby syntax highlighting

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.

Further reading