Skip to content

Support for markdown-it-attrs style attributes on code blocks #2153

@1cg

Description

@1cg

First off let me thank you for sli.dev, it is an excellent tool that I have appreciated more and more as I have learned it more thoroughly.

I have one problem that I am finding difficult to address however: when I am creating code blocks I sometimes need to adjust the font to make a given example fit in the slide (I use the two-panel layout for my lectures). Right now I am using scoped CSS (great feature!) to fix it, but it's a little unwieldy. It has also been suggested that I wrap the code block in a div to apply styles, but, again, that is a bit unwieldy.

What I would love is the ability to use mardown-it-attrs style attributes on block elements:

https://www.npmjs.com/package/markdown-it-attrs

Which would allow me to write this:

'''js  {style="font-size:12pt"}
function changeText() {
    document.getElementById("myButton").innerHTML = "Clicked!";
}
'''

(Sorry, had to use quotes rather than back-ticks in this example, I hope you get my meaning)

This would give me fine grained control over the code examples I am editing directly in the slide, without needing to create another element, etc.

Certainly a small thing, but tweaking things like padding, font size, etc. comes up a lot when I'm writing code examples in slides and this would make it much easier to do so.

Thank you for considering this feature and thank you for slidev!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions