Skip to content

Instantly share code, notes, and snippets.

@trauber
Created December 8, 2022 16:03
Show Gist options
  • Save trauber/2ba010c0e9fbd66a6650f0ab3ed1c71f to your computer and use it in GitHub Desktop.
Save trauber/2ba010c0e9fbd66a6650f0ab3ed1c71f to your computer and use it in GitHub Desktop.

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment