Obsidian PDF Styling Improvements

I’ve been writing a bunch of technical documents in Obsidian recently: complete with code-blocks and Mermaid diagrams. And I must say, it’s been a pretty good writing experience. Certainly much nicer than writing in Confluence.

But when I made PDF exports of these documents, I found a few things that could be improved. Namely:

• Moving page-breaks to the next page if doing so will avoided introducing a page-break.
• Mermaid.JS images being too wide, and running off the right side of the page.

Fortunately Obsidian makes it easy to fix this with CSS. And after a few tests, I managed to write a small stylesheet which addressed both these issues:

@media print {
    div.mermaid svg {
        max-width: 100%;
    }
    
    pre {
        break-inside: avoid;
    }
}

Hopefully this would be useful to others that need to make PDF exports of technical documents from Obsidian.