18c71b152b
* Update content * Create github-language-support.md * Add reminder HTML comments * Add link to supported languages article * Add intro for GitHub's products * Add note to list of CodeQL supported languages * table with package managers * Update table and add conceptual info * Versioning to fix broken links * Fix table layout * Add package managers to table * Fix versioning syntax * Incorporate reviewer feedback * Center table headers * Update Dependabot features in table * Add footnote for third-party code scanning support * Update link * support native markdown table alignments * Update links for ghes2.22 * Use proper names of package managers * Add Scala * Adjust conceptual info * Flip table axes * Delete unused reusables * Update link to Packages info * fix merge conflict * fix other merge conflict * Update codeql-languages-bullets.md * Revert "Update codeql-languages-bullets.md" This reverts commit 69547205f5e43a8fbf3edc51c89f0f647eef285a. * Update article topic to sentence case Co-authored-by: Sarah Schneider <sarahs@github.com>
53 lines
2.0 KiB
Markdown
53 lines
2.0 KiB
Markdown
---
|
|
title: Creating and highlighting code blocks
|
|
intro: Share samples of code with fenced code blocks and enabling syntax highlighting.
|
|
redirect_from:
|
|
- /articles/creating-and-highlighting-code-blocks
|
|
versions:
|
|
free-pro-team: '*'
|
|
enterprise-server: '*'
|
|
github-ae: '*'
|
|
---
|
|
|
|
### Fenced code blocks
|
|
|
|
You can create fenced code blocks by placing triple backticks <code>\`\`\`</code> 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.
|
|
|
|
<pre>
|
|
```
|
|
function test() {
|
|
console.log("notice the blank line before this function?");
|
|
}
|
|
```
|
|
</pre>
|
|
|
|
|
|
|
|
{% tip %}
|
|
|
|
**Tip:** To preserve your formatting within a list, make sure to indent non-fenced code blocks by eight spaces.
|
|
|
|
{% endtip %}
|
|
|
|
### Syntax highlighting
|
|
<!-- If you make changes to this feature, update /getting-started-with-github/github-language-support to reflect any changes to supported languages. -->
|
|
|
|
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](https://github.com/github/linguist) to perform language detection and to select [third-party grammars](https://github.com/github/linguist/blob/master/vendor/README.md) for syntax highlighting. You can find out which keywords are valid in [the languages YAML file](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml).
|
|
|
|
### Further reading
|
|
|
|
- [{% data variables.product.prodname_dotcom %} Flavored Markdown Spec](https://github.github.com/gfm/)
|
|
- "[Basic writing and formatting syntax](/articles/basic-writing-and-formatting-syntax)"
|