Hi all, I’m trying to style codeblocks differently depending on how they were originally written in the markdown but having a real problem. Here’s the setup. There are three different ways I know of and use for writing code in my posts:
- Inline style:
Here’s `some code` that I want to style one way.
- Indent style:
In the body of the article
[tab or spaces]Here’s some indented code (placeholder space as Discord won’t render real space)
The article continues
- In the fence style:
```somelang
codez
```
These all work in the sense that the code is wrapped in a <code> tag in the output HTML, and I get syntax highlighting too when specifying a language in the fence style, but what I really want to do is to give each of the output code blocks a different class based on how they were specified in the markdown.
For instance the inline class would become <code class=“inline”> and the indented <code class=“indented”> etc. because I want these styled differently. Here’s an example of the three code styles used in conjunction:
No obviously I’ve been able to pick out the different types of code block in this example, but it’s not really exact (relying on HTML element hierarchy) and leads to confusing styles when the hierarchy isn’t quite inline with the CSS, eg:
<snip image, discord wouldn’t allow me to post more than one, I’ll try to post it as a followup>
Is there a way of getting per-code type classes added? I looked at using a codeblock render hook but the context doesn’t seem to contain anything I can switch off.
