如何使用 JavaScript 为 pre 元素中的代码设置样式？答案

【问题标题】：How to use JavaScript to style the code in a pre element?如何使用 JavaScript 为 pre 元素中的代码设置样式？
【发布时间】：2013-10-06 03:40:41
【问题描述】：

如何突出显示 pre 元素中的代码？已经有关于突出显示它的问题，但答案都在 JQuery 中。是否可以在没有标签的情况下做到这一点，它是 JavaScript 中的 id 而不是 JQuery。我不希望整个代码块是相同的颜色我希望每个标签打开和标签关闭都是一种颜色，标签值是另一种颜色，属性和它的值是另一种颜色。

【问题讨论】：

标签： javascript html pre

【解决方案1】：

document.getElementById("idofpre").style.color="#99999";

【讨论】：

你有没有看到我说过不要让整个文本块的颜色相同，每个项目都为自己。例如，标签打开和标签关闭一种颜色，而属性另一种颜色。请再读一遍。

【解决方案2】：

你试过了吗？

document.getElementById("the_id_of_pre_block").style.property="value";

上面的代码会获取元素的ID并更新样式。第二件事你也可以使用 TagName：

document.getElementsByTagName("pre").style.property="value";

否则您可以使用 jQuery（更简单的方法，但不是您的方法）来设置内容的样式。使用这个：

$(document).ready(function() {
  $('pre').css('background-color', '#anyhexcode');
});

这将更改 pre 块内所有文本的 background-color。这就是你可以用 JavaScript 做的事情。

还有一件事：

您使用的是onload=hightlight()，但您使用的是colorize() 的功能，您确定这样好吗？我认为你需要改变它！

【讨论】：

你有没有看到我说过不要让整个文本块的颜色相同，每个项目都为自己。例如，标签打开和标签关闭一种颜色，而属性另一种颜色。请再读一遍。
然后可以使用document.getElementById()，然后使用不同元素的id，改变它们的样式。
请再读一遍，我不希望标签和它们的 id 出现在 pre 中，我只希望代码在那里。否则，我将不得不在代码块中代码的每个部分添加一个标签和它的 id。