Markdown syntax highliting in textarea field#140

Showing markdown highlighting directly in the textarea field, e.g.:

**bold** as **bold**
_italics_ as _italics_
[link](https;//kirby.nolt.io/) as [link](https://kirby.nolt.io/)
#headings with bigger font
etc.

Depending on the complexity of the entries and the design of the site, an actual preview can be overkill if all you need to check is whether you’ve used your inline styles correctly.

This feature is commonly available in Markdown writting apps like Caret or Typora.

Writting entries in MarkDown is one of the things I love most about Kirby, but without syntax highlihting it can be very unfriendly, especially to clients who come from WYSIWYG.

@Sylvain.jule and me made an attempt to develop such a field for the panel, it’s available at GitHub https://github.com/sylvainjule/kirby-markdown-field/. The plugin has some drawbacks, especially in terms of iOS compatibility, but that’s mainly caused by CodeMirror 5, which we use as our backend.

As soon, as CodeMirror 6 (https://codemirror.net/6/) will be available, I hope that we can update the field to solve these issues. If you don’t need support for iOS, our plugin might help you for now.

I’d really love to see this feature in core, but given the fact that syntax highlighting in web apps usually needs pretty heavy JavaScript libraries for getting it right, I guess it should better be implemented as a plugin (such as the builder and editor fields) to keep the core small, especially since many new projects are chosing WYSIWYG over Markdown.

In my eyes, this is a feature that very much improves the writing experience. But because of the implementation complexity, I second that it’s a good idea to let this be handled by a plugin.

Thanks @Fabian! I didn’t know about your plugin. I will definitely try it. I also didn’t know such heavy JS was needed to make such a feature work. In that case, yes, you and @Nils Hörrmann are probably right in that it should remain a plugin feature.

Thanks @Fabian! I didn’t know about your plugin. I will definitely try it. I also didn’t know such heavy JS was needed to make such a feature work. In that case, yes, you and @Nils Hörrmann are probably right in that it should remain a plugin feature.

I believe with https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/ the syntax highlighting for MD in the panel should become much more feasable.

@Wenzel as the article states: not available for textareas

@Nico — but possible with conteneditable-enabled elements, like <pre>