Log HTML

html-log.js

const body = document.body
const container = document.createElement('div')
container.style.visibility = 'hidden'
container.style.position = 'absolute'
container.style.zIndex = -1

export default function htmlLog (html) {
  // Add html to a container to get its height.
  const width = window.innerWidth - 46 // Account for console padding.
  container.innerHTML = html
  container.style.width = `${width}px`
  body.appendChild(container)
  const height = container.clientHeight
  body.removeChild(container)

  // Render the html to the console.
  // Uses a datauri svg to render the html.
  console.log('%c', `
    padding: ${Math.floor(height / 2) + 7}px 50% 0;
    line-height: ${height}px;
    background: url(data:image/svg+xml,${encodeURI(
      `<svg xmlns="http://www.w3.org/2000/svg">
        <foreignObject height="100%" width="100%">
          <div xmlns="http://www.w3.org/1999/xhtml">${html}</div>
        </foreignObject>
      </svg>`
    )});
  `)
}