Code display components are an essential way to show various kinds of code on your website. To get started, drag the Code Display component to a page of your site. Click on the component to open the component options panel to the side of the editor. The two most important fields are the following:
- Code to Display - Enter the code you want to display in this field.
- Language - Enter the code language in this field; providing a language here ensures that the code is highlighted properly within the component. The field supports a large number of languages.
- Themes - With this option you can control the styling of code within the code display block, mimicking various themes found in IDEs and other coding programs.
Size & Position
Options found in this group control the overall size of the code block and its position.
- Width - With this option you control how the code block fills the full width of the component. By default it fills the full width, but you can select smaller proportions. To set this separately for large and small screens, click on the desktop/mobile icon.
- Align - If you’ve selected anything smaller than full as the width, then you can use this option to align the code block to the left, right, or center of the component.
Spacing
Under this group is an option to control the margin, or space, around the component itself. To set this separately for large and small screens, click on the desktop/mobile icon.