Markdown Code Blocks

A Markdown code block displays code exactly as written without interpreting Markdown formatting inside it.

Example

console.log("Hello World");

Markdown does not treat symbols like *, _, or # as formatting inside a fenced code block.

Code blocks are perfect for programming tutorials, GitHub README files, configuration files, API examples, command-line docs, SQL queries, HTML snippets, and JSON examples.

Code blocks improve readability and make technical documentation easier to understand.

Benefits

• Preserve formatting and indentation
• Display code exactly as written
• Support syntax highlighting in modern editors
• Easy to copy and paste
• Compatible with GitHub, VS Code, Obsidian, Discord, GitLab, and more

Whenever your example spans multiple lines, use a fenced code block instead of inline code.

Inline code

Use inline code for commands, filenames, variables, or short snippets within a sentence.

Run `npm install` before starting the project.

Output

Fenced code blocks

Use triple backticks when code spans multiple lines.

```bash
npm install
npm run dev

Use fenced blocks for programming examples, configuration files, scripts, API requests, SQL, JSON, and HTML templates.

Surround your code with three backticks on their own lines.

Hello World

Triple backticks create fenced code blocks, supported by GitHub, GitLab, VS Code, Obsidian, Discord, and most modern Markdown editors.

If you're new to Markdown overall, read Markdown Basics first — this page focuses only on code formatting.

Add a language name immediately after the opening triple backticks to enable syntax highlighting.

```javascript
const message = "Hello";
console.log(message);

GitHub, VS Code, GitLab, Obsidian, and many other editors colorize keywords, strings, numbers, and comments automatically.

**General syntax**

```markdown
```language
Your code here

Without a language identifier, the code still displays correctly but usually without highlighting.

The language identifier is the word written immediately after the opening three backticks.

Language	Identifier
JavaScript	javascript or js
TypeScript	typescript or ts
Python	python
Java	java
C	c
C++	cpp
C#	csharp
PHP	php
Go	go
Rust	rust
Ruby	ruby
Swift	swift
Kotlin	kotlin
SQL	sql
Bash	bash
Shell	sh
PowerShell	powershell
HTML	html
CSS	css
JSON	json
XML	xml
YAML	yaml
Dockerfile	dockerfile
Markdown	markdown

These are the most commonly used identifiers in GitHub documentation.

JavaScript

function greet(name) {
  console.log(`Hello ${name}`);
}

greet("MDConvertHub");

Python

def greet(name):
    print(f"Hello {name}")

greet("MDConvertHub")

HTML

<h1>Hello World</h1>
<p>Welcome to Markdown.</p>

CSS

.container {
  max-width: 900px;
  margin: auto;
}

JSON

{
  "name": "John",
  "age": 25
}

SQL

SELECT *
FROM users
WHERE active = true;

Bash

npm install
npm run dev

YAML (GitHub Actions)

name: Build
on:
  push:
    branches:
      - main

GitHub

GitHub supports fenced blocks and syntax highlighting in README files, Issues, Discussions, Pull Requests, and Wikis. Always use triple backticks and specify the language.

VS Code

VS Code highlights fenced blocks in Markdown preview. Press Ctrl+Shift+V (or Cmd+Shift+V on Mac) to preview while editing.

Obsidian

Obsidian uses CommonMark extensions. Fenced blocks with language identifiers work the same as on GitHub.

Discord

Discord supports fenced code blocks with syntax highlighting. Common identifiers include javascript, python, css, html, json, yaml, sql, and bash.

Markdown also supports indented code blocks — indent every line with four spaces.

    function hello() {
        console.log("Hello");
    }

Although valid, fenced code blocks are recommended because they support syntax highlighting and are easier to maintain.

When you need to show fenced code blocks inside another Markdown document, wrap the outer example with four backticks instead of three.

This prevents Markdown from closing the inner code block early.

Use four backticks on the opening and closing lines of the outer fence, with a normal triple-backtick block inside.

• Use fenced code blocks instead of indented blocks.
• Specify the programming language whenever possible.
• Keep examples short, focused, and tested.
• Use descriptive variable names.
• Keep indentation consistent — avoid mixing tabs and spaces.
• Separate different examples into individual code blocks.
• Use inline `code` for single commands like npm install inside sentences.
• Preview in the Markdown Editor before publishing.

Forgetting closing backticks

Every opening fence needs a matching closing fence with the same number of backticks.

Forgetting the language identifier

Prefer ```javascript over a plain ``` fence when highlighting is available.

Mixing tabs and spaces

Keep indentation consistent throughout the block.

Why syntax highlighting fails

Common causes: missing language identifier, unsupported language name, missing closing backticks, or a renderer that does not support highlighting.

README installation

npm install
npm run dev

API response

{
  "success": true,
  "message": "User created successfully",
  "id": 123
}

Dockerfile

FROM node:20
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

Code inside lists

Indent the fenced block under the list item. HTML inside a fence is shown as code, not rendered.

For tables with code snippets, see Markdown Tables — fenced blocks inside table cells are usually not supported; use inline `code` instead.

Continue learning Markdown with these guides:

Available now

• Markdown Basics — core concepts for beginners
• Markdown Cheat Sheet — quick syntax lookup
• Markdown Syntax — complete reference with examples
• Markdown Headings — document structure
• Markdown Paragraphs — blank lines and spacing
• Markdown Lists — ordered, unordered, and task lists
• Markdown Links — inline and reference links
• Markdown Images — syntax, URLs, and alt text
• Markdown Tables — rows, columns, and alignment
• Markdown Blockquotes — syntax, nesting, and GitHub callouts

Coming soon to MDConvertHub Docs

• Markdown HTML
• Markdown Footnotes
• Markdown Horizontal Rules

Practice in the Markdown Editor, then export with Markdown to HTML or Markdown to PDF when your documentation is ready.