CodeBlock

CodeBlock is a code highlighting component that uses prism for code and syntax highlighting.

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 '@stacks/ui';import { CodeBlock } from '@stacks/ui';

Usage


<CodeBlock
  code={`(define-map store ((key principal))
  ((v1 int)
   (v2 int))
)

(define-public (get-value (key principal))
    (match (map-get? store {key: key})
        entry (ok (get v2 entry))
        (err 0)))

(define-public (set-value (key principal))
    (begin
        (map-set store {key: tx-sender} {v1: 100, v2: 7})
        (ok true)))`}
  language="clarity"
  showLineNumbers
/><CodeBlock  code={`(define-map store ((key principal))  ((v1 int)   (v2 int)))(define-public (get-value (key principal))    (match (map-get? store {key: key})        entry (ok (get v2 entry))        (err 0)))(define-public (set-value (key principal))    (begin        (map-set store {key: tx-sender} {v1: 100, v2: 7})        (ok true)))`}  language="clarity"  showLineNumbers/>

Props

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

Name	Type	Default	Description
`code`	`string`		The source code you want to highlight.
`language`	`Language`	`clarity`	The language of the source code. See type definition.
`showLineNumbers`	`boolean`		If `true`, line numbers will be displayed to the left of the source code.

Search docs

⌘

On this page