[Question] Embedding into HTML presentations?

[sesm]

Can one embed CodePan snippets into an HTML presentation and show the presentation offline?

My specific usecase is teaching JS, and sometimes classrooms have internet connection issues.

[egoist]

It's possible to store/save snippets in browser like using indexeddb

[sesm]

Fair enough.

But what if later the presentations are stored on github pages, and students expect to see code examples in the presentation?

It's possible to create some script, that injects iframes with CodePan into the page and then updates the content of the panes. The usage could be something like this:

<div class='codepan-embed'
      data-html='...'
      data-js='...'
      data-css='...'
></div>

[egoist]

Interesting idea, could be easier to implement than my solution 😄

[egoist]

Here's the solution, what do you think?

<iframe id="iframe" src="https://codepan.js.org"></iframe>
<script>
  const boilerplate = {
    js: {
      code: 'console.log(1)',
      transformer: 'JSX'
    }
  }
  const iframe = document.getElementById('iframe')
  window.addEventListener('message', ({ data = {} }) => {
    if (data.type === 'codepan-ready') {
      iframe.contentWindow.postMessage({ 
        type: 'codepan-set-boilerplate', 
        boilerplate: JSON.stringify(boilerplate) 
      }, '*')
    }
  })
</script>

[sesm]

Looks good to me!

[egoist]

The example code above is actually working now.