Skip navigation

Insert code samples to content (example)

Jan Cerman

Learn how to model and insert code samples in Kentico Kontent.

Table of contents

    Create a content type for the code sample

    The first step is to create a content type for your piece of code.

    1. From the app menu, choose Content model.
    2. Click Create new.
    3. Type Code sample in Content type name.
    4. Add a Text element for the code itself.
      1. Name it Code.
      2. Make it required.
    5. Add a Multiple choice element for selecting the code's programming language.
      1. Name it Programming language.
      2. Add options for every programming language you want to support.
      3. Set the element to show its options as Radio buttons.
      4. Make it required.
    6. Click Save changes.

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

    Code sample content type.

    Insert code sample in your content

    When you have your code sample defined, you can add it in one of your texts as a component.

    1. From the app menu, choose Content & assets.
    2. Open a content item with a rich text element.
    3. In the rich text, place your cursor to where you want to insert your code.
    4. On the editor toolbar, click and then .
    5. Choose Code sample from the list of content types.
    6. Fill in the two elements.

    Your code sample now exists as a component within the item you're editing.

    From single-use to re-use

    If you later find another use for the content in your component, you can always convert it to a content item by clicking . This conversion cannot be undone. If done by accident, you can archive the new item and recreate your component.

    After you finish typing the code, you can continue editing the content item. All changes are saved automatically.

    Code sample inserted as component in a content item.

    What's next?

    You can create single-use code samples or reuse them in multiple places if needed. In any case, you need to make sure the code sample is displayed correctly within the text and add syntax highlight to improve readability.