6

我正在尝试使用 Javascript 代码美化器，并提出一个问题。

如果我没有在静态 html 中分配class="prettyprint"，<pre>但希望稍后应用 prettyprint（例如，当用户单击我网页上的“着色”按钮时），我该如何实现？

稍微修改原始的 run_prettify.js 或 prettify.js 是可以接受的，因为我打算离线使用它。

我的实验：

编写 try-delay-class.html：

<html>
<head>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
See it:
<pre>
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila1">tags</a>.
}
</pre>
</html>

在 Chrome v26 中打开，调出控制台，执行：

pres=document.getElementsByTagName('pre')
pres[0].className+=" prettyprint"

语法颜色没有出现。

在此处输入图像描述

4

2 回答 2

12

根据在这里找到的评论，如何让 prettyprint 处理动态生成的 dom 元素，我找到了出路。只需致电：

PR.prettyPrint()

顺便说一句：如果要删除代码颜色突出显示，则不能简单地将 pre 的类设置为空，然后PR.prettyPrint()再次设置。PR.prettyPrint()只能附加颜色标签，但不能删除它们。<pre>一种可行的方法是在应用 prettyprint 之前保存您的原始内容，然后再恢复这些<pre>内容。在我的帖子jQuery 中验证，如何克隆回保存的元素？.

在此处输入图像描述

于 2013-04-23T03:04:24.640 回答
1

你可以在这里找到三个例子

我在js中做了如下：

document.getElementById('outputa').innerHTML = 
 PR.prettyPrintOne("your code in brackets or your variable (without these brackets)",
 'java');
于 2017-11-12T09:48:17.380 回答