Question

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

如果我没有在静态html中将class="prettyprint"分配给<pre>，但希望稍后应用漂亮的图片（例如，当用户点击我网页上的“着色”按钮时），如何我能做到吗？

稍微修改原始的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"

语法颜色没有出现。

enter image description here

Answer 1

根据How to get prettyprint to work on dynamically generated dom element中的评论，我找到了出路。请致电：

PR.prettyPrint()

BTW：如果你想删除代码颜色突出显示，你不能简单地将pre的类设置为空，然后再将PR.prettyPrint()设置为空。 PR.prettyPrint()只能附加颜色标记，但不能删除它们。一种可行的方法是在应用prettyprint之前保存原始的<pre>内容，然后再恢复<pre>的内容。已在我的帖子jQuery, how to clone back saved elements?中验证。

enter image description here

Answer 2

您可以找到三个示例here

我在js中做了如下：

document.getElementById('outputa').innerHTML = 
 PR.prettyPrintOne("your code in brackets or your variable (without these brackets)",
 'java');

如何在加载run_prettify.js之后重新应用prettyPrint

2 个答案: