Pug - 包括带有 "include" 关键字的 C 代码

Pug - including c code with "include" keyword in it

我想用 pug 将 c 文件内容放入 html 文档中。为此,我使用:

<pre>
        <code>
            include main.c
        </code>
</pre>

在我的 main.c 文件中我有:

#include <stdio.h>
#include <stdlib.h>

然后编译为:

<pre>
<code>
 "#include "
 <stdio.h>
  "#include "
  <stdlib.h>
   ...
  </stdlib.h>
 </stdio.h>
</code>
</pre>

我怎样才能避免这种情况并将 作为普通文本包含在内? PS: 使用 (#include "main.h", 不使用 <>)

<> 是特殊保留的 HTML 个字符。必须转义此字符。 在 Pug 中,您可以为此使用过滤器。

如果您使用 Webpack 以静态方式编译 Pug 文件 HTML,那么您可以使用 @webdiscus/pug-loader. This pug-loader has embedded filters such :escape, :highlight, :markdown 来满足您的需求。

使用 :escape Pug 过滤器应用于包含 main.c:

pre: code
  include:escape main.c

生成 HTML:

<pre>
  <code>
    #include &lt;stdio.h&gt;
    #include &lt;stdlib.h&gt;
  </code>
</pre>

在浏览器中输出:

#include <stdio.h>
#include <stdlib.h>

如果您使用的是 pug,那么您可能正在使用像 Vue 这样的 UI 框架?如果是这样,只需将您的文件代码变成一个变量并以这种方式放置它(即 <code>{{myCode}}</code>。Pug 并不像您正在做的那样处理 hard-coded 代码(直接输入或包含它来自文件)。如果你这样做,你将不得不继续逃避它和其他恶作剧。

如果将其推回变量,您会看到更多选项在逻辑上为您打开了可能。

此外,按照您的操作方式,C 文件必须在文件级别可用于哈巴狗渲染器,这对您自己是一种伤害,因为您只能在服务器端渲染它。

如果将其推送到变量,则可以渲染它 client-side,或者从任何地方的任何位置渲染它。