How to combine rich text editing and templating?

Question

I'm working on a no-code app; ideally, users should be able to write text using both templating and rich text editing:

Templating:
Users can type {{ and write an expression that will evaluate to some string at runtime.

Rich text editing:
Users can select some text, a toolbar appears and they can set the text to bold, italic, change its color, etc.

Problem:
If we combine both, how could one define the styles of a template expression?

Ideas:

• Style the template expression itself, even though it's not the runtime result.
  But a template expression is code, so it has syntax highlighting. That means we should override syntax highlighting? It seems weird.

I couldn't find a satisfying idea, do you have any? Thanks!

Answer 1

There's two widely used attempts to try here:

1. Use Markdown. It's reasonably widely used, is somewhat compatible with WYSIWYG (for example, a text editor could display text surrounded by **boldness asterisks** as bold text), and would very easily integrate with your templates as everything would just be plain text under the formatting. Markdown can be used on sites like Reddit, Google Docs, Discord and YouTube.
2. Use WYSIWYG only. In this world, the expression would be instead an object, in a similar way that a maths formula or image would be. The expression here would probably not be part of the normal text flow, but something you can enter into. In the editing state it has syntax highlighting (if any), in the normal text state it's the rendered text. This is the approach used by office suites everywhere and corporate WYSIWYG editors more generally.

Neither approach is perfect, and I'm not quite sure where user expectations are moving towards. Reddit made WYSIWYG the default with it's previous redesign, but at the same time Markdown seems to be creeping in as a way to quickly write formatted text into more and more places.