如何使用 JavaScript 在 pre 元素中设置代码样式

How to use JavaScript to style the code in a pre element?

本文关键字：设置 代码 样式 元素 pre 何使用 JavaScript      更新时间：2023-09-26

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

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

你试过这个吗？

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

上面的代码将获取元素的 ID 并更新样式。第二件事你也可以使用标签名称：

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

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

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

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

还有一件事：

您正在使用onload=hightlight()但您有一个功能colorize()您确定这很好吗？我认为你需要改变这一点！

相关文章：