moonwalk icon indicating copy to clipboard operation
moonwalk copied to clipboard

`.w` class conflicts with code whitespace

Open apple1417 opened this issue 1 year ago • 1 comments

When formatting some languages, rouge will insert explicit whitespace spans, which use the exact same class as that on the main page body. This gives them a bunch of weird extra padding.

```json
no space
 1 space
  2 space
   3 space
    4 space
```

Becomes

<pre><span class="err">no</span><span class="w"> </span><span class="err">space</span><span class="w">
 </span><span class="mi">1</span><span class="w"> </span><span class="err">space</span><span class="w">
  </span><span class="mi">2</span><span class="w"> </span><span class="err">space</span><span class="w">
   </span><span class="mi">3</span><span class="w"> </span><span class="err">space</span><span class="w">
    </span><span class="mi">4</span><span class="w"> </span><span class="err">space</span><span class="w">
</span></pre>

  The workaround I've got for now is:

.highlighter-rouge .w {
    max-width: unset;
    margin: unset;
    padding: unset;
}

apple1417 avatar May 16 '23 09:05 apple1417