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.
: When using this directive, make sure you add the the following on top of your view:
You use the sf-area-code directive on top of the <textarea> element. The sf-area-code directive exposes the following attributes:
- Widget model property when using the attribute in a frontend view
- Widget designer controller scope property when using the attribute in a widget designer
|The text placeholder displayed before you start typing text inside the code area, for example, Enter code…
|Configures the behavior of the tabulation.
|Configures whether to display line numbers on the left.
|Configures whether to autocomplete closing bracket when typing an opening bracket.
Add a code area directive
Add the directive and its attributes in the widget designer view of the Embed code widget: