Help with "Prism Syntax Highlighter" does not work right

Asked

Viewed 35 times

1

I have a little problem adding "Pre Code" to my blogger.

When I add codes in the "language-css" markup for example, the added codes work perfectly, but when adding html languages in the "language-Markup" markup, it Uga, as shown in the image below:

inserir a descrição da imagem aqui

and the right thing is to stay that way:

inserir a descrição da imagem aqui

Here’s the code I use to add HTML languages:

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ...Código HTML... </code></pre>

Where is "... HTML code..." I replace with any HTML codes for "Pre Code" markup like this for example: 

<div class="testprecode">Testando Código HTML</div>

Instead of appearing the whole code, it appears only "Testing HTML Code".

This only happens when I add in the "language-Markup markup".

When I add css to the "language-css" markup, it looks good, perfect.

I would really appreciate it to those who help me, I really need it in my blog.

html css

  • Oh yes. I did and it worked, but then I thought I’d spend a lot of time doing it. But I’m glad there’s a site to copy and paste. Thank you and sorry there for doing or almost making you lose your patience. kkkjj

  • Imagine, it wasn’t that. I recommended the improvements to make it easier for someone to help you, it wasn’t complaining. I’m sorry you gave that impression, but that’s not it. Whenever you use the site, look at people’s recommendations as a way to make it easier for us to help, that’s all.

1 answer

4

The problem is that it is mixing the HTML that is to be displayed with the HTML that mounts the page.

The solution is to do the escape internal HTML in this way:

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">
    &lt;ul id=&quot;arlina-desing&quot;&gt;
      &lt;li class=&quot;active&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;Top&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

Here is a tool that makes this conversion for you:

http://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder

Remember that in addition, the configuration of white Espace of the main CSS has to be correct to preserve line breaks and indentation spaces.

When one uses a language server side, like PHP, has functions ready for this, like htmlentities( ) for example.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.