DrawPRESENTATION OS
Start for free
← Help Center

Code Block

Display source code in a readable format.

How to use

  1. Paste code and choose the syntax language.
  2. Set theme, font size and line numbers.

Things to check

Code is displayed, not executed; do not put secret keys in a presentation.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

23 / 23

backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
code

Source code to display; this block does not execute it.

string
commentColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
fontFamily

Font family. Keep headings and body text consistent with the presentation typography.

string
fontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
headerBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
headerTextColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
highlightBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
highlightLines

Numbers of the code lines to highlight.

number[]
keywordColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
language

The syntax language used for code highlighting; this does not translate content.

string
lineNumberBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
lineNumberColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
padding

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
showCopyButton

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
showLineNumbers

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
stringColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
textColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
theme

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'dark' | 'light' | 'github' | 'monokai' | 'solarized'
title

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
wrapLines

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean