Feature - Code

Display code snippets in pre-formatted blocks with preserved whitespace and indentation

The Code feature lets content editors paste code snippets that are displayed in a pre-formatted block on the page. The code is rendered inside <pre><code> tags, which preserves whitespace, indentation, and line breaks exactly as entered.

This is particularly useful for documentation pages, tutorials, and developer-facing content where showing actual code examples is essential. Every feature page in UmBootstrap uses a Code block at the bottom to show the Razor view source.

The view wraps the featurePropertyFeatureCode textarea content in <pre><code> tags. Unlike the HTML feature which uses Html.Raw(), the Code feature outputs the content as plain text — HTML tags and special characters are escaped automatically by Razor, so the code is displayed rather than executed.

The feature composes featureComponentCode which provides a single textarea property. Combined with the standard feature title composition, editors can label each code block with a filename or description.

The strongly-typed ModelsBuilder property is Model.Content.FeaturePropertyFeatureCode. Because Razor escapes the output by default, no special sanitisation is needed.

@{
    // Example: Reading feature settings
    bool hasSettings = Model.Settings != null;
    string colorLabel = null;

    if (hasSettings)
    {
        var backgroundColour = Model.Settings
            .Value<ColorPickerValueConverter.PickedColor>
            ("featureSettingsColourPicker");
        colorLabel = backgroundColour?.Label;
    }
}

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<FeatureCode>>

@{
    Layout = "_Layout_Features.cshtml";
}

<pre><code>@Model.Content.FeaturePropertyFeatureCode</code></pre>

Feature - Code

What It Does^#

How It Works^#

Example: Reading Feature Settings^#

On this page

featureCode.cshtml^#