Insert code samples to content (example)

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

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 models.
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 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.

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 Insert... and then Insert new component.
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.

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

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.

• Teach your app how to deal with structure in rich text so that it can display your code samples. After that you can sprinkle a bit of a syntax highlighter such as PrismJSOpens in a new window to make it more appealing.  
• Know when to use components instead of content items in rich text.
• Link your existing content together to build landing pages and more.