trauber/quick-n-dirty-codepen.sh.md

## quick-n-dirty-codepen.sh.md

      
    Raw
  

              quick-n-dirty-codepen.sh.md
            
          
    Keep your own offline codepen.
This shell script, a riff on https://github.com/umpox/TinyEditor ,
lets you prefill TinyEditor's text areas with files from a directory.
html="$(cat $1/html.html)"
css="$(cat $1/css.css)"
js="$(cat $1/js.js)"

cat<<EOT>"$1.html"
<body
    oninput="i.srcdoc=h.value+'<style>'+c.value+
            '</style><script>'+j.value+'<\/script>'">
    <style>
        textarea,iframe{width:100%;height:50%}
        body{margin:0}
        textarea{width:33.33%;font-size:18}
    </style>
    <textarea placeholder=HTML id=h>${html}</textarea>
    <textarea placeholder=CSS id=c>${css}</textarea>
    <textarea placeholder=JS id=j>${js}</textarea>
    <iframe id=i>
EOT