search

addyosmani / prism-js

A Polymer element for syntax highlighting with Prism.js
149 stars 15 forks source link

White space issue #4

Closed cfjedimaster closed 10 years ago

cfjedimaster commented 10 years ago

In using Prism in my blog, I've noticed that sometimes Prism pads the output a bit too much. Often I'll do this:

<pre><code class="language-markup"><html>
moo
</html></code></pre>

This reduces the amount of space around the rendered code. I noticed the same with your component, but when I tried the same thing, for example:

<prism-js language="css">p { color: blue; }</prism-js>

I got this: https://www.evernote.com/shard/s3/sh/b9377185-d7ca-4c78-8f31-3cb0d2591736/abe0e36bf9990284aee365849317ce95

In another example, I tried this:

<prism-js language="markup" escape="true"><p>Some paragraph text</p>
<p data-foo="bar"></p>
<style>
 p { color: red; }
</style></prism-js>

and got this: https://www.evernote.com/shard/s3/sh/b7e00391-2bd1-4a59-a2ac-4415c54213d4/e363ab595c7437d5da80507ae62214b8

fostertheweb commented 10 years ago

It's because of how the template is written within prism-js.html. Putting pre and code all on one line caused some issues, but removing the indentation of the closing pre tag removes the extra line. I'm not sure if that is an acceptable fix, but I submitted a pull request anyway in hopes of moving towards a better fix.

addyosmani commented 10 years ago

Thanks again @fostertheweb. This should be fixed since https://github.com/addyosmani/prism-js/pull/5 but if not, do let me know and I'll reopen the issue