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 {2,3-5}.

Output Markdown

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

```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., {2,3-5}).
  • Syntax Highlighting: Use the appropriate language for syntax highlighting.

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
markdownmarkdown:readme.md

Published on Dec 14, 2024