How to create and highlight GitHub code blocks
Post GitHub fenced code blocks, language identifiers, and nested fences via gh --body-file, then prove stored markers with gh issue view --json.
What this covers
Creating and highlighting code blocks is about fenced samples and syntax highlighting in GitHub Markdown. Paste into a comment or .md file and use Preview. Diagram fences reuse the same pattern on the Creating diagrams page.
flowchart LR
Backticks["Fenced Backticks (```)"] --> Lang["Language Identifier (ts, py, json)"]
Lang --> Content["Code Block Body"]
Content --> Highlighting["Syntax Highlighting & Copy Button"]Fenced code blocks
Place triple backticks before and after the sample. Blank lines around the fence make the raw Markdown easier to read in the editor.
```function test() { console.log("notice the blank line before this function?");}```Show backticks inside a fence
To display triple backticks inside a fenced block, wrap them in a quadruple-backtick fence:
```````Look! You can see my backticks.```````If you edit snippets and tables often, enable a fixed-width font under Settings → Appearance (About writing and formatting on GitHub).
Syntax highlighting
Add an optional language identifier on the opening fence. Highlighting changes colors and styles so the sample is easier to scan.
Ruby example from the docs:
```rubyrequire 'redcarpet'markdown = Redcarpet.new("Hello World!")puts markdown.to_html```GitHub uses Linguist for language detection and third-party grammars. Valid language keywords are listed in Linguist's languages.yml.
| Goal | What to put on the opening fence | Notes |
|---|---|---|
| Plain preformatted block | ``` with no tag | No coloring |
| Highlighted source | ```ruby, ```js, ```python, … | Must match a Linguist keyword |
| GitHub Pages + Jekyll | lower-case language id | Required for Pages highlighting |
| Nested literal fences | outer ``` ` count higher than inner | Docs show quadruple wrapping triples |
Diagrams via code blocks
The same fence pattern can hold Mermaid, GeoJSON, TopoJSON, or ASCII STL when you set the matching language tag. Details and full examples: Creating diagrams.