Apply custom class to string

I’m submitting a…

• Question

Reproduction steps

I’m looking the way to highlight some text in the editor, for example when I write ???category I want to apply some CSS style to that part of the text, it’s possible ? Thank you!

EDIT: Here some code for what I want to do, for example if I write &Hello the text parsed and styled to

<span class="cm-formatting cm-my-style1">&</span>
<span class="cm-my-style2">Hello</span>

[roipoussiere]

You could do that with the CodeMirror API (you can access the codeMirror object with easyMDE.codemirror).

First, look for your word with cm.findWordAt():

cm.findWordAt(pos: {line, ch}) → {anchor: {line, ch}, head: {line, ch}} Returns the start and end of the ‘word’ (the stretch of letters, whitespace, or punctuation) at the given position.

Then, mark this section with a class with doc.markText:

doc.markText(from: {line, ch}, to: {line, ch}, ?options: object) → TextMarker Can be used to mark a range of text with a specific CSS class name. from and to should be {line, ch} objects. The options parameter is optional. When given, it should be an object that may contain the following configuration options:

• className: string Assigns a CSS class to the marked stretch of text.
• […]

Note that if you only want to add CSS to this text, you don’t really need to add a class, because markext() has also a css configuration option, so you can do it directly:

• css: string A string of CSS to be applied to the covered text. For example “color: #fe3”.

[tristansokol]

@dignajar were you able to get the highlighting to work? I have an event handler for change events that should be adding in highlights, but am unable to see them. it appears to be at least somewhat working since I can query for all of the marks and they show up. Any ideas?

this.easyMDE.codemirror.on('change', () => {
      const { anchor, head } = this.easyMDE.codemirror.findWordAt({
        line: 2, //tried many positions, seems to identify words correctly. 
        ch: 4
      })
      console.log(anchor, head) //Pos {line: 2, ch: 2, sticky: null} Pos {line: 2, ch: 7, sticky: null}
      console.log(
        this.easyMDE.codemirror.doc.markText(anchor, head, {
          css: 'color:FE3'
        })
      )//TextMarker {lines: Array(1), type: "range", doc: Doc, id: 1, css: "color:FE3"}
      console.log(this.easyMDE.codemirror.doc.getAllMarks())//[TextMarker]