Code
How to add and style code mockups.
Last updated
Was this helpful?
How to add and style code mockups.
Last updated
Was this helpful?
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
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.
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.
The code part is made up of parts.
To change the 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.
Text
Customizing and formatting
