Chroma-based syntax highlighting introduces empty lines when copy-pasting code blocks

Hi all,

I added syntax highlighting with Chroma to my Hugo site a few days ago. The rendered HTML looks fine, but copy-pasting the generated code to a text editor introduces empty lines after each code line, so

CodeLine1
CodeLine2

will end up as

CodeLine1

CodeLine2

in the text editor, at least when testing on Windows.

This is my configuration:

[markup]
  [markup.highlight]
    anchorLineNos = true
    codeFences = true
    lineAnchors = ''
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = false
    noClasses = true
    style = 'github-dark'
    tabWidth = 4
    wrapperClass = 'highlight'

While writing this post I just noticed that it is caused by lineNos = true. Unfortunately, I cant use lineNumbersInTable = true because this breaks the entire layout.

Any advice how this can be solved?

The problem can be replicated here and on this blog post.

Thanks all, and <3 for making Hugo!

I am pretty sure this is an “issue” with your text editor. Which one do you use specifically? I think it might be a misunderstood attempt of someone involved (browser or editor) to copy formatting over. Most editors these days have a “paste as plain text” function. Paste as plain text and you see what your website actually hands over. Everything else that ends up in your editor could be some default formatting for tables or list items in your editor. Not every editor is a plaintext editor. Especially on Windows. They often mix up text and RTF.

I tried to copy paste from your two links and all ends up well in plaintext. But I am not on Windows.

Are you using Firefox?

I tried this with the Windows Editor app and VS Code, so it shouldn’t introduce anything that’s not present in the rendered HTML code.

Yes, and this is a really interesting thing: On Firefox, I can replicate the problem, but not on Chromium/Edge…

You’re encountering this 9 year old Firefox bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1273836

You have two choices:

  1. Live with the existing behavior. Last time I checked Firefox market share was < 4%.
  2. Switch to the table cell format and solve your “this breaks the entire layout” problem, which I’ve never encountered.
1 Like

Thank you very much @jmooring! Lesson learned: Check multiple browsers first :grin:

It is possible to make it work in Firefox and Chrome by throwing additional JavaScript onto it.

It comes down to marking the unwanted lines in CSS with user-select:none to make it work in Chrome and adding a copy event listener in JS to fix it for FF only.

See a working solution for the Relearn theme in #925 and #991

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.