<!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 < and > and remove the sample_code ref
sample_html = sample_html.replace(re,"\n").replace(/</g,"<").replace(/>/g,">").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);
}
});