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

Jim*_*hen 5 javascript pretty-print

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

如果我不分配class="prettyprint"<pre>在静态html,但希望以后应用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>
Run Code Online (Sandbox Code Playgroud)

在Chrome v26中打开,调出控制台,执行:

pres=document.getElementsByTagName('pre')
pres[0].className+=" prettyprint"
Run Code Online (Sandbox Code Playgroud)

语法颜色没有出现.

在此输入图像描述

Jim*_*hen 10

根据这里发现的评论,如何获得使用动态生成的dom元素的prettyprint,我找到了出路.只需致电:

PR.prettyPrint()
Run Code Online (Sandbox Code Playgroud)

顺便说一句:如果你想删除代码颜色高亮,你不能简单地将pre的类设置为空,然后PR.prettyPrint()再次.PR.prettyPrint()只能附加颜色标签但不能删除它们.一种可行的方法是<pre>在应用prettyprint之前保存原始内容,然后再恢复<pre>s内容.在我的帖子jQuery中验证过,如何克隆保存的元素?.

在此输入图像描述

  • 运行PR.prettyPrint()时,它会将"prettyprinted"类添加到它更改的每个元素中.如果你需要将prettyPrint重新应用到<pre>,首先删除"prettyprinted"类,然后调用PR.prettyPrint() (8认同)