What I’m trying to do
Hello,
I’m stuck with writing css to style custom language code block in source mode.
I have a css (please see below) that defines a custom language for a code block and specifies the styling that only applies to that language’s code blocks.
For example, markdown ```pink Hello pink world!``` in Reading mode shows the text in the code block in pink. The pink font colour applies only to ‘pink’-code block. This works. Happy with that.
But when I try to create/find a css to apply a special style to the “pink” code blocks in Source mode I fail.
The main problem is that I can’t figure out how to refer to the code’s language in the Source mode selectors? Is it even possible?
Things I have tried
The css that works for the view mode but does not work for edit mode (my attempts to refer to the language commented out, don’t work)
/*colours*/
--text-pink: rgb(226, 85, 161);
--text-green: rgb(77, 171, 154);
/*styling for language 'pink' that applies in view mode*/
.app-container .markdown-preview-view pre.language-pink code.language-pink, .pink {color: var(--text-pink);}
/*wanting to apply styling only to language 'pink' code but not knowing how to do that, so generic styling applies to any code block in source mode*/
.markdown-source-view.mod-cm6 .cm-hmd-codeblock
/* reference to the language goes here, but how? pre.language-pink? .pink ? */
{ background-color: transparent;color: var(--text-green);}
