Highlighter

Highlighter is a base component for code highlighting that uses prism for syntax highlighting. You will typically want to use the CodeBlock rather than using this underlying highlighter component.

Import

import
{
Highlighter
}
from
'@blockstack/ui'
;

Usage

Preview
01
(
define-map
store
(
(
key
principal
)
)
02
(
(
v1
int
)
03
(
v2
int
)
)
04
)
05
06
(
define-public
(
get-value
(
key
principal
)
)
07
(
match
(
map-get?
store {key: key}
)
08
entry
(
ok
(
get
v2 entry
)
)
09
(
err
0
)
)
)
10
11
(
define-public
(
set-value
(
key
principal
)
)
12
(
begin
13
(
map-set
store {key: tx-sender} {v1: 100, v2: 7}
)
14
(
ok
true
)
)
)
Editable example

Props

NameTypeDefaultDescription
codestringThe source code you want to highlight.
languageLanguageclarityThe language of the source code. See type definition.
showLineNumbersbooleanIf true, line numbers will be displayed to the left of the source code.
On this page