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:
- From the app menu, choose Content models .
- Click Create new.
- Type Code example in Content type name.
- Add a Text element for the code example.
- 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 code into one of your texts:
- From the app menu, choose Content & Assets .
- Open a content item that has a Rich text element.
- In the rich-text editor, position your cursor to where you want to add the code example.
- On the toolbar, click Insert... and then Insert new component .
- 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. 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.