Кнопка Run Script для Shower

Я делаю свои презентации в Shower — их удобно писать в редакторе, легко выкладывать, и они нормально смотрятся.

Так как большая часть моих презентаций связана с JavaScript и включает примеры кода, я подумал, что было бы хорошо иметь рядом с каждым таким примером кнопку «Запустить», которая бы, кхм, запускала этот код.

Код в Шовере помечается тегом pre, и каждая линия завёрнута в code, примерно так:

<section class="slide">
  <h2>Some code</h2>
  <pre>
    <code>function log() {</code>
    <code>  console.log('HELLO WORLD')</code>
    <code>}</code>
  </pre>
</section>

Поэтому я набросал следующий сниппет. Его достаточно бросить в конце презентации (тогда он подхватит все теги pre). Конечно, это требует, чтобы все pre содержали только JS, но если это не так, то достаточно только поменять первую строчку.

var pre = [].slice.call(document.querySelectorAll('pre'))
pre.forEach(p => {
  var txt = p.innerText
  var btn = document.createElement('button')
  btn.className = 'run-button'
  btn.innerText = 'Run'
  p.parentNode.insertBefore(btn, p)
  btn.onclick = () => {
    console.log('Running\n---\n' + txt + '\n---\nResult:')
    eval(txt)
  }
 })

Отдельно нужно эту кнопку стилизовать, для этого к ней добавляется класс run-button.

eval принято ругать и не использовать, но это один из тех редких моментов, где он уместен.