Quarto render options jupyter notebook python code cell

Hi there,

Does anybody know how to tweak the render options in quarto for the output of Python code cells in jupyter notebooks?

Currently it’s being displayed as such, which I don’t particularly like:

So I want to style the output of this, e.g. the (torch.Size([3]), torch.Size([3, 2]))

I am not exactly sure how I want to style it, perhaps with some vertical bar at the left side or something.

1 Like

Hey @lucasvw,

I’m sure you could use a combination of Jupyter output styling and Quarto’s custom theming to get the desired effect that you’d like.

Let me know if you have something specific in mind and I can think of a more contextual answer / example snippet. I used the Quarto custom theming recently for a project, in combination with the ‘nbdev_preview’ command its super easy and fast to get write what you want since you can see the impact of your code straight away.

2 Likes

Thanks @nglillywhite for your reply, that should probably work indeed. I was hoping for something more “easy”, e,g. by using some parameter in the metadata or something, but perhaps that’s just not possible.

Thanks again for your reply!

2 Likes

For reference, I finally got this working :slight_smile:

  1. Update the _quarto.yml:
...
format:
  html:
    theme: [cosmo, syles.scss]
    css: styles.css
  1. create a styles.css:
.cell-output pre {
    margin-left: 1em;
    margin-top: 0;
    background: none;
    border-left: 3px solid rgba(233,236,239,.65);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 0.8em;
    padding-left: 0.2em;
    padding-top: 0.2em;
}

.cell-output .sourceCode {
    background: none;
    margin-top: 0;
}
  
.cell > .sourceCode {
    margin-bottom: 0;
    font-size: 0.875em;
}

This results in the following rendered cell output:

I based it off the css I found here

2 Likes

I find the quarto custom theming so nice and easy, I’ve used it for other stylistic changes but its great to see how simple it is to modify the cell output, this is really nice reference to come back to, thanks!

1 Like