Is it possible to make "Badges" in Codemirror (Plnkr example)

So I have a Plnkr example of an Overlay parser where some code in our editor is being highlighted as being special – kinda like a token. What we would really like to do is change the appearance of the “badge” to look less “code” like. For instance we would love to hide the “{param}” syntax and just show it has badged text. And what would be even more awesome is if the editor would delete the entire badge when backspacing onto it. As it stands now you delete a portion of it and the CSS Styling is removed. I realize this is how the Overlay works, but I didn’t know if there was a better plugin that would give us something like this.

Another good example of the behavior we’re shooting for is how GMail does Addresses on the TO: field. Where addresses are badges that are completely deleted when backspaced, and hide the “meta” information of the email address.

I appreciate any response or hints on this! Thanks for all you guys do.

– Joe Firebaugh

Have you looked into markText, especially its replacedWith option?

I have not! It’s the first time I’ve seen it. Thanks Marlin, I’ll give that a shot.