Code

How to add and style code mockups.

The Code mockup is used to show a block of code in a box that looks like a code editor.

Location in the Parts Library: Base Parts > Mockups > Code

Example Code Mockups

Editing the Code Part

Editing Content in the Code Part

The code part is made up of text parts.

Select the text part to replace the placeholder text with your own, then go to the Text Editor in the right menu. There you can replace the value with the text you'd like to see.

Changing Colors of the Code Part

To change the color of the three dots at the top of the code part, go to Colors in the property editor panel, then change the foreground color to your preferred color. Please note that changing the foreground color will also change the color of any text within the code part if that text has not had a color applied to it.

To change the color of the text, select the text part, go to Colors in the property editor panel, then change the foreground color to your preferred color.

To change the background color of the code part, select the code part, go to Colors in the property editor panel, and then change the background color to your preferred color.

In the example video below, a code part from the Parts Library has been added to a canvas. The background and foreground colors have been changed. Text lines have been duplicated and edited, and a background color applied to one of the lines of text. Click the play button to view.

Changing the Colors of Code Parts

Related Information

Text

Customizing and formatting