Brightspot CMS User Guide

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:

  1. Place your cursor within the text where you would like to place the code block.
  2. Click image and select Code Block from the available choices.
  3. From the Code Block list, select Inline or Shared.
    • If you select Shared, click search 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:
      1. In the Title field, enter a title.
      2. From the Code Type list, select one of the available syntax highlighters.
      3. In the Code field, enter the code.
      4. If you want to annotate lines of code, do the following:
        1. Under Annotations, click add_circle_outline Add Annotation.
        2. From the Line Number list, select one of the available line numbers.
        3. In the Annotation field, enter text describing the selected line.
  4. 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.
  5. Click Save & Close.
Previous Topic
Embedding a callout
Next Topic
Embedding an HTML module
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News