Unformatted Code Detector theme component

Links

Usage

After installation, 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.

Issues

  • “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.
28 Likes

I do like this, but the mesage seems a bit too much IN YOUR FACE!!!

1 Like

As the purpose is to interrupt the posting flow and force the user to make a choice, isn’t that the point?

5 Likes

The message text is configurable through localization settings, but do you mean the message itself or the way it’s displayed? I’d certainly be open to suggestions on how to improve the user experience. @Stephen is right though — interrupting the flow is intentional. The challenge is to do so in a way that quickly informs the user without overwhelming them.

7 Likes

This is quite essential to our forum due to the fact that many new users ignore our topic about code formatting and most of our topics are about assistance in code. It makes our life much easier by informing them of informatted code. Thanks @lionel-rowe

8 Likes

v0.5 is now out. I’m gonna start documenting changes properly on this topic. I expect most updates from now will be dealing with edge cases.

Changelogs

v0.5

Fix false positive on URLs containing snake case (e.g. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)

v0.6

Fix two more types of URL-related false positives:

  • Parens in path (e.g. https://en.wikipedia.org/wiki/LAN_(disambiguation))
  • Array query params (e.g. https://www.example.com?foo[0]=bar&foo[1]=baz)

v0.7

Ignore strings like “O(n)”.

v0.8

  • Ignore emojis (e.g. :slightly_smiling_face: => :slightly_smiling_face:).
  • Ignore special characters for copyright/TM/registered (e.g. Trademarked(TM) => Trademarked™).
  • Ignore anything formatted like a URL.
8 Likes

This is great, thanks for sharing!

2 Likes

Glad you like it! :smile:

v0.9 Changelog

  • Ignore anything within BBCode tags ([quote]s were triggering a false positive).
5 Likes

Great!

Will this recognize logs as “code”? If not consider this a feature request.

How do you identify an extract from a log-file? I guess it would suffice to look for a date/time at the beginning of two consecutive lines.

Another question: will ir work when people are using quote-formating (>) instead of code fences?

It will recognize logs as code if they happen to “look like” code (i.e. contain any of the patterns that would flag a post as containing code). You can test it out on your content at the demo link.

There are lots of ways to format a datetime, and not all log formats start each line with a datetime in any case. I guess detecting full ISO8601 representations (1970-01-01T00:00:00+00:00 etc.) would work, as these are very unlikely to appear outside of code or logs.

Anything in code blocks (fenced or indented) is ignored. Quoted blocks don’t receive any special treatment. Quoted blocks aren’t a correct way to format code, and may lead to unexpected results.

Example: the string <xml />

Block quoted (gets parsed away into oblivion):

Code fences (displays as intended):

<xml />
3 Likes

That’s exactly why I think it shouldn’t be ignored. People keep using quotes to “format” their code…

2 Likes

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!!

3 Likes

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.

5 Likes

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!