How to highlight a word in a code block

[masahir0y]

I learned how to highlight particular lines in a code block from marp-team/marp-vscode#146

I learned how to highlight a word outside a code block from marp-team/marp-vscode#109

Is it possible to highlight a word in a code block? This is useful to emphasize a particular piece of code (e.g. an important function parameter).

The issue 109 does not work inside a code block since angle brackets are escaped.

Currently, I work around this by processing the generated HTML by sed.

```
Normal code; {HIGHLIGHT-BEGIN}Special code;{HIGHLIGHT-END} Normal code;
```

<style>
.highlighted-word { color: #f40; }
</style>

Then, I post-process the generated HTML by sed.

$ marp slide.md
$ sed -i -e 's:{HIGHLIGHT-BEGIN}:<span class="highlighted-word">:g' -e 's:{HIGHLIGHT-END}:</span>:g' slide.html

It works, but it am wondering if there is a better way.

[yhatt]

Marp (Core) uses highlight.js for code highlighting.

It is not possible to highlight a specific word within a code block, and not recommend to add the custom syntax for highlighting a specific word. If added the custom syntax, it may change the meaning of the original code and break syntax highlighting.

If you really need the ability to highlight specific words within a code block, you can write a script to overload the Marp Core's highlighter through Marp CLI custom engine.
https://github.com/marp-team/marp-core/blob/93cd661c1682afe950b8481d16a57a3f674fea6a/src/marp.ts#L94-L102

// engine.js
module.exports = ({ marp }) =>
  marp.use(({ marpit: marp }) => {
    const originalHighlighter = marp.highlighter

    // Overload highlighter method of Marp Core instance
    marp.highlighter = function (code, lang, attrs) {
      // Call original highlighter, and get highlight result with HTML tags as string
      const originalRet = originalHighlighter.call(this, code, lang, attrs)

      // Tweak the raw HTML string
      return originalRet
        .replace(/{HIGHLIGHT-BEGIN}/g, '<span class="highlighted-word">')
        .replace(/{HIGHLIGHT-END}/g, '</span>')
    }
  })

marp --engine engine.js your-markdown.md

This example does word replacing process you've described while converting in CLI, but please notice that highlight.js still may split predefined words, by HTML tags for highlight (e.g. {HIGHLIGHT-<span class="hljs-keyword">BEGIN</span>}). For more reliability of your custom syntax, you should completely replace highlighter from highlight.js, or write a plugin for highlight.js.