Creating an Angular Highlight Directive

Photo by Mahesh Ranaweera on Unsplash

Scenario

We have the following typescript code block to render with highlight.js :

<pre><code highlight class="typescript">
private fileReader:FileReader = new FileReader();
</code></pre>

Note the declaration of the highlight directive.

Solution

Create the following directive. Note that the Stackblitz editor contains a complete example:

If you select the text private fileReader:FileReader = new FileReader() with Chrome dev tools, you will see that it has been highlighted.