KeepIt icon indicating copy to clipboard operation
KeepIt copied to clipboard

How to fix appearance of code chunks in markdown documents

Open mathiasweidinger opened this issue 4 years ago • 1 comments

Hi,

I am using the KeepIt theme to run my blog. I really, really like it but unfortunately there seems to be an issue with the CSS that makes code chunks unreadable (switching the code background to white on a black background like so...):

image

More than that, I would also like code snippets to be rendered without these black boxes around them.

Could you please point me to where in the CSS I need to change this?

Thanks and all the best, Mathias

mathiasweidinger avatar Dec 09 '21 16:12 mathiasweidinger

Hey! I just (as in JUST NOW) finally figured this out.

I ended up debugging this with just "inspect" in chrome. Took me a bit but here are the changes I made -- obviously you don't have to modify the example site...

\site\resources\_gen\assets\scss\css\main.scss_b95b077eb505d5c0aff8055eaced30ad.content (5 hits)
	Line 600: /*	background: #fff; */
	Line 601: /*	border: 1px solid #ddd; */
	Line 602: /*	box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd; */
	Line 609: /*	box-shadow: 1px 1px 0 #87878d, 2px 2px 0 #87878d */
	Line 620: /*	box-shadow: 2px 2px 3px rgba(0, 0, 0, .125) */
\site\themes\KeepIt\assets\css\_common\_page\post.scss (4 hits)
	Line 97:             /* background: #fff; */
	Line 98:             /* border: 1px solid #ddd; */
	Line 99:             /* box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd; */
	Line 105:             /*    box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color; */
\site\themes\KeepIt\exampleSite\resources\_gen\assets\scss\css\main.scss_b95b077eb505d5c0aff8055eaced30ad.content (4 hits)
	Line 600: 	/* background: #fff; */
	Line 601: 	/* border: 1px solid #ddd; */
	Line 602: 	/* box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd; */
	Line 609: /*	box-shadow: 1px 1px 0 #87878d, 2px 2px 0 #87878d */
\site\themes\KeepIt\resources\_gen\assets\scss\css\main.scss_b95b077eb505d5c0aff8055eaced30ad.content (4 hits)
	Line 613: 	/* background: #fff; */
	Line 614: 	/* border: 1px solid #ddd; */
	Line 615: 	/* box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd; */
	Line 622: 	/* box-shadow: 1px 1px 0 #87878d, 2px 2px 0 #87878d */

I haven't tested this with other posts so I don't know what effect it will have on non code related - text based - posts...

htothek avatar Dec 14 '21 16:12 htothek