It looks like if a <code> block is bigger than the page itself, prince doesn't render the page correctly. Attached is a screenshot.
Forum › Bugs
<code> not breaking correctly
There must be some other CSS being applied in this case, it is being floated, absolutely positioned, or formatted as an inline-block?
It should still break properly across pages. Can you load the HTML in a browser and use DOM inspector to see what CSS properties are being applied?
I've got this for the css:
and html:
pre code,
.hljs {
display: inline-block;
padding: 7px 15px;
background: #002b36;
color: #839496;
width: 100%;
margin-bottom: 15px;
box-sizing: border-box;
}
and html:
<pre><code class="lang-python3">>>> <span class="hljs-reserved">import</span> cards
>>> game = cards.OldMaidGame()
>>> game.play([<span class="hljs-string">"Allen"</span>,<span class="hljs-string">"Jeff"</span>,<span class="hljs-string">"Chris"</span>])
---------- Cards have been dealt
Hand Allen contains
King <span class="hljs-keyword">of</span> Hearts
Jack <span class="hljs-keyword">of</span> Clubs
Queen <span class="hljs-keyword">of</span> Spades
King <span class="hljs-keyword">of</span> Spades
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds
Hand Jeff contains
Queen <span class="hljs-keyword">of</span> Hearts
Jack <span class="hljs-keyword">of</span> Spades
Jack <span class="hljs-keyword">of</span> Hearts
King <span class="hljs-keyword">of</span> Diamonds
Queen <span class="hljs-keyword">of</span> Diamonds
Hand Chris contains
Jack <span class="hljs-keyword">of</span> Diamonds
King <span class="hljs-keyword">of</span> Clubs
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Spades
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Clubs
Hand <span class="hljs-attribute">Jeff</span>: Queen <span class="hljs-keyword">of</span> Hearts matches Queen <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Chris</span>: <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Spades matches <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Clubs
---------- Matches discarded, play begins
Hand Allen contains
King <span class="hljs-keyword">of</span> Hearts
Jack <span class="hljs-keyword">of</span> Clubs
Queen <span class="hljs-keyword">of</span> Spades
King <span class="hljs-keyword">of</span> Spades
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds
Hand Jeff contains
Jack <span class="hljs-keyword">of</span> Spades
Jack <span class="hljs-keyword">of</span> Hearts
King <span class="hljs-keyword">of</span> Diamonds
Hand Chris contains
Jack <span class="hljs-keyword">of</span> Diamonds
King <span class="hljs-keyword">of</span> Clubs
<span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand Allen picked King <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Allen</span>: King <span class="hljs-keyword">of</span> Hearts matches King <span class="hljs-keyword">of</span> Diamonds
Hand Jeff picked <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand Chris picked Jack <span class="hljs-keyword">of</span> Clubs
Hand Allen picked Jack <span class="hljs-keyword">of</span> Hearts
Hand Jeff picked Jack <span class="hljs-keyword">of</span> Diamonds
Hand Chris picked Queen <span class="hljs-keyword">of</span> Spades
Hand Allen picked Jack <span class="hljs-keyword">of</span> Diamonds
Hand <span class="hljs-attribute">Allen</span>: Jack <span class="hljs-keyword">of</span> Hearts matches Jack <span class="hljs-keyword">of</span> Diamonds
Hand Jeff picked King <span class="hljs-keyword">of</span> Clubs
Hand Chris picked King <span class="hljs-keyword">of</span> Spades
Hand Allen picked <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand <span class="hljs-attribute">Allen</span>: <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Diamonds matches <span class="hljs-number">10</span> <span class="hljs-keyword">of</span> Hearts
Hand Jeff picked Queen <span class="hljs-keyword">of</span> Spades
Hand Chris picked Jack <span class="hljs-keyword">of</span> Spades
Hand <span class="hljs-attribute">Chris</span>: Jack <span class="hljs-keyword">of</span> Clubs matches Jack <span class="hljs-keyword">of</span> Spades
Hand Jeff picked King <span class="hljs-keyword">of</span> Spades
Hand <span class="hljs-attribute">Jeff</span>: King <span class="hljs-keyword">of</span> Clubs matches King <span class="hljs-keyword">of</span> Spades
---------- Game <span class="hljs-keyword">is</span> Over
Hand Allen <span class="hljs-keyword">is</span> empty
Hand Jeff contains
Queen <span class="hljs-keyword">of</span> Spades
Hand Chris <span class="hljs-keyword">is</span> empty
</code></pre>
The "display: inline-block" is causing the problem. Prince can't break a single line of text across pages, and notionally that's what an inline-block is. If you can change it to block, then it should be fine.