Highlight file contents fetched from GitHub

Question

I cannot get syntax highlighting to work for code fetched from GitHub.

fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1")
      .then(response => response.text())
      .then(data => document.getElementById('code').textContent = data)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/powershell.min.js"></script>
<script>hljs.highlightAll();</script>

<pre>
<code class="pwsh" id="code"> </code> 
</pre>

However, it's working with code in the same file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/powershell.min.js"></script>
<script>hljs.highlightAll();</script>

<pre><code class="pwsh">
    #PowerShell Hello World
   param
(
    [Parameter(Mandatory=$false)]
    [String] $Name = "World"
)

"Hello $Name!"
 </code></pre>

How should one use the code and pre tags together to highlight code fetched from GitHub?

The different is first example has <code><pre>...</pre><'/code> and second has <pre><code>....</code></pre> — jdweng
– jdweng, Commented Feb 4, 2023 at 22:17
<pre id="code"><code class="pwsh"> </code> </pre> didn't work with the GitHub fetched code either. — Ayan Mullick
– Ayan Mullick, Commented Feb 4, 2023 at 22:23
There are 2 more issues: make sure you're writing the text content into the <code> (not the pre) and make sure that hljs.highlightAll(); is called after you loaded the code snippet into <code> — A_A
– A_A, Commented Feb 4, 2023 at 22:24
That’s because you’re inserting the code asynchronously after highlight.js has been invoked and looked at the DOM. The DOM does not contain the GitHub code at runtime. — Terry
– Terry, Commented Feb 4, 2023 at 22:51
You need to manually invoke highlighting for the element after fetching the data from GitHub. Use their hljs.highlightElement() method. — Terry
– Terry, Commented Feb 4, 2023 at 23:52

Terry · Accepted Answer · 2023-02-05 14:22:24Z

The reason why highlight.js doesn't work with your code, as I have pointed out in my comment, is that you are inserting the code asynchronously into your DOM after highlight.js has already parsed the DOM. As the code is only inserted after the page is loaded, highlight.js will not be able to detect it.

If you read through their documentation you'll discover that the plugin offers a highlightElement() method (scroll down the "Custom usage" section on their documentation), which allows you to manually highlight an element.

So the solution is simply invoking hl's.highlightElement() in the callback you use in your .then() chain:

fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1")
  .then(response => response.text())
  .then(data => {
    const codeElement = document.getElementById('code');
    codeElement.textContent = data;
    
    // Manually trigger code highlighting
    hljs.highlightElement(codeElement);
  });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/powershell.min.js"></script>
<pre>
  <code class="pwsh" id="code"> </code> 
</pre>

Collectives™ on Stack Overflow

Highlight file contents fetched from GitHub

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related