Code Block

A component used to display code snippets with optional line numbering and line highlighting.

Preview

main.js
function isRocketAboutToCrash() {
    // Check if the rocket is stable
    if (!isStable()) {
        NoCrash(); // Prevent the crash
    }
}

In this example, line numbers are displayed for lines 3 and 4. You can specify which lines to highlight using the format {3-4}.

Output Markdown

You can directly use the following syntax to create a code block with line numbers and highlight specific lines:

plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
    // Check if the rocket is stable
    if (!isStable()) {
        NoCrash(); // Prevent the crash
    }
}
```

Features

  • Language Title: You can use a title for each programming language to render an icon and display a title bar. For example : javascript:index.js
  • Line Numbers: Enable line numbers by adding showLineNumbers after the opening backticks.
  • Highlight Lines: Specify lines to highlight using curly braces (e.g., {3-4}).
  • Syntax Highlighting: Use the appropriate language for syntax highlighting.
  • Expandable : Allow users to expand and collapse long code blocks using Expandable

Language Support

LanguageTitle
javascriptjavascript:index.js
typescripttypescript:index.ts
jsx or tsxjsx:index.jsx
pythonpython:main.py
gogo:main.go
phpphp:index.php
rubyruby:main.rb
swiftswift:main.swift
kotlinkotlin:main.kt
htmlhtml:index.html
csscss:styles.css
sass or scsssass:styles.sass
sqlsql:database.sql
graphqlgraphql:database.gql
jsonjson:config.json
yamlyaml:config.yml
tomltoml:config.toml
dockerdocker:main.Dockerfile
nginxnginx:config.nginx
gitignoregitignore:.git
bashbash:install.sh
markdownmd:readme.md

Expandable Code

You can make code blocks expandable when they contain many lines of code. The component will show a collapsed view with a "See all N lines" button.

Usage

Add the Expandable keyword after the opening backticks:

markdown
```javascript:index.js Expandable
// Your long code here...
// Line 1
// Line 2
// ... many more lines
```

Example

long-file.js
function processData(data) {
    // Initialize result array
    const result = [];

    // Process each item in the data
    for (let i = 0; i < data.length; i++) {
        const item = data[i];

        // Transform the item
        const transformed = {
            id: item.id,
            name: item.name,
            value: item.value * 2,
            timestamp: new Date().toISOString()
        };

        // Add transformed item to result
        result.push(transformed);
    }

    // Return the processed result
    return result;
}

function validateInput(input) {
    if (!input) {
        return false;
    }

    if (typeof input !== 'object') {
        return false;
    }

    return true;
}

function formatOutput(data) {
    return JSON.stringify(data, null, 2);
}

module.exports = {
    processData,
    validateInput,
    formatOutput
};

Default Behavior

  • Default visible lines: 20 lines
  • Threshold: Code blocks with more than 20 lines will show the expandable button
  • Button text: Shows "See all N lines" (collapsed) or "Collapse" (expanded)
Edit this page

Last updated May 5, 2026