Safely embedding code snippets in HTML.

_snippet-embed.md

Safely embedding code snippets in HTML.

See http://bl.ocks.org/dergachev/5732338 for preview, or http://jsfiddle.net/dergachev/BMjHS/ to tweak.

index.html

<h1>Embedding code snippets in HTML</h1>

<p> Source (bootstrapped!):</p>
<script type="text/snippet">
<script type="text/snippet">
    <small>bob</small>
</ script>
</script>

<p> Results:</p>
    
<script type="text/snippet">
    <small>bob</small>
</script>

<p> As you can see, this doesn't work well for &lt;/script&gt; is still problematic, and, need to be escaped in some awkward way.</p>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="snippet-embed.js"></script>

snippet-embed.js

var $ = jQuery,

$('script[type="text/snippet"]').each(function() {
    var el = $(this);
    var safe = $('<pre/>').text(el.html().trim());
    el.after(safe);
});