Kindle displays source code with blank lines after each line

Question

I have the following text in Markdown:

```
# Testing
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

```java
for (int i = 0; i < 10; i++) {
    System.out.println("hello world");
}
```

Then I convert this file to an epub using Pandoc. When I inspect this file in a desktop reader like Calibre it looks well:

However, Kindle displays the source code with an empty line after each line of source code.

How can I style this so it does not display these empty lines on Kindle?

Answer 1

I found a solution to this problem after inspecting the epub's XHTML that Pandoc generates. Simplified, Pandoc creates the following structure from a source code block:

<div class="sourceCode">
  <pre class="sourceCode">
    <code class="sourceCode">
      <span>for (int i = 0; i < 10; i++) {</span>
      <span>    System.out.println("hello world");</span>
      <span>}</span>
    </code>
  </pre>
</div>

For the <span> elements that are used for each line of code, the following styling statement causes the issue mentioned above:

pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }

Tthe problem can be solved by overwriting this styling in a book's custom CSS via:

pre > code.sourceCode > span { display: inline; }