Код

Поле для кода, раскрашенное в соответствии с его грамматикой. Оно идет в комплекте с symfony-coding и не связано с дизайн-системой, из которой лишь заимствует: его рамка соответствует полю, его цвета — это токены кода схемы, текущая строка и выделение — это нюансы схемы, — поэтому оно следует за светлой и темной темой, как все вокруг.

Поле сервера

Настоящее текстовое поле, поверх которого накладывается редактор, как только страница загружается. Текстовое поле остается полем — отправляется с формой, с ним взаимодействует стек форм — так что форма работает одинаково с ним или без него. Выделяйте несколько строк, курсорная строка среди них: выделение остается видимым.

JSON

{
  "name": "board",
  "services": ["php", "node"],
  "watch": true,
  "port": 8080
}

YAML

# The services an app runs
name: board
services:
  - php
  - node
watch: true
port: 8080

Python

def total(runs):
    # Only the runs that ended count
    return sum(run.items for run in runs if run.done)

Twig

{% for run in runs %}
    <li>{{ run.title }} — {{ run.items }}</li>
{% endfor %}

Поле Vue

Тот же редактор, который держит модель: v-model на входе и выходе, язык — это пропс, который может изменяться, пока поле открыто.