vuepress-playground/src/codepen.js

vuepress demo box

import create from './create'
import getSettings from './settings'
export default function getCodepenBtn ({
  css,
  htmlTpl,
  jsTpl,
  jsLib,
  cssLib
}) {
  const value = JSON.stringify({
    css: css,
    html: htmlTpl,
    js: jsTpl,
    js_external: jsLib.concat(getSettings('jsLib')).join(';'),
    css_external: cssLib.concat(getSettings('cssLib')).join(';'),
    layout: getSettings('codepenLayout'),
    js_pre_processor: getSettings('codepenJsProcessor'),
    editors: getSettings('codepenEditors')
  })
  const form = create('form', {
    className: 'vuepress-playground-codepen',
    target: '_blank',
    action: 'https://codepen.io/pen/define',
    method: 'post',
    __children: [
      {
        tag: 'input',
        attrs: {
          type: 'hidden',
          name: 'data',
          value
        }
      }, {
        tag: 'button',
        attrs: {
          type: 'submit',
          innerHTML: 'Codepen',
          className: 'vuepress-playground-btn-text'
        }
      }
    ]
  })
  return form
}