Markdown Code Blocks and Syntax Highlighting
Add fenced code blocks with a language for syntax highlighting, plus inline code, in Markdown.
Direct answer
Wrap a block of code in triple backticks and put the language right after the opening fence, like ```js, to turn on syntax highlighting. Use single backticks for inline code inside a sentence. Preview it live so you can confirm the language tag highlights the code the way you expect.
Open the Markdown EditorWhen to use this
- You are adding code to a README, issue, or docs page.
- You want colored syntax highlighting instead of a plain gray block.
- You need to show a command or a filename inline in a sentence.
Steps
- Open a code block with three backticks on their own line.
- Write the language name immediately after the opening backticks, such as js, python, or bash.
- Paste the code, then close the block with three backticks on a new line.
- For a short snippet inside a sentence, wrap it in single backticks instead.
- Preview to confirm the language highlights the code correctly.
Example
Run `npm run build` before you deploy.
```python
def greet(name):
return f"Hello, {name}!"
```
```bash
git commit -m "feat: add editor guides"
```Run npm run build before you deploy. (npm run build shown in a monospace pill)
def greet(name): (Python, keywords colored)
return f"Hello, {name}!"
git commit -m "feat: add editor guides" (Bash, colored)Common mistakes
- The language tag goes on the same line as the opening backticks, with no space: ```js not ``` js.
- Use triple backticks, not indentation, so the language highlighting turns on.
- To show literal backticks as inline code, wrap them in a longer run of backticks, such as double backticks.
FAQ
- How do I turn on syntax highlighting in Markdown?
- Add the language name right after the opening triple backticks, for example ```python or ```js. Renderers like GitHub use that tag to color the code.
- What is the difference between inline code and a code block?
- Inline code uses single backticks around a short snippet inside a sentence. A code block uses triple backticks on their own lines and can hold many lines with highlighting.
- Which languages are supported for highlighting?
- Common tags include js, ts, python, bash, json, yaml, html, css, sql, and many more. If a language is unknown, the block still renders as plain monospaced code.
Related Markdown editor guides
Markdown Syntax Cheat Sheet
A copy-ready Markdown cheat sheet covering headings, bold, italics, lists, links, images, code, tables, and blockquotes.
How to Write a README in Markdown
Structure a clear README.md with a title, badges, install and usage sections, and a live preview before you commit.
Markdown Table Syntax
Write Markdown tables with pipes and dashes, set column alignment, and keep them readable in the editor before you paste.
Markdown for GitHub Comments
Format GitHub issue and pull request comments with task lists, code blocks, mentions, and collapsible sections.
Markdown Editor With Live Preview Online
Edit Markdown on the left and see the rendered result on the right in real time, with no login and browser-only drafts.
How to Add Links and Images in Markdown
Add inline links, reference links, and images in Markdown, including titles and clickable image links.
Markdown Task List and Checkboxes
Create checkbox task lists in Markdown for READMEs, GitHub issues, and personal to-do notes with live preview.