Подсветка синтаксиса Markdown в редакторе постов

Было бы сложно заменить стандартное текстовое поле редактора постов на редактор с подсветкой синтаксиса Markdown?

Или я что-то упустил?

Вы уже красиво реализовали это для CSS в редакторе стилей административной панели:

3 лайка

Разве это не достигается уже с помощью блока кода, который обеспечивает подсветку синтаксиса в области предпросмотра?

1 лайк

Это интересная идея: цель — добавить подсветку синтаксиса в текстовое поле (то есть в левую часть редактора), чтобы можно было видеть ошибки в синтаксисе Markdown. Да, блоки кода делают то же самое в превью, но вы не увидите, например, ошибок в разметке Markdown. Кроме того, сложную разметку Markdown будет проще просматривать: в сообщениях с множеством таблиц, вложений, ссылок и заголовков.

Однако я не уверен, что это легко реализовать. Наши административные экраны используют редактор ACE, и я не думаю, что мы можем просто перетащить его в редактор сообщений.

4 лайка

Да, это именно тот случай, который мне нужен.

Это даёт очень прямой отклик о вашем синтаксисе: вам не нужно каждые несколько секунд смотреть на правую панель, чтобы проверить, не допускаете ли вы тривиальных ошибок в синтаксисе.

Это добавило бы немного структуры для тех, кто менее знаком с Markdown (любому новичку).

Конечно, справа от окна редактора по-прежнему отображается рендеренный HTML.

Я не вижу никаких немедленных недостатков у этого подхода, особенно если это будет опционально.

PS: Похоже, что для блоков кода даже не установлен подсветчик синтаксиса Markdown :grin::

# Синтаксис блока кода Markdown...

... к сожалению ...

- не
- подсвечивается

**вообще**!

EDIT через 2 часа: Исправлено @pmusaraj

4 лайка

Отличное замечание! Похоже, у нас не хватает стилей для подсветки синтаксиса Markdown.

2 лайка

Использование полноценного редактора только для «простого» markdown — это не слишком много?

По моему мнению, использование полувизуального редактора markdown лучше соответствует потребностям автора оригинального поста, например, как в https://ui.toast.com/tui-editor, Playground | Milkdown и т. д.

3 лайка

Эти два варианта выглядят отлично!

Однако я могу представить, что более простой Milkdown лучше подойдёт, так как допустимо, чтобы редактор создавал ощущение «подводного экрана»[1], ведь у вас справа есть предпросмотр.


  1. Да, я прекрасно помню WordPerfect :older_man: ↩︎

3 лайка

Да, любой из ACE, TUI или Milkdown — это очень значительное изменение: всем им потребуется заменить textarea на contenteditable. Это, безусловно, стоит того, чтобы поэкспериментировать, но в рамках ядра это крупный проект.

4 лайка

PR с исправлением отсутствующей подсветки Markdown: UX: Update highlight.js styles by pmusaraj · Pull Request #23999 · discourse/discourse · GitHub

6 лайков

Чтобы добавить немного подробностей: во-первых, я действительно хочу, чтобы ядро поддерживало это, но также стоит рассмотреть сложность этой задачи.

Ядро Discourse использует множество API, работающих напрямую с элементом TEXTAREA: упоминания (@mentions), вставки из панели инструментов, загрузки, вырезание и вставка изображений и многое другое.

Всё это не абстрагировано и предполагает, что работа ведётся именно с TEXTAREA. Прямое добавление contenteditable означало бы необходимость точно и корректно эмулировать поведение TEXTAREA, что, скорее всего, приведёт к ошибкам. Нам потребуется значительная работа по созданию фреймворка провайдеров, чтобы мы могли подменять компоненты.

См. также:

Highlighter, безусловно, отличный первый шаг в этом направлении, поскольку не нужно беспокоиться о двунаправленном сопоставлении Markdown и текста.

Возможно, существует какой-то хитрый трюк, позволяющий скрыть TEXTAREA и отрендерить поверх него contenteditable, перенаправляя события обратно в оригинал, но даже это потребовало бы переосмысления реализации позиционирования @mention.

9 лайков

Буду откровенен: теперь, когда я увидел редактор Trello, редактор в Discourse кажется немного устаревшим, как будто из 2000-х:

Думаю, такие вещи важны.

Примечание: поддержка синтаксиса Markdown по-прежнему остаётся на 100%.

1 лайк

Лично мне это не нравится. Всё слишком перегружено. Мне нравится, что редактор в Discourse визуально чистый. Я вижу только текст, а отрендеренное содержимое находится сбоку, где и должно быть.

Но вернёмся к основной теме — подсветке синтаксиса. Это тоже то, что я хотел бы видеть. Как минимум, я хотел бы, чтобы # Заголовки и ## Подзаголовки каким-то образом выделялись. Не могу сказать, как часто я ищу в своих длинных постах, где превью и редактор не синхронизированы, и мне требуется много времени, чтобы найти соответствующий # заголовок.

Для меня было бы огромным улучшением просто сделать # Заголовки жирными или выделить их определённым цветом в области редактора композера.

2 лайка

Да, так и есть, верно?

Эти редакторы созданы для разработчиков и программистов и действительно запутанны для обычных пользователей.

Но такова реальность, и это слишком глубоко заложено в ядре, чтобы можно было изменить. Как и вопрос в черновике :wink:

В любом случае — это оффтоп и так далее.

1 лайк

Близко ли мы к реализации этого?

Контекст:

1 лайк

Мы начали работу в этой области. @lindsey поделится информацией по мере продвижения.

9 лайков

Это очень приятно слышать! Использование Markdown отлично подходит для наших продвинутых пользователей, но представляет собой значительный порог входа для большинства обычных пользователей. Это во многом способствовало бы повышению доступности нашего сообщества.

4 лайка

Привет, @lindsey, я не хочу тебя торопить, но хотел бы спросить, сможешь ли ты поделиться следующей информацией:

  1. Будут ли изменения включать возможность взаимодействия / фреймворк, позволяющий плагинам разрабатывать решения для редактора.

  2. Планируете ли вы, в связи с этим, разрабатывать собственный текстовый редактор с поддержкой форматирования, например, в виде плагина.

  3. Примерные сроки, которые вы рассматриваете для пунктов 1 и/или 2.

Контекст для меня — это подход и сроки реализации этого потенциального проекта:

Мы с @Rohail_Altaf пытаемся понять, как лучше подойти к этому вопросу, особенно с точки зрения сроков. Тем не менее, я полностью понимаю, если вы пока не можете этим поделиться.

5 лайков

Привет, Энгус! Извини за задержку — мы были на ежегодном корпоративном ретрите в Токио!

Пока я не могу ответить с большими подробностями, так как мы всё ещё прорабатываем детали реализации. Думаю, в ближайшие недели у нас всё прояснится, по крайней мере, настолько, чтобы ответить на эти вопросы, поэтому я вернусь к этому, как только узнаю больше.

6 лайков

Discourse теперь выпускает экспериментальный WYSIWYG-редактор :confetti_ball:

Эта инфраструктура также позволяет в долгосрочной перспективе применять подсветку синтаксиса к Markdown, если мы захотим пойти по этому пути, хотя с новым редактором это становится гораздо менее необходимым.

Например, новый редактор теперь позволяет применять подсветку синтаксиса к коду прямо во время его ввода!

5 лайков