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

Add a content type for your code snippet

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

  1. From the app menu, choose Content models.
  2. Click Create new.
  3. Type Code snippet 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 snippet 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.
  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 snippet.
  4. On the toolbar, click Insert... > Insert new component.
  5. Choose Code snippet from the list of content types.

You're now creating a new code snippet.

Enter your code example and select its programming language.

After you finish typing the code, you can continue editing the parent content item.

Add code snippet logic in your application

Finally, your developers need to implement logic in your web application so that the code snippet 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?

Did this answer your question?