Markup Not Showing Up Using Prism JS

Question

I'm trying to use PrismJS as my syntax highlighter for my blogspot blog. After having troubles with Syntax Highlighter, I thought I would give prism a try.

My code look like this:

<pre class="line-numbers language-markup">
    <code>
        <b:if cond='data:blog.url == "http://domain.com/p/about.html"'>
            <style type="text/css">
                font-size: 22px;
            </style>
        </b:if>
    </code>
</pre>

I have included the prismjs file before the </head> tag.

The CSS works, there are no errors in my Chrome console, yet the script shows no markup.

I have a jsFiddle with the exact same code on my site, and it also doesn't show the line numbers, even though my site does. http://jsfiddle.net/fyqnz/

Site example: http://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html

Any idea why this isn't working?

Chris B · Answer 1 · 2014-12-16T01:43:40.147

47

Did a little playing around with this plugin and found that replacing < and > with > and < was kind of a pain. For what its worth if you wrap your html with a script tag, everything highlights. Because html inside of an untyped script tag doesn't play nice with Visual Studio, I gave it a type of prism-html-markup.

<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <h1 class="foo">h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
        </script>
    </code>
</pre>

Hope this helps!

edited Dec 16 '14 at 01:43

answered Dec 16 '14 at 01:09

Chris B

471
1
4
3

1

Thank you. I was having problem showing unescaped markup. Documentation in official site said nothing about putting script inside pre and code. They use it without pre and code here but I couldn't figure out how they got it to work: http://prismjs.com/plugins/unescaped-markup/ – Suresh Subedi Apr 17 '16 at 12:59
4

This should be the accepted answer. Replacing `<` with `<` and `>` with `&rt;` is really tedious and possibly error-prone. – kimbaudi Jan 30 '17 at 10:50

Chris Ferdinandi · Accepted Answer · 2013-08-25T02:13:02.260

15

The class="language-*" needs to go on the <code> element, not the <pre> element. I was making this mistake at first, too.

Updated with correct info

It appears the JS Fiddle doesn't like Prism. Working fine on CodePen and locally on my machine: http://codepen.io/anon/pen/xmwji. Prism uses Regex to identify the sections to highlight. Make sure you escape your code properly. Opening tags (the < symbol) should be written as <, and closing tags (the > symbol) as >.

edited Aug 25 '13 at 02:13

answered Aug 23 '13 at 01:45

Chris Ferdinandi

1,892
4
26
34

in the examples, it's in the `

` tag. I tried it anyway, now the line numbers on't even show up.

– Xarcell Aug 23 '13 at 02:07

1

You're right - I misread the documentation. It appears the JS Fiddle doesn't like Prism. Working fine on CodePen and locally on my machine: http://codepen.io/anon/pen/xmwji. Prism uses Regex to identify the sections to highlight. Make sure you escape your code properly. Opening tags (the `<` symbol) should be written as `<`, and closing tags (the `>` symbol) as `>`. – Chris Ferdinandi Aug 23 '13 at 12:47
3

It doesn't matter where you put the language class, it's inherited anyway. Also, you don't need to escape `>`, just `<` to `<` should be sufficient. – Lea Verou Apr 28 '14 at 16:43

score 6 · Answer 3 · answered Jul 02 '21 at 21:23

I've found that Prism only works if you import each language individually:

import Prism from 'prismjs';

// Languages must be imported individually,
// to support syntax highlighting
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-csv';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-git';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-mongodb';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-regex';
import 'prismjs/components/prism-sql';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-yaml';

score 5 · Answer 4 · answered Jan 09 '18 at 22:06

5

You can use the unescaped-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.

answered Jan 09 '18 at 22:06

Adam

25,960
22
158
247

score 3 · Answer 5 · answered Nov 11 '16 at 09:33

3

Add extra 'xmp' tags between 'code' and put your html code inside 'xmp' tags. Worked for me.

<pre class="language-markup line-numbers">
<code>
<xmp>
<h1>Test</h1>
</xmp>
</code>
</pre>

answered Nov 11 '16 at 09:33

martin_borman

55
7

3

I would not recommand this technique as it's been deprecated since HTML3.2. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp – Eldoïr Oct 24 '18 at 22:36

score 0 · Answer 6 · answered Jun 17 '23 at 00:21

My Gatsby template had a file called .babelrc. When I added the languages to .babblerc, everything loaded.

{
  "presets": ["babel-preset-gatsby"],
  "plugins": [
    [
   "prismjs",
   {
      //add languages here
     "languages":  ["javascript", "css", "markup", "php", "python", "bash", "csharp", "powershell"],
     "plugins": ["show-language"],
     "theme": "twilight",
     "css": true
     }
    ]
]
}

Markup Not Showing Up Using Prism JS

6 Answers6

Linked