Insert code samples into articles

Jan Cerman

4 minutes

Components

0% complete

To embed code samples into your articles, define the structure of the embedded content and then insert components

The first step is to create a content type with a text element for the code of the sample, together with a selector of the programming language the code uses. The programming language selector is important because you need to instruct your website or app how to display the code, especially what syntaxt highlighting

to use. For the code itself, use a text element and make it required. The programming language selector is best implemented using a multiple choice element

based on that structure into your articles.

:

Add an option for every language your content creators and developers use.
Mark the element as required because every code sample uses some language.
Select Limit to a single choice to display as a drop-down.
- Drop-downs allow only a single option to be selected, which makes sense because code samples usually use one language predominantly and need syntax highlighting for that language only.

When you have the content type for code samples defined, you can start adding samples to your articles:

In Content & assets, open an article for editing.
Place the cursor into a rich text element where you want to add a code sample.
In the editor toolbar, click and then .
Select the content type for code samples.
Fill in the elements.

Sign in

Create a content type for code samples

Elements in the content type

Insert code samples into your content

Code sample inserted as component in a content item.

Create a content type for code samples

Insert code samples into your content

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!

Content type for code samples

Code sample component in a rich text element

Use guidelines to make your content creators’ lives easierWe recommend adding guidelines to let your content creators know how to use the content type and whom to contact if they need to make some changes to it.