Accessibility issues with code blocks in exported .pdfs

Use case or problem

I take my CS Notes on Obsidian which includes code blocks almost everywhere, I even have code blocks as nested bullets. I usually export the documents as pdfs as many photos are .pngs with no background and are hard to see using the editor due to contrast issues.

a while ago everything was working fine, the code blocks in the pdf appeared dark so it was trivial to distinguish the region of code from the remaining text. All my codes have some comments at the top. after an update, all my pdfs adopted a light theme regardless of the selected base color. Due to my disability (and my poor screen), I find it extremely challenging to separate out code from non-code content in pdfs to the point where it’s just unreadable for me.

Proposed solution

I just wanted to humbly request a feature that allows users to choose the light/dark theme for their code blocks too as people who prefer reading regular text in light mode can have a contrasting subjective preference to have code blocks in dark mode when rendered in the pdf.

This could be done in the export window for pdfs if the parser detects the first code block in the document or Obsidian can store that a code block exists as an attribute for the .md file. Otherwise having a toggle in the settings will also do the job. Just like separate stores for themes and plugins, you can have a separate storefront for code blocks themes in the editor and pdf

Current workaround (optional)

I don’t know CSS. My field of work doesn’t need it, I never knew obsidian used it. Not all programmers know CSS and my schedule doesn’t allow me to keep time aside for learning CSS yet. Not all obsidian users familiar with coding know CSS.
I don’t want people trying and forking themes with inverted colored code blocks as it will make the marketplace cluttered and exploration difficult. I also suspect updates to the theme will override all modifications.

I am considering replacing the code blocks with screenshots from the editor for the time being for the ones I read frequently. Later on, I am planning something like a CI/CD pipeline where I convert code text to images with the code stored in the metadata and then I will check if the metadata is changed and if it has then I will regenerate the image with the updated metadata. I am also thinking of an interface to extract metadata for the LSP and directly into the editor as I cannot simply copy and paste the rasterized photos and opening metadata every time is cumbersome. I am thinking of having a systemD service to track files and move the changes into the metadata but first I need to verify if Github tracks metadata changes for images. Before taking a shot at this task, I thought it was worth requesting this feature once and for all.

Thank You.

EDIT: Subreddit Post
https://www.reddit.com/r/ObsidianMD/comments/13u4jo4/accessibility_issues_with_code_blocks_in_exported/

1 Like

Also, The maintainer of one theme I use isn’t responding to my request and many people prefer the default theme over others. I don’t want to spam multiple maintainers with the same request. Encouraging people to mod CSS themselves to support darker code blocks will open floodgates to newbie CSS issues and spamming on community theme repositories.

On a side note, currently Obsidian just allows us to select the monospace font family. It would be immensely helpful and accessible to select font weights too as I use the bolder weight of JetBrains mono to read my code in the IDE.

I second this request

1 Like