CodeBlock

CodeBlock is a code highlighting component that uses prism for code and syntax highlighting. CodeBlock extends the Highlighter primitive component. This is the component that is used within these docs to display static and editable code.

Import

import
{
CodeBlock
}
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

CodeBlock extends the props of our Highlighter component, and Box component.

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