Prism: Weird indentation issue

Created on 18 Mar 2015 · 10Comments · Source: PrismJS/prism

I've got syntax highlighting working, but all of my code gets indented. See here for what I mean: http://rwwagner90.github.io/ember-shepherd/

Has anyone seen this before and is there a fix?

Source

rwwagner90

Most helpful comment

The <code> element must not be indented inside the <pre> element.

i.e. You should do this:

<pre class="language-..."><code>your
code
here</code></pre>

instead of this:

<pre class="language-...">
    <code>your
code
here</code>
</pre>

Golmote on 18 Mar 2015

🎉4

All 10 comments

The <code> element must not be indented inside the <pre> element.

i.e. You should do this:

<pre class="language-..."><code>your
code
here</code></pre>

instead of this:

<pre class="language-...">
    <code>your
code
here</code>
</pre>

Golmote on 18 Mar 2015

🎉4

My IDE literally won't allow me to do this. I just put it all on one line, and it works, but that is not very good. It would be nice to ignore the indentation of the <code> tag and just look at the content inside. Is there a reason to not do that?

rwwagner90 on 19 Mar 2015

This really isn’t Prism’s problem, if I am not mistaken. Prism works by replacing the <code> block with highlighted content, and does not touch anything outside it. That includes newlines and white-spaces between the <pre> and <code> tags. So if your <code> block was indented, the highlighted content will be indented.

The best “solution” here might be some custom JavaScript to strip the extra content yourself, outside Prism. Or it can be done as a Prism plugin, I think.

uranusjr on 19 Mar 2015

Just made a quick hack of a plugin, available here. Should be straightforward to use.

uranusjr on 19 Mar 2015

@rwwagner90 @uranusjr There's already a well-tested script for that
https://github.com/leeoniya/preCode.js

vkbansal on 20 Mar 2015

@vkbansal I'm not sure preCode handles the spaces between the opening <pre> and the opening <code> by default, though.

Golmote on 20 Mar 2015

Since this issue is not a problem with Prism, but the normal behaviour of <pre> tags, I'm closing it.

Golmote on 16 Sep 2015

THANKS @vkbansal , you made my day !!

0ctobat on 7 Dec 2015

May not be a problem with Prism, but it's certainly a problem that Prism could solve, right? Seems like a pretty common use-case to expect code's whitespace to be formatted relative to it's wrapper div. I'd love for this feature to be reconsidered, even if easy external fixes are available.