Highlight tokens in syntax highlighted code

[dtuite]

In documentation, we often want to display a code snippet for the user to copy paste but we need them to replace certain tokens in the snippet with their own information in order for it to work correctly. An example might be their GitHub Org name, their email address or their Roadie subdomain.

It would be nice if we could highlight these tokens so they stand out when the code is syntax highlighted.

For an example of us struggling with this problem, see this comment: #137 (comment)

This functionality may give us what we need: https://prismjs.com/plugins/highlight-keywords/

[dtuite]

I tried the method suggested in https://prismjs.com/plugins/highlight-keywords/

Gatsby's prism plugin doesn't support this (there are a lot of plugins which are not supported because Gatsby is build time and Prism is designed to be client side) and the words we want to highlight are not necessarily "keywords" anyway. They are not easy to target with JS or CSS for unique styling.

This looks to be quite tricky to achieve.

[martina-if]

should we instead aim to do better syntax highlighting in the <pre> tags? or always use the ``` and close this?