如何呈现位于 HTML 文件之外的漂亮打印的 Java 源代码？

Question

我正在考虑为 Java 概念编写教程，如果我可以将教程编写为带有漂亮印刷 Java 源代码的 HTML 文档，那就太好了。

我知道我可以这样做，例如http://code.google.com/p/google-code-prettify/ 如果我将各种 Java 源代码复制到我希望它们所在的 HTML 文档中，并在周围的标记上放置一个样式类。

但是，为了确保 sn-ps 是最新的，我真的希望 HTML 页面引用实际的 Java 源文件，而不是手动维护的副本。

据我了解-这可能是错误的-Google Prettyprint 库不直接支持此功能，但可能是 Javascript 将文件拉入文件并将其放入<pre> 标记内的 DOM 树中的一些技巧可以做到吗？我希望 HTML 文件存在于本地文件系统中，因此不能选择执行服务器端脚本。

我的问题是 - 我该怎么做？

（我打算将 HTML 文件物理放置在源代码树的根目录。这意味着从 HTML 到 Java 源代码的所有引用都是相对的，并且没有“..”。我不知道这是否重要或不是。）

Answer 1

无法直接使用 JavaScript 访问文件。出于明显的安全原因，JavaScript 以这种方式受到限制。

您将需要您的网络服务器来提供 Java 文件。您不需要编写服务器端脚本，但您的 Java 文件的内容必须在某个网址上可用。如果是，您可以使用 AJAX 加载 Java 文件的内容并将内容插入到您的网页中。

使用jQuery加载文本可以如下完成

$.get('java/somefile.java', function(data) {
  $('#sourceCodeDestination').html(data);
  // Prettyprint neeeds to run again in order to see the newly added code
  prettyPrint();
}, "text");

这将加载 url java/somefile.java 以纯文本形式获取其内容并将其插入 id 为 sourceCodeDestination 的 DOM 元素中。有关更多信息，请参阅 get() 和 ajax() 上的 jQuery 文档。

这里是a demo。如您所见，它从 CDN 加载精简版 Prettyprint 源代码并漂亮地打印出来。

Answer 2

如果您的用户在阅读您的文档时可以接受在线访问的要求，您可以将代码托管在 gist (https://gist.github.com/) 之类的地方，并将其嵌入到您的 html 文档中（参见示例，将其放入您的文档中 @987654322 @)

Answer 3

假设 prettify.js 之前已加载，您可以调用 函数 prettyPrint 接受参数 callback 和 rootNode。

<div id="foo">
    <pre id="bar"></pre>
</div>

var pre = document.getElementById('bar');
pre.textContent = 'function () {\n    return;\n}'; // assign code
pre.className = 'prettyprint';                     // assign class
prettyPrint(null, document.getElementById('foo')); // prettify

DEMO