Style different code blocks to have a border and different colors

What I’m trying to do

I am writing and e-book, and I would like to style code blocks in different ways – one code block for Python and another for the terminal output. I have managed to this this in LaTeX, but I have no idea on how to do it using CSS.

If this is too hard, I would like to at least be able to draw a boundary around the code blocks, to make them distinguishable on the e-book. Right now, with the default Pandoc output, it makes it quite hard to read.

Screenshot_2

I have searched the forums for code block styling, but I could not find something about drawing borders around code blocks.

Thanks in advance!

How do you markup those blocks initially?

I reckon you’re not using ```python and ```shell? And if so, how would that work for you?

And if you do either you can use CSS to add the border. I think I’ve seen some other examples related to pandoc where they possible use the media selectors for print to address pandoc stuff. Do a search related to that, and I reckon you’ll find something useful.

I am using the ```python block, the styling is fine when I export it as a PDF, unfortunately it loses its border rectangle when I export it as html, latex and epub from Obsidian using Pandoc. I am searching for some way to do it using pandoc now – it seems that I may be able to export it as a LATEX file, do the styling there, convert it to html then to epub to get my desired result.

I will update the thread once I have a working solution.

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