A component used to display code snippets with optional line numbering and line highlighting.
Preview
main.js
functionisRocketAboutToCrash(){// Check if the rocket is stableif(!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
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
md: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)