Feature Request: Render CodeBlockLowlight with Highlights

[dannyhyatt]

Description

CodeBlockLowlight renders in the editor fine, but does not export with the required text to color the code blocks. Instead, you are expected to load the lowlight library yourself, and render it yourself.

Bold text is rendered as <strong>bold text</strong>, and color text is rendered with the color assigned to it. For some reason, we don't include the colored text in code generated by lowlight. There is an explanation here as to why that is, but I disagree. Why is color only considered semantic information when it's not in code? In most cases, the color of non-code and code text is just for readability purposes.

Use Case

In my website, I'd like for people using browsers with JavaScript disabled to have as close as possible of an experience to those with JavaScript enabled.

Here is what I did to render the code with the color information included (not sure if it's the proper way to do this):

CodeBlockLowlight
  .extend({
    renderHTML({ node, HTMLAttributes }) {
      let pre = document.createElement('pre')
      let code = document.createElement('code')
      pre.appendChild(code)
      code.dataset.type = 'raw'
      console.log('node', node)
      console.log('html attributes', HTMLAttributes)
      code.innerHTML = toHtml(lowlight.highlight('js', node.textContent))
      return pre
    }
  })

I believe this should be the default behavior, or at a minimum a renderWithColorClasses or something similar should be added as a parameter to CodeBlockLowlight.configure().

Type

New feature