Code area directive

The sf-code-area directive marks a text area as a code section and sets its attributes. You use the directive on top of your widget or designer view, so that custom widget code is displayed and styled in a specific way, for example, in the widget designer.

The sf-code-area directive is based on the CodeMirror text editor for code, version 2.18. For more information, see the official website of CodeMirror.

IMPORTANT: When using this directive, make sure you add the the following on top of your view:
  • @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
  • @Html.CodeMirrorScriptReferences()


You use the sf-area-code directive on top of the <textarea> element. The sf-area-code directive exposes the following attributes:

Attribute Description

Specific property, to which to bind the code section contents. It is a property of the widget model, which is serialized in the widget designer JavaScript code.
For example:

  • Widget model property when using the attribute in a frontend view
  • Widget designer controller scope property when using the attribute in a widget designer
placeholder  The text placeholder displayed before you start typing text inside the code area, for example, Enter code… 
sf-type  The programming language, for example, JavaScript.
sf-tab-mode  Configures the behavior of the tabulation.
sf-line-numbers Configures whether to display line numbers on the left.
sf-match-brackets  Configures whether to autocomplete closing bracket when typing an opening bracket.

Add a code area directive

Following is an example how to add the sf-area-code directive in the JavaScript code of the widget designer view of an Embed code widget. For more information, see Embed code widget.

Add the directive and its attributes in the widget designer view of the Embed code widget:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.


Was this article helpful?