从GitHub获取的代码无法语法高亮，如何正确使用code与pre标签？

问题出在执行时机：hljs.highlightAll()在页面加载完成就运行了，但通过fetch拉取代码并插入DOM的操作是异步的，此时目标<code>标签还没有内容，所以highlight.js没法对它进行高亮处理。而本地写死的代码在页面加载时就存在，因此能被正常识别高亮。

解决方法很简单，在异步获取代码并插入DOM之后，手动调用高亮方法处理目标元素：

修改后的JavaScript代码 #

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;
    // 手动调用高亮方法处理当前元素
    hljs.highlightElement(codeElement);
  })

对应的HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/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>

这样修改后，当代码成功从GitHub获取并插入到<code>标签里，就会立刻触发高亮处理，实现和本地代码一样的语法高亮效果。

内容的提问来源于stack exchange，提问作者Ayan Mullick