Unreadable Code Blocks in Exported PDFs with dark theme

[Pedant]

Steps to reproduce

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

```bash
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:

Environment

• Operating system: MacOS Monetery

• Debug info:
  SYSTEM 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

---

[WhiteNoise]

thanks

[d3epdiv3r]

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…

[d3epdiv3r]

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?

[GLight]

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.

:root{
  --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*/
code:not([class*='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;
}

[d3epdiv3r]

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

[GLight]

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 .

Done

[WhiteNoise]

will be fixed 0.14.6

[d3epdiv3r]

Okay, thanks! I’ll try it out!