Markdown Fenced Code Blocks to HTML pre/code Tags
Convert Markdown fenced code blocks (```) to HTML <pre><code> tags. Learn about language hints, syntax highlighting classes, and indented code blocks.
Detailed Explanation
Fenced Code Blocks in Markdown
Fenced code blocks are one of Markdown's most important features for technical writing. They preserve whitespace and are typically rendered in a monospace font.
Basic Fenced Code Block
Wrap code in triple backticks:
```
function greet(name) {
return "Hello, " + name;
}
```
Converts to:
<pre><code>function greet(name) {
return "Hello, " + name;
}
</code></pre>
Language Specification
Add the language name after the opening backticks for syntax highlighting:
```javascript
const x = 42;
```
Converts to:
<pre><code class="language-javascript">const x = 42;
</code></pre>
The language-* class is used by syntax highlighting libraries like Prism.js and highlight.js to apply color coding.
Indented Code Blocks
The original Markdown syntax also supports code blocks via 4-space indentation:
var x = 1;
var y = 2;
This produces the same <pre><code> output but without a language class. Fenced blocks are generally preferred because they support language hints and are easier to read.
HTML Entity Encoding
Characters like <, >, and & inside code blocks are automatically converted to HTML entities (<, >, &), preventing them from being interpreted as HTML tags. This is essential for safely displaying code snippets that contain HTML.
Use Case
Code blocks are indispensable in technical documentation, API references, tutorials, and README files. The language class enables syntax highlighting on static sites, documentation generators, and CMS platforms that process Markdown to HTML.