Change editor styling based on Regex

[amolpatel]

Hey all,

This is a great library, thanks for contributing! I have a quick question hoping someone could help me:

I would like to automatically update the styling for any text that matches a specific regex pattern in the editor. For example, if a user enters in any text in double curly braces, I want to change the color. Eg. {{text}} should highlight to green.

I know the library supports syntax highlighting but I was wondering if I can build any custom highlighting.

Thanks in advance!

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/issues/420#issuecomment-1205939047

You can rerender the edit area. @amolpatel

https://github.com/uiwjs/react-md-editor/blob/8acedb0427ac8459b618ca5f0b371e44c1dc0007/core/src/Editor.tsx#L88-L90

[amolpatel]

How does that help me use regex to replace a specific line of text? I'm also using Next so I have to use version 3.6.0 so have to use the deprecated renderTextarea

[jaywcjlove]

https://codesandbox.io/s/recursing-edison-w1rryo?file=/pages/index.js

3.17.0+ also supports next.js

@amolpatel

[jaywcjlove]

[amolpatel]

Ah nice! Thanks for clarifying that. I still am not entirely sure how to accomplish syntax highlighting based on a specific regex pattern by re-rendering the text area. I guess I could do something similar to https://github.com/uiwjs/react-md-editor/pull/195#issue-930479978 but that seems quite hacky. Ideally, I could use Prism to highlight some syntax in the editor

[amolpatel]

@jaywcjlove Any chance you can help with the above?

[jaywcjlove]

@amolpatel Sorry I can't help you very well.