Code Block

The Code Block app adds a field type for writing and storing code snippets. The field returns a JSON object holding the code, the selected language, the highlight states, the title, and the line number offset. Render that object with a syntax highlighter such as highlight.js or CodeMirror.

Features

• Write code in a dedicated editor field.
• Select the language of the snippet.
• Add a title to the snippet.
• Offset the first line number.
• Highlight individual lines with configurable states.

Setup

In the Block Library, select the block you want to edit, add a field, set its field type to Plugin, and set the custom type to storyblok-code-block.

The field takes the following optional options:

Option	Type	Description
enableTitle	Boolean	Shows the title input on the field.
languages	JSON	Array of language strings offered in the language selector.
enableLineNumberStart	Boolean	Shows the input that offsets the first line number.
highlightStates	JSON	Array of objects with a value and a color, used to highlight lines.

Further resources

Code Block source code on GitHub

Code Block in the app directory