Code Component

The Code component lets you present formatted code content to your learners.

This article provides an overview of the Code component, component setup and behavior, and examples of Code component configurations.

Component overview

The Code component lets you present formatted code content to your learners. The Code component can be configured to display code line numbers along the left-hand side.

The Code component is fully responsive and can be added to your Evolve course as a left-handed, full-width, or right-handed component.

Component set up

Follow these steps to add the Code component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Code component.
3. Click the Code component and select Add Left, Add Full,or Add Right.

Click the Edit Component icon on the newly added Code component to begin set up.

General section

In the General section:

Add Code Title, or a Code Display Title, as needed. Code Display Title is seen by learners.

Scroll down and add your Code Body. Use the text editor to style and format your text, as needed.

1. Add Code Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Code component that can display an icon and label prior to the Code component completion, which changes to a different icon and label once the Code component is completed.

Code section

In the Code section, you enter Code content to be presented to learners.

Component examples

Below are examples that illustrate the Code component setup:

Example 1 – displays the Code component with example of html-code content.

Example 2 - displays the Code component with example of html-code content and the setting Show Line Number enabled.

Appearance section

1. In the Appearance section, you select Code Language for correct formatting of your Code component. Options to select from are javascript, html, css, python, java, csharp, and php.
2. Select Code Style from the available themes docco, monokai, github, or tomorrowNight.
3. Toggle to Show Line Numbers. With this setting enabled, code line numbers will be shown along the left-hand side in the Code component.
4. Set Starting Line Number as needed.

Heads up!

Set Starting Line Number requires Show line Numbers to be enabled.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.