Display.code

Renders code within your Buttonize app with syntax highlighting.

Display.code(code, props)

Usage

4 collapsed lines
import { ButtonizeApp, Display } from 'buttonize/cdk'

new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Display.code('const message = "Hello, World!"', {
        language: 'typescript',
        title: 'Code Example',
        frame: 'code'
      })
    ]
  })

Preview

app.buttonize.io

Props

code

Required

string

The code to be rendered with syntax highlighting.

language

Required

string

The programming language of the code for proper syntax highlighting.

List of all available languages.

title

Optional

string

Optional title for the code block.

frame

Optional

’code’ | ‘terminal’ | ‘none’ | ‘auto’

Frame type for the code block. Default is 'code'.

spacingTop

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give above the component.

spacingBottom

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give below the component.

width

Optional

1 | 2 | 3 | 4

The width of the component.