Kindle displays source code with blank lines after each line - pandoc

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; }