从现有html自动生成html源文档

Auto-generating html source documentation from existing html

本文关键字：html 文档 自动生成      更新时间：2023-09-26

我有一个基于html的样式指南，其中包含几个示例元素，如下所示：

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

样式指南将样式化的html和html编码的代码片段显示在一个块中，用于简单的复制/粘贴。

目前，我正在像这样手工写下这一切，针对文档中的每个示例：

<pre class="html" id="collapseAddress">
  <code>&lt;address&gt;
    &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
    795 Folsom Ave, Suite 600&lt;br&gt;
    San Francisco, CA 94107&lt;br&gt;
    &lt;abbr title=&quot;Phone&quot;&gt;P:&lt;/abbr&gt; (123) 456-7890
    &lt;/address&gt;
    &lt;address&gt;
      &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
      &lt;a href=&quot;mailto:#&quot;&gt;first.last@example.com&lt;/a&gt;
    &lt;/address&gt;
  </code>
</pre>

这并不理想：它为人为错误留下了很大的空间，这是一个手动过程，需要更新代码片段和代码本身，而且很耗时（我很懒！）。

我更喜欢使用.js来自动生成这些代码片段。

我倾向于做这样的事情，但我有一种感觉，它不会很好地扩展，而且似乎过于复杂。有更好/更简单的方法吗？

<div class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</div>

伪代码.js:

for each $('.codeToGenerate')
  do:
    $(el).next.append(html_encode($(el)))

这里有一些简单的内容。它将html转换为实体。

$('.codeToGenerate').each(function() {
   $(this).text($(this).html())
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>

相关文章：