Menu
Essentially I can't get the HTML to render at all.
HTML:
<head>
<link rel="stylesheet" href="/path/to/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<pre>
<code class="html">
<!-- markup goodness here -->
</code>
</pre>
I tried javaScript and it works flawlessly...
Any ideas?
UPDATE:
I inserted the markup in question.
<pre>
<code class="xml">
<div class="card-img-container">
<div class="card-img-row">
<div class="card ">
<div class="col-xs-12 col-sm-6 col-md-6 card-vertical-center">
<h1>Curabitur gravida vestibulum imperdiet.</h1>
<p>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
<p>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
<a href="#" class="btn btn-primary style-guide">Read More</a>
</div>
<div class="hidden-xs col-sm-6 col-md-6 card-vertical-center">
<img class="center-block card-img-responsive" style="display:table-cell;" src="/path/to/image.jpg" alt="">
</div>
</div>
</div>
</div>
</code>
</pre>
UPDATE 12-8-2016:
I found a work around but still haven't solved the issue. Apparently there is a Sublime text plugin called SublimeStringEncode which will Encode your HTML tags.
However as you can see that solution looks messy in the markup and while easy for me to follow, might be hard to 'get' for others who share my CMS...Also I couldn't get a horizontal scroll bar to appear...
628
I did something similar to what you said in your update. I'm using the WP-Code-Highlight.js for my WP blog. When trying to format the HTML code, it kept rendering as HTML, rather than only showing the code. Meaning instead of seeing <h1>Hello</h1> I was seeing a big rendered h1.
The workaround was as you suggested. I used < and > to make the code render as HTML code that I want to display. For example:
<pre>
<code class="xml">
<h1>hello></h1>
</code>
</pre>
I wish there was a better solution but I have yet to find one.
116
answered Jun 07 '26 23:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With