如何将逐字源代码包含到 html 文档中

Question

我编写了几个 C++ 程序，它们与 reveal.js 演示文稿位于同一个存储库中。我想做的是简单地将 C++ 源文件包含到我的文档中。

首先，我找到了一种使用以下函数将文件包含到 html 文档中的好方法（感谢 Whosebug）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("#awesomecpp").load("../src/awesome.cpp");
});
</script>

然后我将它包含在我的 reveal.js 演示文稿中，如下所示：

<pre><code data-trim>
<div id="awesomecpp"></div>
</code></pre>

然而，这不是什么好事，因为我在源代码的顶部得到了 <div id="awesomecpp>，在源代码片段的末尾加上了一堆其他垃圾标签。我非常不喜欢必须复制和粘贴代码，因为我发现我经常对代码进行更改，并且可能不会对演示代码进行更改。此外，我发现如果有任何特殊字符，如'&'，也会发生不好的事情。有没有人对使用可以正确处理我想做的事情的 javascript 库有任何建议？我只是想在我的 reveal.js 演示文稿中逐字包含一个带有代码格式的文件。那是过分的要求？

Answer 1

尝试这样的事情：

$.ajax({
  url : "../src/awesome.cpp",
  dataType: "text",
  success : function (data) {
    $("#awesomecpp").text(data);
  }
});

Answer 2

问题是 reveal.js 使用 highlight.js 进行语法高亮，这将使用 code 标签的内容（ 你的 div在这种情况下).

您很可能需要将 ID 放在 code 标签上。

<pre><code data-trim id="awesomecpp">
</code></pre>

您可能还必须阻止 reveal.js 初始化语法高亮显示，并在 ajax 加载后手动运行它。

如何将逐字源代码包含到 html 文档中

How to include verbatim source code into an html document

html

javascript

reveal.js