Embedding a code block
You can embed blocks of code into the rich-text editor. The code block displays in a different font from the font for your body text and includes syntax highlighting. Code blocks also include a Copy button on the front end of your site to allow your visitors to copy your code samples for their own use.
To embed a code block:
- Place your cursor within the text where you would like to place the code block.
- Click and select Code Block from the available choices.
- From the Code Block list, select Inline or Shared.
- If you select Shared, click and locate the shared code block in the content picker. (For information about creating a shared code block, see Creating a code block .)
- If you select Inline:
- In the Title field, enter a title.
- From the Code Type list, select one of the available syntax highlighters.
- In the Code field, enter the code.
- If you want to annotate lines of code, do the following:
- Under Annotations, click Add Annotation.
- From the Line Number list, select one of the available line numbers.
- In the Annotation field, enter text describing the selected line.
-
Expand Code Block Enhancement Styles, and from the Preset list, select one of the following:
- None— aligns the module within the body text using your theme's settings.
- Custom—Complete the following fields as needed:
- Choose enhancement alignment—Select an alignment. See Enhancement alignment for more information on enhancement placement.
- Collapsible—Select from the following options:
- Expanded—Displays the code block in its expanded state (default). This option provides a Collapse control for readers to collapse the code block.
- Collapsed—Displays the code block in its collapsed state. This option provides an Expand control for readers to expand the code block.
- Disabled—Displays the code block in its expanded state. This option does not provide the option to collapse the code block.
All options provide a Copy button to allow readers to copy the contents of the code block onto their clipboard.
- Hide Line Numbers—Toggle on to hide line numbers from your code block on the front end. If your code block has annotations, ignores this setting and renders the line numbers.
- Vertically Scrollable—Toggle on to enable vertical scrolling if the code block is longer than the number of lines in the Number of Lines Visible field.
- Number of Lines Visible—Enter the maximal number of visible lines above which vertical scrolling is available.
- Click Save & Close.