HighlightJS in an HTML template

JavaScript
1 
<pre><code class="lang">
	<nav class="rowtwo">
	<a class="navlist">Home</a>
	<a class="navlist">London</a>
	<a class="navlist">Paris</a>
	<a class="navlist">New York</a>
	<a class="navlist">TICKETS</a>
	</nav>
</code></pre>

I have put this in my HTML. The live link

But if you see in the live link it is yet interpreting as HTML code, not content which means JS is not affecting what it would have done.

image
image933Ă—614 67.1 KB

Am I doing some mistake?

2

I’ve looked at your HTML source code and it seems that the “bare minimum” as they call it, for using highlight.js is not being done.

Here is a link to the usage details:

https://highlightjs.org/usage/

1 Like
3

Ptoblem is in HTML code.

JS is fine:

<pre><code>					
const currentSlider = document.querySelector('[data-slider]');
const slideContainer = document.querySelector('[data-slide-container]');
const slides = currentSlider.querySelectorAll('[data-slide]');
let sliderDots = [];
hljs.initHighlightingOnLoad();
==>
</code></pre>

CSS is fine:

<pre><code>					
	h1, h2, h3, h4, h5, h6, ul, span, p {
		margin: 0; 
		padding: 0;
		font-weight: normal;
		text-align: center;
		/*margin:20px auto;*/
	}
</code></pre>

But HTML has an issue →


<pre><code class="html">					
<h1>Your new favorite campaign builder</h1>
<p>
	Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Quidem neque laborum reprehenderit distinctio, dolores, error consectetur eligendi eveniet veritatis incidunt, culpa nisi eaque earum illo? Laborum, in tenetur ipsam consequatur!
</p>
</code></pre>

I also tried to put class = HTML, nut still that has not fixed anything.

4

It seems to be working now that you’ve added the hljs.initHighlightingOnLoad()

The new problem that you seem to be having is that the HTML code is being interpreted by the browser as HTML code.

You can deal with that by escaping the HTML code tags, using &lt; and &gt; instead.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.