code-block from Forter Components
npm install @forter/code-blockDisplay themed syntax highlighted code in code block (JSON, HTML, CSS etc)
Extension of highlight component by Liron Goldenberg
\
``html
{ "message": "hello world" }
`
`html
code title
some text
{"a": "some code"}
{"string": "value", "null": null, "boolean": true, "number": 1, "array": [], "object": {} }
document.addEventListener('ftr:tokenReady', function(evt) {
var token = evt.detail;
// Retrieve the token sent to your back-end
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}
});
#!/bin/bash
echo "Enter your lucky number"
read n
case $n in
101)
echo echo "You got 1st prize" ;;
510)
echo "You got 2nd prize" ;;
999)
echo "You got 3rd prize" ;;
*)
echo "Sorry, try for the next time" ;;
esac
items:
- things:
thing1: huey
things2: dewey
thing3: louie
- other things:
key: value
code, pre {
color: var(--fc-code-block-text-color, white);
font-family: "Fira Mono", monospace;
font-size: 14px;
overflow: auto;
}
{"string": "value", "null": null, "boolean": true, "number": 1, "array": [], "object": {} }
fold example
{
"name": "Daniel",
"address": {
"city": "TLV",
"street": "Begin"
},
"age": 12,
"profile": {
"image": {
"url": "https:url.uk",
"alt": "profile image"
}
},
"test": false
}
pathsflag example
{
"name": "Daniel",
"address": {
"city": "TLV",
"street": "Begin"
},
"age": 12,
"profile": {
"image": {
"url": "https:url.uk",
"alt": "profile image"
}
},
"list": [
{
"id": 1,
"name": "Test Item 1",
"description": "Test",
"type": "type1",
"PropertyA": [
{ "PropertyB": "B" }
]
},
{
"id": 2,
"name": "Test Item 2",
"description": "Test",
"type": "type2",
"PropertyC": [
{
"PropertyD": "D"
}
]
}
],
"test": false
}
light theme example
{
"name": "Daniel",
"address": {
"city": "TLV",
"street": "Begin"
},
"age": 12,
"profile": {
"image": {
"url": "https:url.uk",
"alt": "profile image"
}
},
"test": false
}
override copy example
export secret_key=*
`
| Property | Attribute | Type | Default | Description |
|----------------------------|----------------|--------------------------------------------------|---------|--------------------------------------------------|
| codeNode | | any | | code element |content
| | content | string | | code language to highlight |errors
| | errors | any[] | | Array of numbers in ascending order, representing lines with errors |errorsContainerNode
| | | any | | errors container element |fold
| | fold | boolean | false | boolean value for displaying folded code content |language
| | language | "html" \| "bash" \| "javascript" \| "json" \| "css" \| "yaml" | | language of code block language |lineNumbersContainerNode
| | | any | | line numbers container element |linenumbers
| | linenumbers | boolean | false | boolean value for displaying line numbers |overridecopy
| | overridecopy | any | | String to override the copy text |pathsflag
| | pathsflag | any[] | | Array of json paths to be flagged in case of json lang |theme
| | theme | "dark" \| "light" | "dark" | theme of code block style |title
| | title | "example" | | title of code block |titleSlotElm
| | | any | | title slot element |
| Name | Description |
|------|--------------------------------------------------|
| | content to block. like {"a": {"b": 1, "c": null, "d": "a", "e": false, "f": true, "h": 0 }} |
| Property | Description |
|-------------------------------------------|--------------------------------------------------|
| --fc-code-block-background-color | value color. example: var(--fc-blue-gray-800), default: rgba(54, 67, 95) |--fc-code-block-function-color
| | value color. example: var(--fc-red-300), default: var(--fc-red-300) |--fc-code-block-null-color
| | null color. example: var(--fc-orange-300), default: var(--fc-orange-300) |--fc-code-block-primary-color
| | attr color. example: var(--fc-marine-300), default: var(--fc-marine-300) |--fc-code-block-secondary-color
| | tag color. example: var(--fc-green-300), default: var(--fc-green-300) |--fc-code-block-text-color
| | value color. example: white, default: white |--fc-code-block-topbar-background-color
| | value color. example: var(--fc-blue-gray-900), default: var(--fc-blue-gray-900) |--fc-code-block-topbar-color
| | value color. example: var(--fc-gray-500), default: var(--fc-gray-500) |--fc-code-block-variable-color
| | value color. example: var(--fc-gold-300), default: var(--fc-gold-300)` |