Markdown syntax highlighting in post editor

Would it be hard to replace the default post editor textarea by a markdown syntax highlighter?

Or am I missing the option somewhere?

You have already beautifully implemented this for css in the admin styles editor:

2 Likes

Isn’t that already achieved by using the code block, which gives you syntax highlighting in the preview area?

1 Like

This is an interesting idea, the goal would be to have syntax highlighting in the textarea (i.e. the left side of the composer) so you could see if you’re making any markdown syntax mistakes. Yes, code blocks do the same in the preview, but you won’t see any markdown mistakes, for example. And some complex markdown would be easier to scan, post with lots of tables, uploads, links, headings.

I’m not sure it’s easy to do this, though. Our admin screens use the ACE Editor, and I don’t think we can just drag and drop that on the post composer.

4 Likes

Yes, this is exactly my use case.

It gives a very direct feedback about your syntax: you don’t have to look to the right pane every other second to check if you aren’t making trivial syntax mistakes.

It would give a bit more structure for those who are less apt in Markdown (any beginner).

Of course you still have the rendered html on the right side of the composer window.

I would see no immediate disadvantages to this, especially if it’s an option.

PS: Apparently there’s not even a Markdown syntax highlighter installed for codeblocks :grin::

# Markdown codeblock's syntax...

... unfortunately ...

- isn't
- highlighted

**at all**!

EDIT 2 hrs later: Fixed by @pmusaraj

3 Likes

Oh, good catch! Looks like we’re missing some styles for the markdown highlighter.

2 Likes

Using a full blow editor for “just” markdown isn’t a bit too much?

In my opinion, using a markdown semi-wysiwyg is more aligned to the OP needs, like for example https://ui.toast.com/tui-editor, Playground | Milkdown, etc.

3 Likes

Those two look great!

However, I could imagine that the simpler Milkdown would be better suited since it’s okay if the editor gives a more ‘underwater screen’[1] feel, as you’ve got the preview on the right anyway.


  1. Yes I vividly remember WordPerfect :older_man: ↩︎

3 Likes

Yeah, any one of ACE, TUI, Milkdown is a very big change, they all would need to replace the textarea with contenteditable. Worth an experiment, for sure, but in core it’s a big project.

4 Likes

PR is up with a fix for the missing markdown highlighting: UX: Update highlight.js styles by pmusaraj · Pull Request #23999 · discourse/discourse · GitHub

6 Likes

Just to expand, first that this is something I really want core to support but also worth expanding on the complexity.

Discourse core uses many many APIs against TEXTAREA directly, @mentions, toolbar inserts stuff into the TEXTAREA, uploads, cut and paste images and more.

This is all not abstracted away and assumes it is talking to a TEXTAREA. Adding a contenteditable there direct would mean it would need to also properly and very accurately simulate a TEXTAREA, something that is likely to fail. We need a fair amount of work to create some sort of provider framework so we can swap things in.

See also:

Highlighter is certainly a great first move in this direction cause you don’t have to worry about bi-directional markdown to text mapping.

There may be some ninja hack where you can hide the TEXTAREA and then render a contenteditable on top of it, ferrying events to the original, but even that would require a re-implementation of @mention positioning.

7 Likes

I must be honest here: now that I’ve seen the Trello editor, Discourse feels a bit 2000’s on the editor front:

It think this sort of thing is important.

Note: It is still 100% accepts Markdown syntax.

1 Like

Personally not a fan of this. It’s far too cluttered. I love that the editor in Discourse is visually clean. All I really see is text, and the rendered stuff is out to the side where it belongs.

Back to the main point of syntax highlighting though, this is something I would also love to see. At the very least I would love # Headings and ## Subheadings to be highlighted in some way. I can’t tell you how often I search through my longer posts, where the preview and editor are misaligned, and it takes me ages to find where my related # heading is.

For me just making # Headings bold, or a particular colour in the editor side of the composer would be a massive improvement.

It is, isn’t it?

These editors are made for devs and coders and are really confusing for ordinary ones.

But it is what it is and is too deep in the core to change. Like draft question :wink:

Anyway — off topic etc.

1 Like