# Markdown syntax highlighting in post editor

**URL:** https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665
**Category:** Feature
**Tags:** composer
**Created:** [October 18, 2023, 4:49pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665 "2023-10-18T16:49:00Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![pipkin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pipkin/32/134643_2.png) [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [October 18, 2023, 4:49pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/1 "2023-10-18T16:49:00Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/6/cd631c766d8254045ccead3c13ba41fed1bdb717.png)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 18, 2023, 7:58pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/2 "2023-10-18T19:58:34Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/d/1/2d1fd4b7714b4a92d3e50d22b28fceff28e63474.png)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 18, 2023, 8:16pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/3 "2023-10-18T20:16:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![pipkin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pipkin/32/134643_2.png) [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [October 18, 2023, 8:39pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/4 "2023-10-18T20:39:07Z")

</div>

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 😁:

```markdown
# Markdown codeblock's syntax...

... unfortunately ...

- isn't
- highlighted

**at all**!

```

EDIT 2 hrs later: Fixed by @pmusaraj

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 18, 2023, 9:29pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/5 "2023-10-18T21:29:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 18, 2023, 9:30pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/6 "2023-10-18T21:30:39Z")

</div>

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](https://ui.toast.com/tui-editor), [Playground | Milkdown](https://milkdown.dev/playground), etc.

---

<div class="post-metadata">

### Author: ![pipkin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pipkin/32/134643_2.png) [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [October 18, 2023, 9:48pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/7 "2023-10-18T21:48:25Z")

</div>

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 👴

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 18, 2023, 10:13pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/8 "2023-10-18T22:13:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 18, 2023, 10:46pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/9 "2023-10-18T22:46:12Z")

</div>

PR is up with a fix for the missing markdown highlighting: [UX: Update highlight.js styles by pmusaraj · Pull Request #23999 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/23999)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [October 19, 2023, 12:24am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/10 "2023-10-19T00:24:34Z")

</div>

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:

> [@More advance editor should be here?](https://meta.discourse.org/t/more-advance-editor-should-be-here/14102):
>
> I have some exprence in taking notes of math in the Editor: [StackEdit](https://stackedit.io/), while the discouse editor (what’s her name?) is my first forum editor that support markdown and mathjax at the same time with perfect preview, it seems that there are still have some space to make it more perfect, compare with StackEdit: a table of content guide of a rather length topic: in stackedit, we can just put a shortcode called [toc] to make a table of content with links the particial render of mathjax is also qu…

> [@Who would prefer a standard wysiwyg to markdown?](https://meta.discourse.org/t/who-would-prefer-a-standard-wysiwyg-to-markdown/31340):
>
> I just saw an interview with Michael Pryor of trello: At one point he says: We added markdown in Trello which in retrospect, was a mistake because it’s a developer centric feature in a non developer focused product. We overcame it by adding guidance on how to use markdown within the app, but users sometimes still get confused. I’m curious to know what the feeling out there is about the use of markdown in Discourse. Am I the only one who thinks discourse would appeal to many more people i…

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.

---

<div class="post-metadata">

### Author: ![pipkin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pipkin/32/134643_2.png) [@pipkin](https://meta.discourse.org/u/pipkin)
#### Post date: [October 19, 2023, 1:03am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/11 "2023-10-19T01:03:55Z")

</div>

> [@Who would prefer a standard wysiwyg to markdown?](https://meta.discourse.org/t/who-would-prefer-a-standard-wysiwyg-to-markdown/31340/1):
>
> trello

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

 ![Source: https://blog.trello.com/editing-experience](https://global.discourse-cdn.com/meta/original/4X/9/6/0/9605720306c54edc36611ccb81e785bf22e53943.png)

It think this sort of thing is important.

Note: It is still 100% accepts Markdown syntax.

---

<div class="post-metadata">

### Author: ![Tris20](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tris20/32/264639_2.png) [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [October 19, 2023, 7:30am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/12 "2023-10-19T07:30:08Z")

</div>

> [@pipkin](#):
>
> I must be honest here: now that I’ve seen the Trello editor, Discourse feels a bit 2000’s on the editor front:

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.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [October 19, 2023, 8:04am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/13 "2023-10-19T08:04:23Z")

</div>

> [@Tris20](#):
>
> rendered stuff is out to the side where it belongs

It is, isn’t it?

 ![IMG_4556](https://global.discourse-cdn.com/meta/original/4X/d/f/3/df30f7797780da9633f277de5e377cf8b889a733.png)

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 😉

Anyway — off topic etc.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 11, 2024, 9:13pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/14 "2024-09-11T21:13:55Z")

</div>

> [@sam](#):
>
> We need a fair amount of work to create some sort of provider framework so we can swap things in.

Is this any closer to happening?

Context:

> [@Rich Text Editor Plugin](https://meta.discourse.org/t/rich-text-editor-plugin/326070/2):
>
> Hey there @Rohail_Altaf, this will be a large and challenging job. I may be interested, however I have a few questions first. Will you be using this editor from day one of your community? Have you already used the markdown editor? Will you want to also use the markdown editor alongside this? Will you possibly want to use the markdown editor in the future? Could you elaborate on this a bit. How about: Interactive elements outside the composer that insert content into the composer (e.g. high…

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 11, 2024, 9:20pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/15 "2024-09-11T21:20:27Z")

</div>

We have started work in this area @lindsey will share information as we progress

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [September 11, 2024, 11:19pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/16 "2024-09-11T23:19:35Z")

</div>

This is very good to hear - using markdown is great for our power users, but quite a learning curve for the majority of our less-than-super-users and would go a long way to making our community more accessible.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 24, 2024, 9:57am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/17 "2024-09-24T09:57:50Z")

</div>

Hey @lindsey, I don’t want to rush you in any way, but I thought I might just ask if you were able to share the following:

1. Whether the changes will include interoperability / a framework to allow plugins to develop editor solutions.

2. Relatedly, whether you’re looking at developing your own rich text editor, e.g. in a plugin.

3. A rough sense of what timeline you’re looking at for 1 and / or 2.

The context for me is the approach to and timeline of this potential project

> [@Rich Text Editor Plugin](https://meta.discourse.org/t/rich-text-editor-plugin/326070):
>
> Hello Discourse Developers! We’re looking for an experienced Discourse developer/agency to create a plugin that replaces the default Markdown editor with a WYSIWYG editor, preferably Quill or similar, for our community. Project Requirements: WYSIWYG Functionality: Replace the default Discourse Markdown editor with a WYSIWYG editor (Quill or similar). Feature Parity: The WYSIWYG editor should support all essential formatting options currently available in the native Markdown editor (bold, …

@Rohail_Altaf and I are attempting to think about how best to approach this, particularly timeline wise. Nevertheless, I completely understand if you’re not able to share that at this stage.

---

<div class="post-metadata">

### Author: ![lindsey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lindsey/32/318210_2.png) [@lindsey](https://meta.discourse.org/u/lindsey)
#### Post date: [September 30, 2024, 8:08pm UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/18 "2024-09-30T20:08:50Z")

</div>

Hey Angus — sorry for the delay here, we’ve been out at our company’s annual retreat in Tokyo!

I can’t answer with too many specifics right now as we’re still nailing down implementation details. I think we should have that figured out in the coming weeks, at least well enough to answer these questions, so I’ll check back in once we know more.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 13, 2025, 12:15am UTC](https://meta.discourse.org/t/markdown-syntax-highlighting-in-post-editor/282665/20 "2025-03-13T00:15:04Z")

</div>

Discourse is now shipping an experimental WYSIWYG composer 🎊

> [@Test our new composer!](https://meta.discourse.org/t/test-our-new-composer-on-meta/352347/1):
>
> We have been working on a new rich text editor mode for our composer so that it’s easier to write on Discourse. We’re now ready to start testing it out to get more feedback from our community on this feature! Our implementation builds upon the excellent [ProseMirror](https://prosemirror.net/) and its non-core [Markdown module](https://github.com/ProseMirror/prosemirror-markdown), using the module’s schema, parsing, and serialization definitions as the base for further Discourse-specific features. This topic will serve as both a guide to testing the new composer and a hub for…

This infra also makes it possible long term to apply syntax highlighting on markdown if we want to go down that path, it becomes a lot less necessary though with the new composer.

For example the new composer now allows you to apply syntax highlighting to code while you are typing it!

 ![The image displays a CSS code snippet setting the background color to red, with a dropdown menu labeled CSS. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/0/3/a/03a47e5ef737620f8fea4e5a80e9584bd0f61e62.png)
