CODEWITHSUNDEEP
javascripthtml
brandonscript
brandonscript

Reputation: 72865

Auto-generating html source documentation from existing html

I've got an html-based style guide with several example elements that looks like this:

<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:#">[email protected]</a>
</address>

The style guide displays both the styled html and an html-encoded code snippet into a block for simple copy/pasting.

Currently I'm writing this all out by hand like so, for each example in the document:

<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;[email protected]&lt;/a&gt;
    &lt;/address&gt;
  </code>
</pre>

This is not ideal: it leaves a lot of room for human error, it's a manual process and requires updating both the code snippet and the code itself, and it's time consuming (and I'm lazy!).

I'd prefer to use .js to auto-generate these code snippets instead.

I'm leaning towards doing something like this, but I have a feeling it's not going to scale well, and it seems overly complicated. Is there a better/simpler way?

<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:#">[email protected]</a>
  </address>
</div>

Pseudo-code .js:

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

Upvotes: 1

Views: 123

Answers (1)

Roger
Roger

Reputation: 3256

Here is something simple. It converts html to entities.

$('.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:#">[email protected]</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:#">[email protected]</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:#">[email protected]</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:#">[email protected]</a>
  </address>
</pre>

Upvotes: 2

Related Questions