Auto populating code/pre tags with HTML content using JavaScript

On a recent static style guide build I got tired of manually inserting sample code content into <code> tags; especially as I hadn’t fully made up my mind on exactly what the markup should be. Each change meant I was copy and pasting the new markup into a new window in my text editor and search and replacing the < and > so that it would render as expected in the browser. I see most problems as a Front End problem so I wrote a quick function to do this for me. I’m writing this down and sharing because a quick Google search didn’t reveal any similar functions.

The script makes a few assumptions about how you write your markup: specifically that you indent with two spaces for tabbing in your text editor. It could be adapted to work with tabs or four spaces but I use two and thats that.

Firstly the function grabs the target elements HTML using outerHTML. This includes the element itself, unlike innerHTML or jQuery’s .html() helper. Googling “jQuery html including self” does show a variety of crazy answers that involve cloning the element, wrapping it in another element, and then getting the html of the contents of the wrapping element. This is not necessary when JavaScript already gave us a nice method. Remember, you might not need jQuery.

My first thought was that I could then use string search and replace in this HTML to replace the <, > and remove the reference to the function call I use in the HTML (data-behaviors) and then update the content of the code block and I’d be done.

Except you end up with weird spacing:

<section class="box">
      <header>
        <h3>Box</h3>
      </header>
      <p>Content</p>
      <footer>
        <a href="#" class="btn">Button</a>
      </footer>
    </section>

Rather than the nice spacing you wanted:

<section class="box">
  <header>
    <h3>Box</h3>
  </header>
  <p>Content</p>
  <footer>
    <a href="#" class="btn">Button</a>
  </footer>
</section>

Which makes sense, the HTML we’ve read from the page contains those spaces. The number of extra spaces to remove varies between how far spaced in the sample code you want to copy is; so no one number will be right for all code samples on a page.

outerHTML returns the HTML including the tag itself, but not the space before it; you have to concentrate on the second line of content in your code sample to work out how much white-space to remove. Using a string match with some RegEx we can grab a string comprising of a new line character \n and the white-space before the first none white-space character. We can then use this in a replace to cut out the unnecessary white-space at the start of each line.

sample_html.match(/\n+\s+\S/)[0]

Here we’re looking for a new line (\n) followed by white-space (\s) which is followed by none white-space (\S). match returns an array and as I didn’t set the global flag, the array will only contain one item, so I return it. For our replace we only want this matched string, minus the non-white-space character and minus two more spaces, because we double space on tab in our code. So we slice the string minus the three characters we don’t want.

white_space = sample_html.match(/\n+\s+\S/)[0].slice(0,(sample_html.match(/\n+\s+\S/)[0].length-3));

We end up with something like:

console.log(white_space); // "\n    "

Next up we feed this into a replace:

var re = new RegExp(white_space,"g");
sample_html = sample_html.replace(re,"\n");

This replaces the stored string with just a new-line character while preserving the intended code sample indenting.

You’ll also see in the code that I give my white_space variable an initial value of . This is to stop the replace adding new line characters before every character in the code and assumes you didn’t use in your sample anywhere.

Have a play with the CodePen.