Code·13 / 19

Code Blocks

Display multi-line code with syntax highlighting.

Code Blocks

Code blocks display multiple lines of code with proper formatting and optional syntax highlighting.

Fenced Code Blocks

Use triple backticks to create a code block:

\`\`\`
function hello() {
  console.log("Hello, World!");
}
\`\`\`

Syntax Highlighting

Add the language name after the opening backticks:

\`\`\`javascript
const name = "Markdown";
console.log(`Hello, ${name}!`);
\`\`\`

Common Language Identifiers

LanguageIdentifier
JavaScriptjavascript or js
TypeScripttypescript or ts
Pythonpython or py
HTMLhtml
CSScss
Bash/Shellbash or sh
JSONjson
Markdownmarkdown or md

Indented Code Blocks

You can also create code blocks by indenting with 4 spaces:

    function hello() {
        return "world";
    }

⚠️ Fenced code blocks (with backticks) are preferred over indented code blocks.

Best Practices

  • Always specify the language for syntax highlighting
  • Keep code blocks focused and short
  • Add comments in your code for clarity

💡 Code blocks are essential for documentation, tutorials, and README files!

Practice

Markdown Input
Live Preview

Code Block Practice

function greet(name) {
  return "Hello, " + name + "!";
}
def greet(name):
    return f"Hello, {name}!"
<h1>Hello, World!</h1>
<p>This is HTML.</p>