Unformatted Code Detector

:discourse2: Summary Unformatted Code Detector detects unformatted code and gives a warning before posting.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/unformatted-code-detector
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Users posting unformatted code will see a warning message instructing them how to format it correctly.

Sensitivity and whether it detects HTML are configurable via theme settings.

Settings

Name Description
emoji icon The emoji icon to be displayed next to the title in the unformatted warning modal.
disable at trust level Disable warning for users with a trust level of N or higher. -1 = enabled for all users.
sensitivity Sensitivity of the detection algorithm. 0 = plugin disabled; 1 = warn for anything that looks even slightly like code.
min post length to check Minimum post length to check (number of characters)
max post length to check Maximum post length to check (number of characters). -1 = no maximum.
include html Check for HTML tags as well as other types of code. Recommended to disable if users frequently need to render custom HTML in their posts.
Translation Default
warning_modal.title Are you posting code?
warning_modal.content It looks like your post may contain code or logs. To keep your post readable, please remember to format your code using the Preformatted text toolbar button </>, or the backtick ` key on your keyboard, like so: [examples]
warning_modal.do_not_show_again do not show this message again
warning_modal.fix_post Edit Post
warning_modal.ignore_and_post_anyway Post Anyway

Debugging

If you receive a warning for a post which doesn’t include any text, you can print debug information by opening the browser JS console, and typing debugUnformattedCodeDetector() Enter. This will print some information about which lines were considered ‘code’, and what the sensitivity settings are.

:information_source: “Do not show this message again” only works per device, not per user. This is a known issue and will be fixed once Discourse gains the functionality to attach user info from themes.


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-16T11:48:08Z

Check documentPerform check on document:
60 лайков

We at the Home Assistant forums think that this is the best thing invented since sliced bread. Or maybe Home Assistant. Thank you so so much @lionel-rowe!!!

Two minor request:

  • I don’t want to allow users to skip formatting or disable the dialog in the future. I want them to feel pain until they change their ways. I’m sadistic like that. Can you make the “Don’t show this message again” and “Post anyway” buttons optional? For now I’ve hid them with some CSS but would be better to just not include the HTML at all.

  • Unsure if you are doing language detection or not, but if you are, can you add the estimated language name after the first code fence so that users will properly syntax highlight too?

Thanks so much!!

6 лайков

I wouldn’t recommend hiding them, especially if you leave the setting to include HTML detection on. Power users may still want to have their (sanitized) HTML parsed as such, not formatted as code. Two examples where this can be useful are kbd and abbr tags.

If you exclude HTML tags from detection (which may be viable depending on the scope of your forum), hiding the “don’t show this again” would probably be OK. I still wouldn’t recommend hiding the “post anyway”, though, because there are bound to still be some edge cases of false positives (I hit one the other day where I’d omitted a space before an opening parenthesis — poor typesetting, but not unformatted code). Then you’ll have a situation where users can’t post their question at all, and, unless they report the issue to you directly, you won’t even know about it.

Language detection is beyond the scope of this component, I’m afraid. Where possible, it looks for syntactical features shared by many languages, such as lines ending in semicolons, certain configurations of curly braces, and so on.

I am thinking about ways to enhance the UX, though. One big improvement would be to make it much more interactive. For example, instead of a simple modal, the user would be presented with a wizard that first asks them which language their post concerns (select from a dropdown), then a screen which asks them to select which ranges of their post are code (defaulting to lines that contain strings flagged by the plugin), then generating the appropriate markdown. This would still include a “skip and post anyway” option, though, for the reasons I mentioned.

I don’t have a timeline for this change, but it’d be good to know if it’s something people would be interested in.

7 лайков

Already hit the edge cases issue within 30 minutes or so of hiding the elements, so they have been re-added.

I would be super interested in the modal being more interactive!

1 лайк

Краткое примечание: мы скоро официально внедрим этот компонент и будем тесно сотрудничать с @lionel-rowe и @david, чтобы достичь этой цели. Любые идеи или отзывы — самое время их озвучить!

18 лайков

2 поста были перенесены в новую тему: Эмодзи активируют детектор кода, а функция «исправить код» не работает

Отличные новости!

Не уверен, уместно ли это, но было бы здорово, если бы это также предупреждало о наиболее распространённых ошибках в Markdown, которые нарушают форматирование.

4 лайка

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

Я просто писал ещё один ответ и получил уведомление, хотя не вставлял никакого кода. Через некоторое время я понял, что это из-за слова topic_id… Но не очевидно, что детектор считает это слово кодом (и большинство людей так не подумают), на мой взгляд.

Я считаю, что наличие подчёркивания в слове не обязательно означает, что это код.

2 лайка

Спасибо всем за обратную связь, ребята! Мы добавим и немного скорректируем несколько настроек, чтобы снизить излишнюю чувствительность детектора.

@tpetrov, ещё один момент — понятно ли из формулировки всплывающего окна, что вы можете проигнорировать его и опубликовать сообщение, если считаете, что в нём нет кода? Или оно создаёт впечатление, что вы обязаны найти и «исправить» предполагаемую проблему?

5 лайков

Меня беспокоит, что многие люди не станут читать это…
Вы знаете, когда люди видят всплывающее окно с текстом более чем в одно предложение, они, похоже, игнорируют текст и ищут кнопку ОК (я принимаю файлы cookie, условия и т. д.).

Тем не менее, возможно, фразу «Похоже, в вашем сообщении есть неформатированный код» можно заменить на «Используете ли вы код в своём сообщении?», так как вопросы иногда привлекают больше внимания.

Я не эксперт по UX, но эта кнопка кажется немного чрезмерной:
image — я бы не хотел на неё нажимать. Что, конечно, и является целью — чтобы люди не просто пропускали это, а пытались лучше форматировать своё сообщение.

1 лайк

О-о-о, мне нравится эта идея… но у меня только что сработал ложный срабатывание:

Возможно, его сработали битые ссылки? Они просто берутся из шаблона и выглядят так: [keep things civilized](%{guidelines_url}). Или, может быть, HTML-тег img?

2 лайка

Неплохая идея, @david. Возможно, стоит попробовать изменить заголовок модального окна на «Вы вставляете фрагмент кода?».

Думаю, вы, скорее всего, правы. В следующей версии это будет стандартная серая кнопка.

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

6 лайков

Мы внедряем новые тексты и формируем корпус положительных и отрицательных тестовых примеров постов для компонента. Пожалуйста, подождите немного — всё складывается отлично!

8 лайков

Небольшое замечание: по умолчанию в warning_modal.content запрашивается кнопка панели инструментов «code», однако в редакторе при наведении на эту кнопку мышью она называется кнопкой «Preformatted text».

grafik

grafik

Чтобы новым пользователям было проще найти эту кнопку (они не найдут кнопку с названием «code»), содержимое warning_modal.content следует изменить с «кнопка code» на «кнопка Preformatted text».

3 лайка

Как добавить ссылку на тему с дополнительными примерами и инструкциями?

Я попробовал просто добавить её в конец warning_modal.content, но это привело к следующему (мои дополнения выделены жёлтым):

Как добавить текст и ссылку ниже текущего содержимого?

Редактирование:

Я только что заметил, что изменение даже одного символа в warning_modal.content нарушает форматирование.

Ещё хуже: просто нажатие на поле ввода warning_modal.content и перемещение курсора стрелками приводит к подсветке поля ввода. После нажатия на зелёную галочку для сохранения «отредактированного» warning_modal.content (никаких изменений не было внесено, только перемещение курсора на один символ) форматирование нарушается, как показано выше.

Редактирование #2

Решено с помощью https://meta.stackexchange.com/questions/82718/how-do-i-escape-a-backtick-within-in-line-code-in-markdown

@codinghorror @lionel-rowe, возможно, вам стоит изучить этот вопрос и соответствующим образом настроить warning_modal.content по умолчанию, учитывая пробелы и обратные кавычки (отсутствие пробелов в разделе “multiplelines”, насыщенном обратными кавычками, вызывало описанные выше проблемы).

2 лайка

Есть ли способ сделать более понятным для пользователя, какой ключ выбрать для блоков кода, если он делает это вручную (то есть не через кнопку)?

Сегодня я видел следующее:

Очевидно, пользователь пытался следовать инструкциям, но выбрал неправильный ключ для блоков кода ( ' вместо `). В прошлом я также видел ... вместо ```. Оба случая указывают на то, что пользователям нужны более явные инструкции о том, какой ключ выбрать.

Альтернатива: не путать пользователей этими ключами, а просто сказать: используйте кнопку «Форматированный текст», и всё готово.


@lionel-rowe Как я могу настроить поведение обнаружения?

В настоящее время shebang не распознаётся как код, и я хотел бы это изменить.

Ожидаемое поведение: #! указывает на начало скрипта и поэтому должно распознаваться как код.

Пример отсутствия распознавания:


#!/bin/sh

echo “test”

. /lib/upgrade/common.sh

firmware=“/tmp/firmware.img”
tmpdir=“/tmp/_upgrade”
output=“/dev/ttyS0”
before=“before-upgrade.sh”
after=“after-upgrade.sh”


Кроме того, для нас было бы полезно, если бы root@ распознавался как код.

root@OpenWrt:~# ip link add link eth0 name eth0.9 type vlan id 9
root@OpenWrt:~# brctl addbr br-foo
root@OpenWrt:~# brctl addif br-foo eth0.9
root@OpenWrt:~# ip link set eth0.9 up
root@OpenWrt:~# ip link set br-foo up

4 лайка

@david, есть ли способ настроить распознавание?

На данный момент кастомизация для каждого сайта недоступна. Однако мы могли бы рассмотреть возможность добавления детекции shebang и командной строки в систему «code energy».

3 лайка

Спасибо, что подняли эту тему — похоже, это основная ошибка, связанная с многострочными переводами тем. Я создал PR для исправления:

3 лайка

Большинство сайтов на Discourse используют его как инструмент для устранения неполадок. Подходит ли этот плагин для следующих задач, а не только для кода:

Linux:

  • Логи
  • Командная строка CLI Linux
  • Вывод терминала

Например:

Sensors:
  System Temperatures: cpu: 78.0 C mobo: 36.0 C gpu: nouveau temp: 56.0 C 
  Fan Speeds (RPM): cpu: 0 fan-1: 3139 fan-3: 0 fan-5: 0 
  Power: 12v: N/A 5v: 2.90 3.3v: N/A vbat: 3.34 

С уважением.

4 лайка