rouge icon indicating copy to clipboard operation
rouge copied to clipboard

Rouge lexer should honor the newline token and HTML formatter should wrap each line in separate HTML tag

Open tojamrok opened this issue 1 year ago • 0 comments

Current situation:

Lexer returns the newline character as is, without treating it in a semantic way. HTML formatter wraps the input into <pre><code></code></pre> tags. Inside these tags, each element of the lexer tokenization output is wrapped into separate <span> element. The newline character from the input string is left as is and thanks to the nature of the <pre> element it is interpreted by the browser layout engine as intended by the input string author.

Problems:

  1. CSS cannot operate on the \n character from the <pre> element. Thus it is impossible to create a theme with alternating background colors using the :nth-child(odd) and :nth-child(even) pseudo-class with something like filter: brightness(90%) or such.
  2. It is impossible to use CSS text-wrap in such a way that the first wrapped line of the input string has negative text-indent and the next lines have positive left-padding. Or the other way around. So with long code line wrapping it's hard to distinguish where one input line ends and the next input line starts.
  3. The HTMLTable formatter counts number of newline \n elements in the input string and creates a "gutter" table column with several table cells, each containing the line number of the input string. But the second column has only single table cell. That doesn't work properly with the text-wrap styling.

Example:

Input string:

reg.exe ADD "HKLM\SYSTEM\CurrentControlSet\Control\Power\PowerSettings\54533251-82be-4824-96c1-47b60b740d00\be337238-0d82-4146-a960-4f3749d470c7" /v Attributes /t REG_DWORD /d 2
FOR /F "tokens=4" %i IN ('powercfg.exe /setactivescheme') DO powercfg.exe /setacvalueindex %i SUB_PROCESSOR PERFBOOSTMODE 0
FOR /F "tokens=4" %i IN ('powercfg.exe /setdctivescheme') DO powercfg.exe /setacvalueindex %i SUB_PROCESSOR PERFBOOSTMODE 0

Rendering with line numbers: image

Rendering with text-indent: image

tojamrok avatar Dec 21 '24 17:12 tojamrok