Support custom CSS classes for blocks of content

[joachimlebovits]

For authors that want more customizability in the outputs of their content, they'd benefit from being able to attach custom CSS classes to blocks of content (paragraphs, images, roles and directives, etc). This could then be styled with custom CSS rules.

Related issues

• https://github.com/jupyter-book/myst-theme/issues/321

Inspiration

• Here's how docutils handles custom classes
• Quarto and Pandoc use custom attributes

Edited by @choldgraf

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[choldgraf]

I'm running into this limitation as well. I think two things would be helpful here:

1. Guidance for how we can include a custom CSS file (ideally SCSS) with our builds.
2. Guidance for how to add CSS classes/ids to objects on a page, or otherwise how to give them unique names that we can use CSS to select on.

For example my use-case is that I'd like to use the :::{card} functionality to create "big cards with numbers", and needed to use CSS because the {card} directive doesn't include the ability to use bootstrap's classes to modify font size etc.

[lwasser]

+1 on this request. We'd like to use mystmd to host pyOpenSci's peer review metrics and also in the future lessons similar to what pythia is doing. we will want to theme mystmd to align with our pyOS brand. Is this feature something that is on the radar for mystmd? ✨

[choldgraf]

I've updated the top comment with some more context, FYI.

I think this issue is also related to:

• https://github.com/jupyter-book/myst-theme/issues/321