Prism HTML highlighter

Question

I'm using Prism and its working well for CSS:

<pre><code class="language-css">p { color: red }</code></pre>

but i can't get it working for html:

<pre><code class="language-html"><p class="red">red text</p></code></pre>

I have 2 problems:

< and > are represented as tags, not as text, but i could replace it by < and >
More important, even replaced as shown in problem 1, the highliter will not highlight any code and everything is just black. Despite that it is working for CSS, whole code looks like this:

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-css">p { color: red }</code></pre>
    </body>
</html>

Thanks for any help.

score 53 · Accepted Answer · answered Mar 25 '13 at 03:32

53

Use <code class="language-markup"> to style html code.

Also, you only need to escape the beginning of the tags with <, don't worry about the > characters. 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:

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-markup">
            &lt;p class="red">red text &lt;/p>
        </code></pre>
    </body>
</html>

answered Mar 25 '13 at 03:32

Nathan Jones

950
14
22

Aw man, all those html entities makes for some ugly source code... Anyone know why Prismjs goes out of their way to remove html tags? Is it an option that can be set to true or false... – Jet Blue May 05 '15 at 02:10
nm, saw [this](https://github.com/PrismJS/prism/issues/572) conversation on Github... not a Prism thing, but is instead due to the
```
 tag...
```
– Jet Blue May 05 '15 at 02:16
1
Per my understanding
```
 tag supports embedded html tags. How is not prism issue?
```
– Stan Bashtavenko Jul 30 '15 at 18:15
Or you can put the code you want to highlight in a file, and have prism load and highlight it from the file and inject it into the page. – steviesama May 27 '16 at 22:52
I serve regular HTML and break it with JavaScript. Combined with a beautifier, it works quite well. I find this particularly useful when I want to see both the code and a rendered example by cloning the example and place it into `
```
` tags.
```
– MCTaylor17 Sep 09 '16 at 20:37
2

Another way to handle HTML syntax is to wrap your HTML code in `` as suggested here: http://stackoverflow.com/a/27495949/1097123. I think its much better than replacing `<` with `<` – kimbaudi Jan 30 '17 at 10:55

score 5 · Answer 2 · answered Nov 27 '20 at 07:45

I want to add that another very simple possibility is to use the archaic <xmp>-tag like so:

<pre><code class="language-html">
<xmp>
  <p>this markup is now rendered as expected although your IDE might be upset about you using that old tag</p>
</xmp>
</code></pre>

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

To solve issue 1):

You can use the unexcaped-markup plugin

This is how it works:

<script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

To ignore first and last returns I would recommend using the normalize whitespace plugin.

To solve issue 2):

There exists no languages-html see http://prismjs.com/index.html#languages-list. HTML is a HyperTextMarkupLanguage so its included in language-markup. Thats what you have to use.

score 2 · Answer 4 · answered Mar 24 '16 at 13:16

2

I had the same problem with the HTML. I didn't want to replace the <, > with &lt &gt so what I did was put the code inside textarea-elements inside a hidden div and once the page was loaded copied the contents of all textareas to code-elements. This way I was able to keep the code as it is and render it withou issues.

The obvious downside of course is that without JS there is no content but then again the highlighter wouldn't work either.

answered Mar 24 '16 at 13:16

Hardev

10,851
2
17
17

3

You don't have to replace `<` and `>` with `<` and `&rt;`. Just wrap your html code in ``. Take a look at http://stackoverflow.com/a/27495949/1097123 – kimbaudi Jan 30 '17 at 10:53

score 1 · Answer 5 · answered Jul 28 '16 at 11:10

The best solution is to save the html you want highlighted into a seperate file. You'll need to include the file highlight plugin into your js.

The syntax highlighting will be worked out from the extension

<pre data-src="assets/partials/picture.html"></pre>

score 0 · Answer 6 · answered Dec 12 '20 at 12:58

I actually ran into same issue where i placed prism js and prism css on html page but couldn't get the highlighting. Not sure if it will be the issue with others but for me it was some global css that was set as color black for all "code","pre" tags. After i removed that color from there prism highlighting started showing. If it still doesn't work than you can follow this article Code syntax higlighter using Prism js. I couldn't see much difference but i was having issue when i placed prism js below the code i wanted to highlight. When i moved that to top it started working. If anyone have issue they can try this.

lewishole · Answer 7 · 2021-07-21T06:19:06.257

I think Adam's answer should be the best solution in this case. I just elaborate more on the use for the unexcaped-markup plugin to make the HTML highlighter in the simplest way.

Since <script /> will only work on single line of code, therefore you may want to insert simple HTML-comment to escape all of your codes:

<pre class="language-markup"><code><!--
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
--></code></pre>

Everything inside the comment would be printed prettily. It's worth a try if you need to print you HTML markup by using Prism.

Prism HTML highlighter

7 Answers7

Linked