Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highlighting html with prism.js

I cant seem to highlight html with prism.js because it removes the markup just printing the text. the following code inside the "pre" tag shows as just the text. I have the 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 as

            Title
            Amount


            Shorts
            £1.00


            Shorts
            £1.00
like image 406
wazzaday Avatar asked Apr 23 '14 12:04

wazzaday


2 Answers

You need to escape the beginning of the tags with &lt;. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.

This should work:

&lt;table class="data-table">
    &lt;tr>
        &lt;td>Title&lt;/td>
        &lt;td>Amount&lt;/td>
    &lt;/tr>
    &lt;tr>
        &lt;td>Shorts&lt;/td>
        &lt;td>£1.00&lt;/td>
    &lt;/tr>   
    &lt;tr>
        &lt;td>Shorts&lt;/td>
        &lt;td>£1.00&lt;/td>
    &lt;/tr>           
&lt;/table>
like image 123
Nathan Jones Avatar answered Oct 04 '22 14:10

Nathan Jones


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

like image 38
tmsss Avatar answered Oct 04 '22 15:10

tmsss