Skip to content

Feature: Add CSS styles for code blocks with line numbers #2611

@stanislaw

Description

@stanislaw

Description

We are enabled the code block syntax highlighting with docutils and realized that the styles generated by Pygments are not entirely correct and the styles for line numbers are missing:
Image

Problem

Sometimes a user wants to have code block with line numbers. It would be great to have styled better/nicer than what is demonstrated by the screenshot.

Solution

I am leaving this comment in the auto-generated pygments.css file:

/**
These styles do not work well with what docutils generates for line numbers when
:number-lines: is provided as follows:

.. code:: python
   :number-lines:

pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }

The actual lines produced do not have any "linenos" but:
<span class="ln">1 </span>
<span class="ln">2 </span>
...
**/

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions