CODEWITHSUNDEEP
javascripthtml
Houy Narun
Houy Narun

Reputation: 1725

Unable to make highlight.js work with my Javascript function

Given the script below, I would like to highlight html syntax using highlight.js and my javascript but it does not work.

var entityMap = {
  "&": "&",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&#39;",
  "/": "&#x2F;",
  "`": "&#x60;",
  "=": "&#x3D;",
};

function escapeHtml(string) {
  return String(string).replace(/[&<>"'`=\/]/g, function(s) {
    return entityMap[s];
  });
}

$(document).ready(function() {
  $("code").each(function(e) {
    code = $(this).html();
    raw = escapeHtml(code);
    $(this).html(raw);
    $(this)
      .parent();
  });
})

hljs.initHighlightingOnLoad();
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>

<pre>
        <code class="html">
            <!DOCTYPE html>
            <title>Title</title>

            <style>body {width: 500px;}</style>

            <script type="application/javascript">
              function $init() {return true;}
            </script>

            <body>
              <p checked class="title" id='title'>Title</p>
              <!-- here goes the rest of the page -->
            </body>
                
        </code>
    </pre>

In script above, I tried to use function escapeHtml(string) to escape any given html syntax entities, and then after that I called highlight js initialization hljs.initHighlightingOnLoad(); but seem it does not work correctly.

What is wrong with that?

Upvotes: 0

Views: 611

Answers (1)

Vadim Hulevich
Vadim Hulevich

Reputation: 1833

It's not a best solution, i recommend you to find some way to escape symbols in source code on your page. It's possible on server side (php, nodejs, ...other).

<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<pre>
    <code class="html">
        <!DOCTYPE html>
        <title>Title</title>

        <style>body {width: 500px;}</style>

        <script type="application/javascript">
          function $init() {return true;}
        </script>

        <body>
          <p checked class="title" id='title'>Title</p>
          <!-- here goes the rest of the page -->
        </body>
    </code>
</pre>
<script>
const entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;",
    "/": "&#x2F;",
    "`": "&#x60;",
    "=": "&#x3D;",
};

function escapeHtml(string) {
  return String(string).replace(/[&<>"'`=\/]/g, function(s) {
    return entityMap[s];
  });
}

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    block.innerHTML = escapeHtml(block.innerHTML);
    hljs.highlightBlock(block);
  });
});

</script>

This is a good example https://codepen.io/r3hab/pen/KKPWJJw

Upvotes: 1

Related Questions