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
showLineNumbersafter 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
| Language | Title |
|---|---|
| javascript | javascript:index.js |
| typescript | typescript:index.ts |
| jsx or tsx | jsx:index.jsx |
| python | python:main.py |
| go | go:main.go |
| php | php:index.php |
| ruby | ruby:main.rb |
| swift | swift:main.swift |
| kotlin | kotlin:main.kt |
| html | html:index.html |
| css | css:styles.css |
| sass or scss | sass:styles.sass |
| sql | sql:database.sql |
| graphql | graphql:database.gql |
| json | json:config.json |
| yaml | yaml:config.yml |
| toml | toml:config.toml |
| docker | docker:main.Dockerfile |
| nginx | nginx:config.nginx |
| gitignore | gitignore:.git |
| bash | bash:install.sh |
| markdown | markdown:readme.md |
Published on Dec 14, 2024
