Code Block

Available in:
Basic
Wireframing Premium
Wireframing Business
Enterprise
IdeaBoard Business

Code Blocks help teams to present technical ideas with clarity and structure. They preserve proper syntax and formatting, making it easy to share code snippets or commands during brainstorming sessions.

How to add a code block?

Hover over the 'add' icon on the board, locate 'Code Block,' and drag it onto the canvas.


Code Block.gif


Once the code block is added, just double-click and start adding your code snippet.


Code Block (4).gif


Change theme in a code block: The code block theme can be changed by using the 'Change Theme' option from the component toolbar.


Code Block (5).gif


Font settings in code block: Font settings such as font size, font family can be changed using the respective options in the component toolbar.


Code Block (1).gif


Code Language: By default, the code block has Javascript selected. You can change this anytime using the dropdown, which lists various options (such as Python, Java, HTML,CSS and more), so that the code syntax formatting is done accordingly.


Code Block (3).gif


Exporting the Code Block: You can export the code by using the 'Export' option in the advanced settings toolbar.


Code Block (2).gif



Additional options: You can also turn on/off these options inside the code block:

  1. line numbers
  2. code block title
  3. Auto-height - expand the code component as the code length increases.
  4. Line wrap
  5. Padding - Margin for your code block.

code block video.gif

Rate this article
great ok bad
For more questions - Contact Us
...