Unreadable Code Blocks in Exported PDFs with dark theme

Steps to reproduce

  1. Choose the default dark theme of Obsidian.
  2. Use a code block such as:

Code Inside Here

3. Export file as PDF

Expected result

Readable code, as in the markdown file when in reading mode:

Actual result

Unreadable code:


  • Operating system: MacOS Monetery
  • Debug info:
    Obsidian version: v0.14.2
    Installer version: v0.14.2
    Operating system: Darwin Kernel Version 21.4.0: Mon Feb 21 20:36:53 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T8101 21.4.0
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: on
    Base theme: dark
    Community theme: none
    Snippets enabled: 0
    Safe mode: off
    Plugins installed: 1
    Plugins enabled: 1
    1: Advanced Tables


Does anyone have a solution to this issue yet? I’m having the same problem when exporting! It used to be fine but now all code exports turn out like that…

Unfortunately, installing an older version on the same system doesn’t seem to work, but I tried installing a way older version (12.19) on a new device, and it seemed to export to pdf in the right format.

The error might likely come from the version update?

I use a css snippet for code block, which I copied from a theme and slightly modified it, BlueTopaz? I think. And the results is that I don’t see this issue. Maybe this will also help you.

  --font-size-code:                          20px;
  --font-size-edit-code:                     20px;

  /*font family*/
  --font-family-preview-edit-code: Consolas;
  --text-family-inline-code:       Consolas;

.theme-dark {
    --background-primary: #242424;
    --background-primary-alt: #000000;

.theme-light {
    --background-primary: #ffffff;
    --background-primary-alt: #f5f5f5;

.theme-dark :not(pre) > code[class*='language-'],
.theme-dark pre[class*='language-'] {
  background: #000000;
  border-radius: 7px;

.theme-light :not(pre) > code[class*='language-'],
.theme-light pre[class*='language-'] {
  background: var(--background-primary-alt);
  border-radius: 7px;

.theme-light code[class*="language-"], .theme-light pre[class*="language-"]{
  text-shadow: none;

.theme-dark code[class*="language-"], .theme-dark pre[class*="language-"] {
  color: #e7e7e7;

.theme-dark .cm-s-obsidian pre.HyperMD-codeblock,
.theme-dark .cm-s-obsidian span.cm-inline-code,
.theme-dark .cm-s-obsidian span.cm-math:not(.cm-formatting-math-begin):not(.cm-formatting-math-end),
.theme-dark .markdown-preview-view code {
  color: #da2105;
  font-size: var(--font-size-edit-code) !important;
  font-family: var(--font-family-preview-edit-code);

.theme-light .cm-s-obsidian pre.HyperMD-codeblock,
.theme-light .cm-s-obsidian span.cm-inline-code,
.theme-light .cm-s-obsidian span.cm-math:not(.cm-formatting-math-begin):not(.cm-formatting-math-end),
.theme-light .markdown-preview-view code:not([class*='language-']) {
  color: #d92f18;
  font-size: var(--font-size-edit-code) !important;
  font-family: var(--font-family-preview-edit-code);

/*bold code text except code language*/
  font-weight: 260;
  font-family: var(--font-family-preview-edit-code) !important;

.cm-s-obsidian span.cm-inline-code {
  font-weight: 260;
  font-family: var(--text-family-inline-code) !important;

Hey, thanks for the feedback. Where do I insert the CSS code block?

In your vault folder, go to the subfolder .obsidian/snippets. Make a new text file, named my_codeblock_snippet.css

And now you can copy and paste the css code into my_codeblock_snippet.css and save.

Then, go to Obsidian > Settings > Apperance > find and turn on the snippet of my_codeblock_snippet .


1 Like

will be fixed 0.14.6


Okay, thanks! I’ll try it out!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.