Prism HTML highlighter
I'm using Prism and its working well for CSS:
<pre><code class="language-css">p { color: red }</code></pre>
but i can't get it working for html:
<pre><code class="language-html"><p class="red">red text</p></code></pre>
I have 2 problems:
<and>are represented as tags, not as text, but i could replace it by<and>More important, even replaced as shown in problem 1, the highliter will not highlight any code and everything is just black. Despite that it is working for CSS, whole code looks like this:
<!DOCTYPE html> <html> <head> <link href="prism.css" rel="stylesheet" /> </head> <body> <script src="prism.js"></script> <pre><code class="language-css">p { color: red }</code></pre> </body> </html>
Thanks for any help.
Answer
Use <code class="language-markup"> to style html code.
Also, you only need to escape the beginning of the tags with <, don't worry about the > characters. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.
This should work:
<!DOCTYPE html>
<html>
<head>
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<script src="prism.js"></script>
<pre><code class="language-markup">
<p class="red">red text </p>
</code></pre>
</body>
</html>