Auto populating code/pre tags with HTML content using JavaScript

In this example below you will see how to do a Auto populating code/pre tags with HTML content using JavaScript with some HTML / CSS and Javascript

Auto populate code/pre tag content with content based on a HTML element in the page - useful for styleguides

This awesome code was written by 13twelve, you can see more from this user in the personal repository.
You can find the original code on
Copyright 13twelve ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Auto populating code/pre tags with HTML content using JavaScript</title>
      <link rel="stylesheet" href="css/style.css">



      <section class="box" data-behavior="sample_code">
        <a href="#" class="btn">Button</a>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
.box {
  font: 11px/15px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  border-radius: 3px;
  margin: 0 0 10px;
  padding: 10px 0 0;
  border: 1px solid #888;
.box > * {
  margin-left: 10px;
  margin-right: 10px;
.box > header {
  padding: 13px 10px 11px 10px;
  margin: -10px 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: #888;
  color: #fff;
.box > footer {
  margin: 0;
  color: #fff;
  background: #888;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
.box > footer .btn {
  margin: 6px 0 6px 6px;
.box h3 {
  margin: 0;
  font-size: 11px;

.btn {
  display: inline-block;
  padding: 0 20px;
  height: 24px;
  text-align: center;
  text-decoration: none;
  line-height: 24px;
  color: #fff;
  background: #333;
  border-radius: 12px;

code {
  display: block;
  white-space: pre-wrap;
  padding: 15px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;

/*Downloaded from */
  var container = $(this);
  var target ="code");
  //if we have a target
  if (target.length > 0) {
    // get the sample's html
    var sample_html = container[0].outerHTML;
    var white_space = "☺";
    // find how many spaces are before the part of the html
    try {
      white_space = sample_html.match(/\n+\s+\S/)[0].slice(0,(sample_html.match(/\n+\s+\S/)[0].length-3));
    } catch(err) {}
    // set up a regex to search for a white space string
    var re = new RegExp(white_space,"g");
    // replace white_space, < and > with &lt; and &gt; and remove the sample_code ref
    sample_html = sample_html.replace(re,"\n").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(' data-behavior="sample_code"','');
    // trim out any new lines at begining or end of string
    sample_html = $.trim(sample_html);
    // stick into target