me.code does not have style parameters support

[pritam-dey3]

Is your feature request related to a problem? Please describe. me.code or me.markdown with code blocks, does not have a css styling option. Hence it is not possible to change the background color, height of the code block etc.

Describe the solution you'd like IMO me.code should not be calling me.markdown under the hood and should support style parameters for the code block.

Describe alternatives you've considered

Additional context

[richard-to]

I think at minimum we can add a Style parameter to code and then pass the Style down to me.markdown. You'll still be a bit limited in what changes you can make.

But I think if you want more control, you can try something like:

with me.box(classes="my-code-styles"):
   me.code("Your code")

Then you can import a stylesheet to override the code styles. I have not tried this yet so there could be limitations. But I think would actually give you more control over the styles than adding a style parameter (though we should still add that for consistency).

[pritam-dey3]

My apologies for the delayed response.

Actually, there are some limitations. Changing only the style of me.box doesn't actually change the style of the code block. If I don't include my-code-styles > * { background: lightblue; } in the CSS file, the background color of the code block doesn't change. This is because the markdown code block has its own CSS styling, which is not accessible from me.markdown.

In my use case, I wanted to change the background color as well as the height of the code block. me.code doesn't support styling, so I tried:

me.markdown(f"```{code}```", style=me.Style(background_color="lightblue", height="500px"))

but it didn't work. If you try passing the me.code style to me.markdown, the result would be the same as above, which is surprising behavior. Passing the style parameter to me.code should change the style of the code block, not just the wrapper around it.

In the case of markdown, there may be multiple code blocks in a single markdown string, so more control over each code block would be needed. This is why I thought me.code should have special style support that actually changes the style of the code block.

[richard-to]

Thanks a lot for the additional details. I agree about style not working that well for the code blocks or even markdown. I think this makes sense since we use highlight js themes for the code blocks, so makes it hard to override with style.

The CSS styles for the code blocks starts here: https://github.com/google/mesop/blob/main/mesop/web/src/app/styles.scss#L368

In terms of the box class suggestion, that's good to know. I haven't tested it out yet. But I feel like there's a way to make it work. I agree it will be a bit hacky though.

In terms of a cleaner way to handle this, it's possible we could add a classes parameter to markdown / code component (if it's too hard to do with me.box). But that's still fairly challenging.

Another option is having a way to specify different highlight js themes per code block. I haven't thought too much about how that could work. We'd also want it to work cohesively with Material Theming (https://github.com/google/mesop/issues/669) when we get there.

The other option may be more in line with your suggestion which would be to include parameters to say change the background color of the code block, font size. I think that would end up being too limiting and stray a bit from our current API designs.

I do agree that it would be nice to be able to control the code block styling rather than force someone to use a pre-existing theme.

Right now not readily apparent what would be a good API design for this yet.

[wwwillchen]

Once #989 lands, then I think writing CSS and using box class is a sufficient solution for styling the code blocks and markdown.

But if you really want full control over the markdown, you can create your own web component and wrap a markdown library like marked.js (which is what we use internally). I've done this for my own Mesop app because of some advanced use cases and it's worked well.

[richard-to]

Great point about web components. Funny thing is we actually have an example here: https://github.com/google/mesop/tree/main/mesop/examples/web_component/markedjs

We created this one before we moved our markdown component implementation to using markedjs.