Discourse unformatted code detector

A bunch of new forum posts in the Using Django section end up with requests (or moderator edits) to reformat code using backticks.

Would it maybe be helpful to install Discourse’s Unformatted Code Detector component? Unformatted Code Detector - Theme component - Discourse Meta

(fwiw, neither of the discobot tutorials cover fenced code blocks, or even mention code. They do teach how to insert a picture, which is another popular way to mis-post code. I couldn’t find anything to detect that.)

5 Likes

I think this is a great idea. I will get in touch with the maintainers staff to try to pursue this further.

2 Likes

(@ChathuraGH your deleted post raised a valid concern.)

On devices that support touch input—including a lot of Windows laptops—Discourse’s editor toolbar makes it hard to find the Preformatted text button that inserts a code block:

The code button is hidden inside the gear menu.[1] (But Insert date/time is included in the main toolbar :face_with_raised_eyebrow:.)

Screen recording of Discourse editor panel on touch device. Tap the gear/cog button in the editor toolbar and a menu appears. Tap "Preformatted text" in the menu. The menu closes, and a fenced code block is inserted in the compose area containing the text "type or paste code here" selected for editing.

Discourse decides toolbar contents based on presence of a touch input device, rather than responsive layout (it just wraps wide toolbars). On non-touch devices, Discourse includes the code button early in the editor toolbar, no need to dig around:

To fix this, we could customize Discourse’s CSS+JS (thread starting here) or add a theme component that shows the code button in all toolbar layouts.

(Also, it might be helpful to call this button “Code” rather than “Preformatted text.” I think that’s configured in Discourse under Admin > Customize > Text > js.composer.code_title.)


  1. The gear/cog button has its own usability problems: a gear usually means “settings” or “preferences” (including elsewhere in Discourse itself!), not “more toolbar commands.” And nothing about it suggests it will pop up a menu. ↩︎

2 Likes

Also, it might help to change the editor placeholder from:

Type here. Use Markdown, BBCode, or HTML to format. Drag or paste images.

to mention code, but not images. Something like:

Type here. Use Markdown or HTML to format. Enter a line of three backticks ``` before and after code.

Maybe also include “(Don’t post screenshots of code or errors.)”

(The prompt is apparently configured in Discourse under Admin > Customize > Text > js.composer.reply_placeholder.)

2 Likes

Thanks for reporting & investigating this. The Online Community WG is meeting today for the first time, I will make sure we get these changes made, but the appropriate people or get access to do so ourselves.

I enabled the unformatted-code-detector theme. Not sure how to test it though! :sos_button:

3 Likes

I am testing some code here:

def function_1(x):
return x + x

def function_2(y):
return function_1(y)

I’m not getting any indication or feedback that the above is unformatted code.

Nor I (trying to post private messages to myself).

Is there maybe an additional step to enable the theme component for everyone? Or maybe the “disable at trust level” or “sensitivity” settings need adjusting? (Does the default disable-at-trust-level disable it for all of us who have been here a while?)

I’m going to try a post directly from the unformatted-code-detector unit test cases next… [edit] and it definitely seems like it’s not enabled, at least for me.

a != b
some prose
/* multi
line != !=
comment */

a != 5
a != 7

If all else fails it would be really, really useful to have somewhere obvious that explains how to format code blocks.

Obviously, most people wouldn’t see it but it would make it much easier if I could find the explanation easily to link to it, rather than have to explain yet again how to do it (and work out how to show what I mean without the backticks themselves disappearing etc).

I’ve taken a shot at it here - https://forum.djangoproject.com/t/posting-code-as-preformatted-text/40776
It’s a distillation of what I generally use.

Oops! That page doesn’t exist or is private.

I have made the detector more strict now. Originally, I configured it to be enabled for all users, independently of their trust level, but I left the “sensitivity” (0.5) and “minimum post length” (50) unchanged. Today, I set sensitivity to 0.2 and minimum post length to 10.

I tested and it does not work in this post, maybe it does on new posts? :thinking:

A new post on the “theme previewer” did work:

5 Likes