<mark> tag not working with language attribute

[talal]

When I use the <mark> tag to highlight some piece of code inside the <pre><code> tags without specifying the language then it works as expected and the code is highlighted.

This works:

<pre><code>ssh <mark>user</mark>@ip address</code></pre>

But when I use it inside <pre><code> with the language specified, it doesn't work and the text wrapped inside <mark> tags is not highlighted.

This doesn't work:

<pre><code class="language-bash">ssh <mark>user</mark>@ip address</code></pre>

I have also tried adding a custom class at the end of the prism.css file:

.highlight {
    background-color: #000;
    color: #FFC336;
}

Then, I used the following syntax:

<pre><code class="language-bash">ssh <span class="highlight">user</span>@ip address</code></pre>

Adding a custom class didn't work either.

I have also tried this with other languages, still didn't work:

<pre><code class="language-javascript">
database: {
    client: 'sqlite3',
    connection: {
        filename: path.join(__dirname, '/content/data/ghost.db')
    },
    debug: <mark>false</mark>
}
</code></pre>

Any help on this issue would be much appreciated. Thanks in advance.

[vkbansal]

Yes, this is bound to happen as prism strips all the pre-existing tags as specified in the documentation.
http://prismjs.com/#limitations

I'm not aware of the apparent workarounds mentioned though. May be someone else will be able to help you.

[talal]

@vkbansal Thank you for your help. I was able to resolve the issue by breaking the block of code as mentioned on the Prism FAQ.

[apfelbox]

You could highlight it with prism and add your <mark></mark> tag after the highlighting is done.