Adding code examples to your content

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

Table of contents

    Add a content type for your code snippet

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

    1. From the app menu, choose Content models {@icon-content-models@}.
    2. Click Create new.
    3. Type Code example as the content type’s 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.

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

    Insert a code example into your text

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

    1. From the app menu, choose Content & Assets {@icon-content-and-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... {@icon-plus-circle@} Insert new component {@icon-insert-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.

    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. If you're building a .NET application using the Delivery .NET SDK, see Structured rich text rendering to learn more.

    With the rendering working, you can use a syntax highlighter, such as PrismJS, to make the code in your code snippets easier to read.

    What's next?