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

Thumbnail
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 Codepen.io
Copyright 13twelve ©

Technologies

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

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

  
</head>

<body>

      <section class="box" data-behavior="sample_code">
      <header>
        <h3>Box</h3>
      </header>
      <p>Content</p>
      <footer>
        <a href="#" class="btn">Button</a>
      </footer>
    </section>
<code>...</code>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/13twelve/auto-populating-codepre-tags-with-html-content-using-javascript-vEYgzr */
.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 https://www.codeseek.co/13twelve/auto-populating-codepre-tags-with-html-content-using-javascript-vEYgzr */
$('[data-behavior~="sample_code"').each(function(){
  var container = $(this);
  var target = container.next("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
    target.html(sample_html);
  }
});

Comments