markdown code-blocks syntax-highlighting reference

Markdown Code Blocks Guide: Inline Code, Fenced Blocks, and Syntax Highlighting

The complete guide to Markdown code blocks. Learn inline code, fenced code blocks, syntax highlighting language identifiers, and indented code blocks.

W
WordToMD Team
·

Code formatting is one of Markdown’s strongest features. Whether you’re documenting a function, showing a terminal command, or writing a tutorial, Markdown code syntax keeps code visually distinct, properly formatted, and (on most platforms) syntax-highlighted. This guide covers everything about Markdown code blocks.

Inline Code

Wrap a short snippet or single expression in single backticks:

Use `console.log()` to print output.
Set the variable with `const x = 42;`.
The file is saved as `README.md`.

Inline code renders in a monospace font, visually distinct from surrounding text. Use it for:

  • Function and method names: addEventListener()
  • Variable names: isLoading
  • File names: package.json
  • Command arguments: --verbose
  • Short code expressions

If your inline code contains a backtick, use double backticks to wrap it:

`` `backtick inside` ``

Fenced Code Blocks

For multi-line code, use triple backticks (`) to open and close the block:

```
This is a code block.
It preserves all whitespace and line breaks.
No formatting is applied inside.
```

The indentation, spacing, and newlines are all preserved exactly.

Syntax Highlighting

Add a language identifier after the opening triple backticks to enable syntax highlighting:

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("World"))
```
```javascript
const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));
```
```bash
#!/bin/bash
echo "Hello, World!"
ls -la ~/Documents
```

Common Language Identifiers

LanguageIdentifier
Pythonpython
JavaScriptjavascript or js
TypeScripttypescript or ts
HTMLhtml
CSScss
JSONjson
YAMLyaml or yml
Bash / Shellbash or sh
SQLsql
Markdownmarkdown or md
Javajava
Cc
C++cpp
C#csharp
Gogo
Rustrust
Rubyruby
PHPphp
Swiftswift
Kotlinkotlin
Rr
PowerShellpowershell
Dockerfiledockerfile
XMLxml
TOMLtoml
HTTPhttp
Diffdiff

Indented Code Blocks

An older Markdown syntax uses 4-space indentation for code blocks:

    function oldStyle() {
        return "This is a code block";
    }

This is CommonMark-compatible but less readable and doesn’t support language identifiers. Use fenced blocks (triple backticks) instead.

Converting Code From Word Documents

Monospace text in Word (Courier New, Consolas, etc.) converts to inline code when you use WordToMD. Multi-line code in Word converts depending on how it was formatted:

  • Monospace font paragraph → May become multiple inline code snippets
  • Word “Code” style → Converts to a code block
  • Literal text block → May need manual fencing

After conversion, check code sections and add proper fencing if needed:

  1. Find code that should be a block
  2. Wrap it with triple backticks
  3. Add the appropriate language identifier

Language-Specific Examples

HTTP Requests

```http
POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer TOKEN

{
  "name": "Alice",
  "email": "alice@example.com"
}
```

Terminal Commands

```bash
npm install
npm run build
npm run dev
```

Diff Output

```diff
- const oldValue = "hello";
+ const newValue = "world";
  console.log(newValue);
```

YAML Configuration

```yaml
server:
  host: localhost
  port: 8080
  debug: true
database:
  url: postgresql://localhost:5432/mydb
```

Nested Code Blocks (for Documentation)

When documenting Markdown itself, use 4 backticks to wrap a block that contains 3 backticks:

````markdown
```python
# This is a code block inside documentation
```
````

Platform Support

PlatformInline CodeFenced BlocksSyntax Highlighting
GitHub
GitLab
Obsidian
GitBook
Notion
Confluence (Markdown)
VS Code

Line Numbers

Standard Markdown doesn’t support line numbers in code blocks. Some platforms and static site generators add this via plugins:

  • Prism.js (used by many SSGs) — add {numberLines: true} in the code fence
  • GitHub — no native line numbers in rendered Markdown (use GitHub Blame view instead)
  • GitBook — line numbers via code block settings

Copying Code from Blocks

GitHub and many platforms add a “Copy” button to code blocks automatically. This is a rendering enhancement — it doesn’t require anything special in your Markdown.

FAQ

Why isn’t my code block syntax highlighted? Either the language identifier is missing or misspelled, or the platform doesn’t support the specific language. Check the identifier list above.

How do I show backticks inside a code block? Inside a fenced code block, backticks are treated as literal characters. Only the three-backtick fence needs special handling.

My Word document had colorful syntax-highlighted code. Will WordToMD preserve the colors? No — Markdown code blocks don’t preserve color formatting. WordToMD converts the text to a code block; the syntax highlighting is then applied by the Markdown renderer based on the language identifier.

Can I highlight specific lines within a code block? Standard Markdown doesn’t support this. Some platforms (like Astro with Shiki, or Hugo) support line highlighting via comments: {1,3-5} after the language identifier.

Conclusion

Markdown code blocks are straightforward: backticks for inline code, triple backticks with a language identifier for blocks. After converting a Word document with WordToMD, check that monospace text has been correctly wrapped in code syntax, and add language identifiers for proper syntax highlighting on your target platform.