Code block

Code blocks are blocks of text you can add to your assets. Brightspot formats code blocks according to the type of code you select. Code blocks can either be created as inline enhancements to only be used in a single asset, or they can be created as a shared enhancement to be used across many assets.

Creating code blocks

To create a code block:

Note

This topic shows how to create a shared code block; however, the steps to create an inline code block are nearly identical. To create an inline code block, click > Code Block in the rich-text editor toolbar, select Inline, and complete the fields in the table below.

1. In the header, click . By default, when you select to create a code block from this menu, you are creating a shared code block.
2. From the Create list, select Code Block.
3. Using the following table as a reference, complete the fields as needed.
4. Complete your site's workflow and publish the asset.

Code Block fields

Click each tab below to see a description of the associated fields.

Main

Field	Description
Internal Name	Enter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site.
Title	Enter a title. This title is not visible to the visitors to your site.
Code Type	Select the type of code block you are entering from the list of available programming languages.
Code	Enter the code as you would like it to display.
Annotations	You can add annotations to your code block to provide further clarity for your visitors. Click . Expand the LineNumber field and select the line of code to which you want to associate an annotation. Enter the annotation in the Annotation field. Annotations have the selected line highlighted in the code block, with the annotation appearing below the code block.

Analytics

The information on this tab presents a graphical or tabular representation of this asset's analytics. For information about configuring analytics ingestion and presentation, see Brightspot Analytics and Google Analytics.

Translations

Field	Description
Locale	Sets the content's locale. This setting can also be used to auto-localize content based on the users requested locale.

Note

On your site, code blocks have a Copy button to allow your visitors to copy the code in the code block and reuse it.

Code block embeds

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. From the rich-text editor's toolbar, select > Code Block.
2. Using the following table as a reference, complete the fields as needed.
3. Click Save & Close.

Field	Description
Code Block	Select Inline or Shared. See Inline vs. shared enhancements.
Title	Enter a title.
Code Type	Select the language of the code.
Code	Enter the code.
Annotations	Click Add Annotation, then select the line number and enter the annotation message.

Code Block Enhancement Styles

Field	Description
Preset	Select a style preset for this enhancement.
Choose Enhancement Alignment	Select an alignment for this list.
Collapsible State	Choose whether the code block is expanded by default (Expanded), collapsed by default (Collapsed), or turn off collapsible functionality (Disabled).
Hide Line Numbers	Toggle on to hide line numbers for readers. If your code block includes annotations, this setting is ignored and line numbers are rendered.
Vertically Scrollable	Toggle on to make the code block vertically scrollable after the specified number of lines.
Number of Lines Visible	The number of lines visible before the reader must scroll in the code block.