HTML highlighting using prism.js

Question

I cannot highlight html with prism.js because it removes the markup just by typing the text. The following code inside the pre tag shows only text. I have a class for the "code" tag set to "language-markup".

    <table class="data-table">
        <tr>
            <td>Title</td>
            <td>Amount</td>
        </tr>
        <tr>
            <td>Shorts</td>
            <td>£1.00</td>
        </tr>   
        <tr>
            <td>Shorts</td>
            <td>£1.00</td>
        </tr>           
    </table>

shows how

            Title
            Amount


            Shorts
            £1.00


            Shorts
            £1.00

Answer 1

You need to avoid starting tags with <. The easiest way is to insert the html code into the pre-tag, and then search and replace for all characters <.

This should work:

<table class="data-table">
    <tr>
        <td>Title</td>
        <td>Amount</td>
    </tr>
    <tr>
        <td>Shorts</td>
        <td>£1.00</td>
    </tr>   
    <tr>
        <td>Shorts</td>
        <td>£1.00</td>
    </tr>           
</table>

Answer 2

Alternatively, you can wrap your code with <script type="prism-html-markup"> your code </script>