Search code examples
htmlmeta-tagshighlight.js

highlight.js disappearing html meta tags

I have used highlight.js successfully in other places. but I can't get it to work now. Code disappears.

hljs.highlightAll()
<pre><code class="language-html">
<!-- android - change the color of header bar and address bar -->
<!-- mobile_header_color -->
<!-- mobile_header_color START-->
<meta name="theme-color" content="#4285f4">
<!-- blue -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</code></pre>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/an-old-hope.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

Solution

  • Escape the HTML the error message complains about:

    hljs.highlightAll()
    <pre><code class="language-html">&lt;!-- android - change the color of header bar and address bar -->
&lt;!-- mobile_header_color -->
&lt;!-- mobile_header_color START-->
&lt;meta name="theme-color" content="#4285f4">
&lt;!-- blue -->
&lt;meta name="theme-color" content="#4285f4">
&lt;!-- Windows Phone -->
&lt;meta name="msapplication-navbutton-color" content="#4285f4">
&lt;!-- iOS Safari -->
&lt;meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
&lt;!-- Windows Phone -->
&lt;meta name="msapplication-navbutton-color" content="#4285f4">
&lt;!-- iOS Safari -->
&lt;meta name="apple-mobile-web-app-capable" content="yes">
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></code></pre>



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/an-old-hope.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>