Цвет и ASCII в постах

Николай Носков 3 мин

Цвета задаются не хексами, а именами: конкретный оттенок берётся из текущей темы. Переключите тему в строке статуса — и весь пост перекрасится вместе с ней.

Цвет в тексте

Запись :имя[текст] красит кусок строки. Доступны девять имён:

  • red — :red[текст]
  • orange — :orange[текст]
  • yellow — :yellow[текст]
  • green — :green[текст]
  • cyan — :cyan[текст]
  • blue — :blue[текст]
  • purple — :purple[текст]
  • pink — :pink[текст]
  • dim — :dim[текст], приглушённый текст

Внутри работает обычная разметка: жирный и код. Вместо короткой записи можно писать HTML: <span class="c-red">текст</span>.

Что не станет цветом: время 10:30, config:prod и любое неизвестное имя вроде :foo[текст] — такой текст остаётся как есть. Внутри цветного куска ] пишется как \], а обратный слэш — как \\. Вне цветных кусков оба символа пишутся как обычно, поэтому /\_/\ трогать не нужно.

Цвет стоит беречь для акцентов: длинный абзац пастельным цветом на тёмном фоне читать тяжело, поэтому основной текст всегда цвета text.

Блок ASCII

Арт пишется в блоке кода с языком ascii. Пробелы сохраняются, шрифт моноширинный, внутри работает та же запись цвета:

```ascii alt="Кот"
   /\_/\
  ( :yellow[o].:yellow[o] )   :dim[мяу]
   > :pink[^] <
  :purple[~~~~~~~~~~~]
```

Результат:

  • alt="…" — описание для скринридеров. Без него арт для них скрыт, как декоративный.
  • Внутри блока работает только запись цвета: markdown, ссылки и подсветка кода не разбираются.
  • Весь блок получает в гаттере один номер строки, а не по строке на каждую строку арта.

Эффекты

Слово после ascii включает анимацию: wave пускает по символам градиент из цветов темы, pulse плавно гасит и зажигает арт, blink мигает им, как курсором.

Кадры и скорость

Строка %% делит арт на кадры, fps=N задаёт скорость — от 1 до 30, по умолчанию 6. Кадры могут быть разной высоты: короткие дополняются пустыми строками, чтобы блок не дёргался.

```ascii fps=4 alt="Кот моргает"
   /\_/\
  ( :yellow[o].:yellow[o] )
   > :pink[^] <
%%
   /\_/\
  ( :yellow[o].:yellow[o] )
   > :pink[^] <
%%
   /\_/\
  ( :dim[-].:dim[-] )
   > :pink[^] <
%%
   /\_/\
  ( :yellow[o].:yellow[o] )
   > :pink[^] <
```

Спиннер — четыре кадра по одному символу:

Полоса загрузки — шесть кадров разной длины:

Экранирование

Внутри цветного куска два символа имеют особый смысл: ] закрывает запись, \ экранирует следующий символ. Поэтому скобка внутри цвета пишется как \], а сам слэш — как \\:

Вне цветных кусков экранировать нечего: в /\_/\, [ok] и 100% слэши и скобки остаются собой.

Ширина

На телефоне помещается примерно 40–45 символов в ширину. Всё, что шире, прокручивается по горизонтали — страница при этом не разъезжается:

Практический предел для арта, который должен быть виден целиком, — около 40 символов.

Уменьшение движения

Анимации сделаны на чистом CSS, без JavaScript. Если в системе включено «уменьшение движения», все эффекты останавливаются, а у покадровой анимации остаётся первый кадр — арт при этом читается как обычная картинка.