Arbitrary Stack Snippet Loader

Question

The Stack Snippet below loads the first Stack Snippet in the Stack Exchange post defined by site, postID, and isAnswer. (Inspired by this and this.)

It assumes there is only one Stack Snippet in the post and may load the wrong code if there is more than one.

• One possible application is to have this point to a generalized leaderboard Snippet. So any changes/fixes to the leaderboard Snippet are reflected in all the Snippets that point to it. Optimizer has done this.

• Another application is to point it to a very long Snippet that wouldn't fit in the post otherwise.

A golfed version with copyable raw markdown is available below.

This ungolfed Snippet loads from here.

site = 'meta.codegolf'
postID = 5311
isAnswer = true

jQuery(function() {
	var url = 'https://api.stackexchange.com/2.2/'
	if (isAnswer)
		url += 'answers/' + postID + '?order=asc&sort=creation&site=' + site + '&filter=!GeEyUcJFJeRCD'
	else
		url += 'questions/' + postID + '?order=asc&sort=creation&site=' + site + '&filter=!GeEyUcJFJO6t)'
	jQuery.get(url, function(b) {
			function d(s) { return jQuery('<textarea>').html(s).text() }
			function r(l) { return new RegExp('<pre class="snippet-code-' + l + '\\b[^>]*><code>([\\s\\S]*?)</code></pre>') }
			b = b.items[0].body
			var js = r('js').exec(b), css = r('css').exec(b), html = r('html').exec(b)
			if (css !== null)
				jQuery('head').append(jQuery('<style>').text(d(css[1])))
			if (html !== null)
				jQuery('body').append(d(html[1]))
			if (js !== null)
				jQuery('body').append(jQuery('<script>').text(d(js[1])))
		}
	)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(I use jQuery instead of $ to hopefully avoid this issue.)

Answer 1

Copyable Version

Copy this exact raw markdown into the post where you want to use the Arbitrary Stack Snippet Loader. Adjust site, postID, and isAnswer in the first <script> tag on the second line as necessary.

<!-- begin snippet: js hide: false --><!-- language: lang-html -->
<script>site = 'codegolf'; postID = 50690; isAnswer = false</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script><script>jQuery(function(){var u='https://api.stackexchange.com/2.2/';if(isAnswer)u+='answers/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJeRCD';else u+='questions/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJO6t)';jQuery.get(u,function(b){function d(s){return jQuery('<textarea>').html(s).text()};function r(l){return new RegExp('<pre class="snippet-code-'+l+'\\b[^>]*><code>([\\s\\S]*?)</code></pre>')};b=b.items[0].body;var j=r('js').exec(b),c=r('css').exec(b),h=r('html').exec(b);if(c!==null)jQuery('head').append(jQuery('<style>').text(d(c[1])));if (h!==null)jQuery('body').append(d(h[1]));if(j!==null)jQuery('body').append(jQuery('<script>').text(d(j[1])))})})</script><!-- end snippet -->

It should render like this:

<script>site = 'codegolf'; postID = 50690; isAnswer = false</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script><script>jQuery(function(){var u='https://api.stackexchange.com/2.2/';if(isAnswer)u+='answers/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJeRCD';else u+='questions/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJO6t)';jQuery.get(u,function(b){function d(s){return jQuery('<textarea>').html(s).text()};function r(l){return new RegExp('<pre class="snippet-code-'+l+'\\b[^>]*><code>([\\s\\S]*?)</code></pre>')};b=b.items[0].body;var j=r('js').exec(b),c=r('css').exec(b),h=r('html').exec(b);if(c!==null)jQuery('head').append(jQuery('<style>').text(d(c[1])));if (h!==null)jQuery('body').append(d(h[1]));if(j!==null)jQuery('body').append(jQuery('<script>').text(d(j[1])))})})</script>

Answer 2

Test Snippet

jQuery('body').append('Data: ' + site + ', ' + postID + ', ' + isAnswer)
alert('Success!')

h3 { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Test HTML</h3>