Kontent.ai
Copyright © 2023 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create

Insert code samples into articles

Is this page helpful?
Complete and continue
  • Sign in
  • Jan Cerman
    4 minutes
    Components
    To embed code samples into your articles, you define the structure of the embedded content and then insert components based on that structure into your articles.

    Create a content type for code samples

    The first step is to create a content type with a text element for the code of the sample, together with a selector of the programming language the code uses. The programming language selector is important because you need to instruct your website or app how to display the code, especially what syntaxt highlighting to use.

    Elements in the content type

    For the code itself, use a text element and make it required. The programming language selector is best implemented using a multiple choice element: 
    1. Add an option for every language your content creators and developers use.
    2. Mark the element as required because every code sample uses some language.
    3. Set the element to display as radio buttons. 
      • Radio buttons allow only a single option to be selected, which makes sense because code samples usually use one language predominantly and need syntax highlighting for that language only.

    Insert code samples into your content

    When you have the content type for code samples defined, you can start adding samples to your articles:
    1. In Content & assets, open an article for editing.
    2. Place the cursor into a rich text element where you want to add a code sample.
    3. In the editor toolbar, click Insert... and then Insert new component.
    4. Select the content type for code samples.
    5. Fill in the elements. 
    What's next?
    Use taxonomies for bulk publishing
    As your content grows bigger, you benefit from organizing your content into smaller groups such as releases. You create these groups by tagging your content. You can then plan your releases, see what's scheduled for each release, and perform bulk operations like publishing or changing workflow.
    • Overview
    • Intro to content modeling
    • Creator’s role in content modeling
    • Before you model content
    • Create your first content model
    • Master content modeling
    • Master modular content
    • Master taxonomies
    • Master metadata
    • Get inspiration from others
    • Maintain your model
    • Content modeling checklist
    Code sample inserted as component in a content item.
    Content type for code samples
    Code sample component in a rich text element
    • “Missing” CMS features
    • Content formatting
    • Curated content
    • Link authors to articles
    • Forms
    • Streamline information
    • Displaying locations
    • Social media posts in articles
    • Code samples in articles
    • Bulk publishing with taxonomies
    • App configuration
    From single-use to re-useIf you later find another use for the content in your component, you can always convert it to a content item by clicking Reuse as content item. This conversion cannot be undone. If done by accident, archive the new item and create your component again.
  • Create a content type for code samples
  • Insert code samples into your content