Skip to content

Instantly share code, notes, and snippets.

@amitkeret

amitkeret/browser-preprocess.html

Created June 22, 2019 09:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amitkeret/0321bfe357e775369dd29e04c7adf1d4 to your computer and use it in GitHub Desktop.
Save amitkeret/0321bfe357e775369dd29e04c7adf1d4 to your computer and use it in GitHub Desktop.
Download ZIP
Quick-and-dirty on-the-fly CoffeeScript + Stylus compiling in the browser
Raw
browser-preprocess.html
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style language="stylus">
body
h1
color red
</style>
</head>
<body>
<h1>stylus'ed</h1>
<script type="text/coffeescript">
coffee = ()-> 'coffeescript'
alert "Hello #{do coffee}!"
</script>
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/coffeescript/lib/coffeescript-browser-compiler-legacy/coffeescript.js"></script>
<script crossorigin="anonymous" src="http://stylus-lang.com/try/stylus.min.js"></script>
<script>
document.head.querySelectorAll('style[language="stylus"]').forEach(function(el, index){
stylus(el.innerText.trim()).render(function(err, str){
var s = document.createElement('style');
s.innerHTML = str;
document.head.appendChild(s);
el.parentNode.removeChild(el);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment