Skip navigation

Add code examples to content

In this tutorial, you will learn how to create a code example in Kentico Kontent and use it as a component in Rich text element.

Table of contents

    Add a content type for your code

    The first step is to create a content type that defines the code example itself:

    1. From the app menu, choose Content models .
    2. Click Create new.
    3. Type Code example in Content type name.
    4. Add a Text element for the code example.
    5. Add a Multiple choice element for the selection of programming languages.

    The result can look similar to what you see in the image below.

    A screenshot of a code example content type.

    Feel free to add as many programming languages as you like.

    Insert a code example into your text

    In the second step, you add code into one of your texts:

    1. From the app menu, choose Content & Assets .
    2. Open a content item that has a Rich text element.
    3. In the rich-text editor, position your cursor to where you want to add the code example.
    4. On the toolbar, click Insert... and then Insert new component .
    5. Choose Code example from the list of content types.

    You're now creating a new code example.

    Enter your code and select its programming language.
    After you finish typing the code, you can continue editing the parent content item.

    A screenshot of a component with code in a content item.

    Add code example logic in your application

    Finally, your developers need to implement logic in your web application so that the code example is correctly rendered within the text. See Dealing with structure in rich text to learn more.

    With the rendering working, you can use a syntax highlighter, such as PrismJSOpens in a new window, to make the code easier to read.

    What's next?