---
title: "Code Block"
slug: "code-block"
description: "Configure the Code Block Form Control to view, edit, and validate code or configuration snippets with syntax highlighting in a Form."
updated: 2026-06-08T19:21:14Z
published: 2026-06-08T19:21:14Z
canonical: "documentation.decisions.com/code-block"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Block

---

## Overview

| Feature Details |
| --- |
| **Introduced in Version** | 9.17 |
| **Modified in Version** | --- |
| **Location** |  |

The Code Block Form Control provides an inline code editor/viewer powered by the Monaco Editor. It allows users to view, edit, and validate code or configuration snippets directly within a Form, without leaving the Decisions interface.

This control supports syntax highlighting for common languages such as JavaScript, C#, HTML, JSON, SQL, and CSS, as well as user-defined languages using customizable keyword, operator, and variable patterns. Font size and line numbering can be adjusted for readability, creating a more intuitive editing experience.

The Code Block is particularly useful for building developer-facing or configuration-driven Forms where code, expressions, or formulas are entered or reviewed as part of a workflow. It enables organizations to safely capture and display script logic, custom rules, or data transformation expressions in a structured and readable format.

---

## Example

### Predefined Language

1. Drag a Code Block control onto the Form.
2. In Code Settings, set:
  1. Font Size = 16
  2. Show Line Numbers = checked
  3. Language = JavaScript
3. Set Input to Static and provide the following text:

```javascript
function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();
```
4. Drag a second  Code Block control onto the Form.
5. In Code Settings, set:
  1. Font Size = 16
  2. Show Line Numbers = checked
  3. Language = CSS
6. Set Input to Static and provide the following text:

```css
body {
  background-color: #f5f5f5;
  color: #333;
}
```

### Define a Custom Language

Defining a language exposes [Monaco Editor](https://microsoft.github.io/monaco-editor/monarch.html) settings. The properties are applied in the Tokenizer in the following order: Keywords, Operators, Variables. Therefore the Regex must be applied carefully in some cases.

1. Drag a third Code Block control onto your Form.
2. In Code Settings, set:
  1. Font Size = 16
  2. Show Line Numbers = checked
  3. Enable Define Language and configure the following:
    1. Defined Language ID = MyCustomLang
    2. Keywords = IF THEN ELSE SUM AVG ROUND
    3. Operators = + - * / = < >
    4. Variables = Price Quantity Discount
3. Provide a Static Input, and enter the following text:

```custom
IF(Price * Quantity > 100, ROUND(SUM(Price, Discount), 2), AVG(Price, Discount))
```

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1780503992504.png)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1780504157744.png)

### Code Block Properties

| Property | Description |
| --- | --- |
| Font Size | Sets the size of the text within the code editor (in pixels). |
| Show Line Numbers | When checked, displays line numbers along the left edge of the editor for easier code navigation. |
| Language | Selects the syntax highlighting language. Common options include JavaScript, C#, HTML, JSON, SQL, XML, Python, and others. The selected language determines the colorization and keyword recognition applied to the editor. |
| Define Language | When enabled, allows creation of a custom syntax definition. |
| Dynamic Defined Language | The control will expose the definitions below within the Flow instead of a defining the language within the Form Designer. |
| Defined Language ID | A unique identifier for the custom language definition. Required when defining a new language. |
| Regex for Keywords | Regular expression pattern used to detect keywords within the text. |
| Keywords | A list of space-separated words to highlight as language keywords (e.g., if else for return). |
| Keyword Color | Sets the color used to display matched keywords. |
| Regex for Operators | Defines which symbols or operator patterns (e.g., +, -, =, <, >) should be detected and highlighted. |
| Operators | A space-separated list of operator strings to highlight. |
| Operator Color | Color applied to operator matches. |
| Regex for Variables | Defines how variable names are detected. Common pattern: [a-zA-Z_][a-zA-Z0-9_]*. |
| Variables | A list of variable names to highlight. |
| Variable Color | Color applied to variables in the editor. |

If lists (Keywords, Operators, Variables) are not provided, the editor will rely entirely on the defined Regex to determine matches.

---

## Feature Changes

| Description | Version | Release Date | Developer Task |
| --- | --- | --- | --- |
| Code Block Control | [9.17](https://documentation.decisions.com/v99/docs/version-917x-release-notes) | November 2025 | [DT-045640] |