使用 "google-code-prettify" 和动态 DOM 的尝试失败

Question

在 head 标签内我有：

<link rel="stylesheet" href="google-code-prettify/prettify.css">
<script src="google-code-prettify/prettify.js"></script>

在 body 标签内的某处我有：

<div id='code-context'>
    <pre class="prettyprint"><code class="language-js"></code></pre>
</div>

在我的主 css 文件中，我有一些 pre 和 code 应该覆盖美化：

#code-context pre, #code-context code {
    font-family: 'Ubuntu Mono', monospace;
    width: 80ch;
    white-space: pre-wrap;
}

故意，我没有包括<body onload="prettyPrint()">。 #code-context 在页面加载时隐藏，因此没有必要。代码在用户触发 jQuery 函数后可见：

$('#code-context').show();
var fileSource = "code-to-display.js";
$('code').load(fileSource);
$('.prettyprinted').removeClass('prettyprinted');
prettyPrint();
console.log('succeded!');

我在控制台中收到消息（这意味着一切正常），但实际上我得到的是所有代码周围的边框，而代码本身不是 color-coded。

帮忙？

Answer 1

找到了！

我使用 jQuery 的 get() 而不是 load() 并且它起作用了，尽管我不完全明白为什么。

使用 "google-code-prettify" 和动态 DOM 的尝试失败

Unsuccessful attempt using "google-code-prettify" with dynamically DOM

html

jquery

prettify

google-code-prettify