Quarto render options jupyter notebook python code cell

[lucasvw (Lucas)]

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.

[nglillywhite (NickL)]

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.

[lucasvw (Lucas)]

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!

[lucasvw (Lucas)]

For reference, I finally got this working

1. Update the _quarto.yml:

...
format:
  html:
    theme: [cosmo, syles.scss]
    css: styles.css

2. 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

[nglillywhite (NickL)]

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!

[oat]

Thanks for sharing.

Following your solution, I used the following css to format the output cell. However, some of the output lines are generated as separate chunks, rather than shown in one output cell, as shown below.

May I ask how to edit the css file to remove the gaps between the output cells?

The example book, and code, are published here.

Thanks.

.cell-output pre {
    margin-left:             0em;
    margin-top:              0em;
    /* background:              #303030; */
    background:              rgba(200, 200, 200, 0.1);
    border-left:             35px solid rgba(200, 200, 200, 0.1);
    border-top-left-radius:  0;
    border-top-right-radius: 0;
    /* font-size:               0.8em; */
    /* padding-left:            0.em; */
    /* padding-top:             0.em; */
}

.cell-output .sourceCode {
    background: none;
    margin-top: 0;
}

.cell > .sourceCode {
    margin-bottom: 0em;
    /* font-size:     0.875em; */
}

[ForBo7 (Salman Naqvi)]

Another way this can be done, without diving into styling, is to use the IPython Markdown class — though this method may not be as good if you want to use it for all code cells or if you want the code cells to be visible.

from IPython.display import display, Markdown

display(Markdown(f'''
`{a[0, :].shape, b.shape}`
'''))

This’ll print the output of a[0, :].shape, b.shape with Markdown syntax highlighting.

I think the code snippet above can be further simplified by omitting the display function.

[lucasvw (Lucas)]

Hi @oat,

Not sure, when I do:

It renders as:

My styles.css:

/* css styles */
* {
    text-align: justify;
}

.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;
}

Good luck!

[oat]

Thanks, @lucasvw

Using your css, the output of the two consequtive print() are not separated by a gap. However, this still doesn’t work for the output of pytorch traning shown in my example quarto book.

[lucasvw (Lucas)]

@oat Perhaps try to inspect what element is being placed in between the output text, check the class and add the same css styles as you have for your output text on that element and class in the custom css file?