如何在多个元素上调用W3Schools CodeColor语法高亮库？

1. 修正HTML规范问题：ID在页面中必须唯一，请将重复的id="myDiv"统一替换为类名（比如class="code-block"）。

2. 针对多元素调用w3CodeColor：
   该函数仅接受单个DOM元素作为参数，而getElementsByClassName返回的是类数组集合，因此需要遍历集合，为每个元素单独调用高亮函数：

方法1：使用getElementsByClassName + for循环 #

// 获取所有目标元素
const codeElements = document.getElementsByClassName('code-block');
// 遍历并逐个应用高亮
for (let i = 0; i < codeElements.length; i++) {
  w3CodeColor(codeElements[i]);
}

方法2：使用querySelectorAll + forEach（更简洁） #

// 获取所有目标元素并遍历
document.querySelectorAll('.code-block').forEach(element => {
  w3CodeColor(element);
});

对应的HTML结构示例：

<div class="code-block">// 这里放代码示例
function hello() {
  console.log("Hello World");
}
</div>
<div class="code-block">// 另一个代码示例
let num = 123;
if (num > 100) {
  alert("Number is large");
}
</div>

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