improve rendering of code output

[pietroppeter]

currently code output in html is marked semantically as a <pre><samp> element and the styling is left to water.css which does a very minimal work so that output is somewhat hard to distinguish from other text.
Ideally code and its output are rendered together with some specific styling. The goal is still to have something minimal but clearer to the eye (the user should then be able to simply override the styling when #35 is done).

At the moment the style I like the most is the one found in deepnote, see this random example taken from their homepage: https://deepnote.com/project/San-Pellegrino-label-moire-effect-Zs9-vHXWSC-m61Jt6Q5Wsw/%2Fsanpe.ipynb

[HugoGranstrom]

I found this still lying around on my local repo, this is where I left off in my experiments in #185:

doc.partials["nbCodeSource"] = "<pre style=\"margin: 0px; border-color: #E8ECF0; border-radius: 6px 6px 0px 0px; border-width: 1px; border-style: solid; background: #F3F6F8\"><code style=\"background: #F3F6F8\" class=\"nohighlight hljs nim\">{{&codeHighlighted}}</code></pre>"
doc.partials["nbCodeOutput"] = """{{#output}}<pre style="margin: 0px; border-color: #E8ECF0; border-radius: 0px 0px 6px 6px; border-width: 1px; border-style: solid; border-top-style: none;" class="nb-output">{{output}}</pre>{{/output}}"""

The style should of course be moved to a CSS class instead.