Prism: language-markup < problem

Created on 23 Apr 2015  路  20Comments  路  Source: PrismJS/prism

how i understand plugin dont work with html tags, and i must replace simbol "<" to "& lt;" ?
why you dont add something like this:
$('code').each(function(){
var el = $(this);
el.text(el.html());
});

Most helpful comment

http://www.sitepoint.com/everything-need-know-html-pre-element/

Please do some research before posting queries.

All 20 comments

http://www.sitepoint.com/everything-need-know-html-pre-element/

Please do some research before posting queries.

This is the way <pre> elements work. It has nothing to do with Prism itself.

Why if it work nice in your example you do something like this:
<pre><code><p>hi234234 sdfs!</p></code></pre>

Why you cant write:
<pre><code><p>hi234234 sdfs!</p></code></pre>

prism-gh-pages/example.html

Maybe i don't understand something, but prism don`t work with native html. Right?

@iLightGit Did you even go through the link, I posted?.

It's html that does not work like this:

<pre><code><p>hi234234 sdfs!</p></code></pre>

It has nothing to do with prism.

You can try it without prism and see for yourself.

I think what @iLightGit means is: Since Prism strips out HTML tags inside <code> anyway, why not just allow unescaped HTML inside it?

If you add a language-markup class to the above example, and run it through Prism, you will get

<pre><code class="language-markup">hi234234 sdfs!</code></pre>

So it really wouldn鈥檛 break anything whether Prism auto-escapes HTML or not.

I don鈥檛 agree with this myself, to be honest. I鈥檓 just trying to figure out the reasoning behind the comment. Auto-escaping should not be part of Prism in any case, and you can always loop through the code blocks yourself, or just write a plugin to escape the block before Prism process them.

@iLightGit: The point @vkbansal is trying to make is that even without Prism, if you use the following code:

<pre><code><p>hi234234 sdfs!</p></code></pre>

the browser will not make the <p> tag appear litterally, it will be interpreted as standard HTML.

Prism removes standard HTML from the tags before highlighting. But it could be able to keep it in some cases (see #558 if you're interested in this). So... to be able to keep it sometimes, you have to escape your own code you want to display, so that it is not to be confused with standard HTML.

Even if I escape the opening html tags with "lt;", prism still strips them off.

@StanBPublic Demo or it didn鈥檛 happen :)

Did some pretty scientist said demo?

Problem
Solution

Nice demo, @javatlacati!

But I think we're specifically trying to see a demo of Prism stripping &lt;? (Correct me if I'm wrong, though!)

Also, we should leave references to physical attractiveness out of this; they aren't relevant.

My bad, I was thinking it was a pre escaping html as html issue. Please continue on your philosophical discussion on the < entity

i'm still having the problem with "<".
forgive me i'm not that much skilled, but here's my problem:
i'm pulling snippets of code stored in mysql. (bash, python,..)
and when i try to display some code with this:
echo "<br>".$myrow["body"]."<br>";
the data pulled from mysql look like this:

pass script to ssh:
<pre><code class="language-bash">ssh host -l user $(<cmd.txt)</pre></code>

but in the browser it get displayed like this:

pass script to ssh:
ssh host -l user $(

everything after the < is missing on that line.
what can i do about it ?
thanks

If it's PHP, use htmlspecialchars to escape the output from the database, which you should do anyway for security reasons.

thanks for the quick reply but,
if i do that, the output in the browser is not highlighted anymore. it shows a flat line like this:
pass script to ssh.<br /> <pre><code class="language-bash">ssh host -l user $(<cmd.txt)</pre></code><br /> <br />
no highlight, no newline, just a long raw string.

here's the line i used with php:
echo "<br>".htmlspecialchars(nl2br($myrow["body"]))."<br><br>";

You should just store the code snippet itself in the DB, not the wrapping pre and code elements.

that's not possible, my whole article is stored in the DB.
that would put the whole article inside <pre><code> and try to highlight it. that is not reasonable.
what i'm describing here about storing whole blog article in DB is very common thing.
i have part of the article that need highlighting, and some other part that are just text.
for what it's worth, i used to do it with syntax highter. it worked that way. geshi and some other highlighter i tried worked too.
you're sure about that answer you gave me ?
or am i missing something ?
if i do like you said: my whole blog entry will be highlighted as if it was a giant code snippet..

You should escape the actual code before even storing it IMO.

thanks for the reply Golmote, but,
that would mean i would be storing escaped code & text in DB.
i was reading on stackoverflow this is the kind of thing i'd want to avoid.
i have reverted back my site to previous highlighter, the one from Gorbatchev. Prism looked nice, but i cannot seem to be able to use it right now. i will have to see if i can find a workaround all this problem i was describing above.

There are a couple places you could choose to handle this, but you'll have to decide that based on your application's architecture. As mentioned above, auto escaping is not something Prism intends to handle, so you'll need to devise your own solution here. You could escape it in the text editor, save the code snippets separately so you can escape them on their own (what I do), or use JS to escape the characters on the front end before Prism runs or use a Prism hook to do it.

the only thing i can think of, is to grab the body of the blog entry off the DB, and then parse it to isolate bits between custom tags then i would need to replace the custom tags with <pre><code> </code></pre> . this is a bit of a hassle. unless i can figure something easier, i think i'll stick with what i have at the moment. thanks for the help though.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

apollolux picture apollolux  路  4Comments

jaune162 picture jaune162  路  6Comments

myst729 picture myst729  路  6Comments

huweihuang picture huweihuang  路  6Comments

timehat picture timehat  路  4Comments