How do I add a CSS class to a code block?

[dataframing]

Is your feature request related to a problem? Please describe.

Hi! I'm trying to write a post using just Markdown. Some of the instructions in the post are shell/bash commands, which are fine to define, but not so easy to include code output. For example, I currently have:

echo "hi"
# hi

...which works, but it'd be much nicer to have the same functionality as in notebooks:

1. Specify a code block (with the CSS green left border)
2. Have the code block's output be separately defined (with the CSS indentation)

I'm aware this may not be a great idea for reproducibility, but some commands are tricky to have run whenever we build the book, and we'd like to manually specify what the reader should see in a more visually appealing way.

Describe the solution you'd like

I was hoping there would be a way to:

1. Specify that a Markdown code block corresponds to a cell input (e.g., :class: code_cell)
2. Specify that a Markdown code block corresponds to a cell output (e.g., :class: code_output)

Alternatively, I'm fine with converting my Markdown to a notebook, but is it possible to specify a cell output there?

Describe alternatives you've considered

I was looking through the docs on Formatting code outputs, but couldn't find something that applies to Markdown.

Additional context

None! Thank you so much for jupyter-book — it's fantastic!

[choldgraf]

Try using the "manual" way of specifying code cells - the {code-cell} directive. This gives you a bit more control over the output:

```{code-cell} python
:class: some-class

2 + 2
```

[hyanwong]

I can't get this to work, but if you do

```{code-cell} python
:tags: ["some-class"]

2 + 2
```

Then the code cell is created with the class "tag_some-class", so this can be targeted instead. I don't know how fragile this is though.

[choldgraf]

ah right - I think you mean tag not tab though, right?

and just to confirm - :class: does not add any classes to the output cell?

[hyanwong]

Yes, I mean tag(s) - will correct, sorry. And I don't think that :class: adds classes (not in my testing, at least: I'd love to be proved wrong)