MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Fenced Code Blocks & Syntax Highlighting0%
Fenced Code Blocks & Syntax Highlighting
Beginner12 min read•Updated: Jul 11, 2026
For multi-line programming code, server configuration files, and terminal command sequences, Markdown provides Fenced Code Blocks. With modern syntax highlighters (like Prism.js, Highlight.js, and Shiki), fenced code blocks render colorized, readable code matching your favorite IDE.
Click to Zoom1. Fenced Code Block Syntax
To create a fenced code block, place three or more backticks (```) on a line before and after your code:
function calculateTotal(price, tax) { return price + (price * tax); } console.log(calculateTotal(100, 0.18));
- HTML Output:
<pre><code class="language-javascript">...</code></pre>
- Tilde Alternative: You can also use three or more tildes (
~~~) instead of backticks.
2. Popular Language Identifiers (Info Strings)
The word immediately following the opening triple backticks is the Language Identifier (or info string). Modern highlighters use this to tokenize and colorize keywords, strings, comments, and numbers:
| Language | Identifier | Example Usage |
|---|---|---|
| JavaScript | js or javascript | Frontend scripts, Node.js code |
| TypeScript | ts or typescript | Type definitions, interfaces |
| Python | py or python | Data analysis, machine learning |
| HTML | html | Web templates, markup snippets |
| CSS | css | Stylesheet rules, media queries |
| JSON | json | Configuration files, API responses |
| Bash / Shell | bash or sh | Terminal installation commands |
| SQL | sql | Database queries (SELECT, INSERT) |
| YAML | yaml or yml | GitHub Actions, Docker Compose |
| Markdown | markdown or md | Markdown examples |
3. Showing Terminal Commands (bash vs shell)
When writing documentation for terminal commands, write the commands cleanly so readers can copy-paste without errors:
Install packages
npm install express dotenv
Run development server
npm run dev
Pro Tip
Pro Tip (Omit the
$ Prompt): Avoid writing $ npm install inside copyable blocks. If a user clicks a "Copy Code" button, the leading $ will copy into their terminal and cause a command-not-found error!4. Nesting Code Blocks Inside Code Blocks
If you are writing a Markdown tutorial about Markdown, how do you show a fenced code block inside another fenced code block?
Rule: Use four backticks (````) for the outer fence, and three backticks (```) for the inner fence:
Here is how you write JavaScript in Markdown:
console.log("Hello, World!");
Interactive Quiz
Multiple Choice Questions
Question 1
Which delimiter is most commonly used to open and close a fenced code block?
Question 2
What purpose does the word immediately following the opening backticks (e.g. '```python') serve?
Question 3
Which HTML elements are produced by a fenced code block?
Question 4
How can you display a 3-backtick code block example inside another code block in a tutorial?
Question 5
Why should technical writers avoid prefixing copyable shell command lines with '$ '?
Next Lesson
Mathematical Notation with LaTeX / KaTeX
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Inline Code & Backtick Escaping Rules | Mathematical Notation with LaTeX / KaTeX |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.