我需要什么降价模板，以便在使用nbconvert导出时，Jupyter笔记本中的输出单元格看起来与输入单元格不同

Question

I am trying to use mkdocs with mknotebooks to build a website out of Jupyter Notebook and markdown files. All works well, except, the visual appearance of input and output cells in the resulting html pages is identical, making it hard to understand.

For instance, in a notebook, input and output cells differently as shown below:

However, when I export to markdown, then to html, they appear similar:

I tried handling this with CSS. However, the div s of input and output cells are not of different classes, making it hard to define a different style.

I am currently playing with nbconvert markdown templates . However, I cannot figure out, what to modify so output cells appear differently. By default, they are indented by 1 tab space, which it appears is not sufficient to distinguish them when exported to HTML.

My custom template file looks like below:

{% extends 'markdown.tpl' %}

<!-- adds call number to input prompts -->
{% block in_prompt %}
**In [{{ cell.execution_count }}]:**
{% endblock in_prompt %}

<!-- need help - make outputs appear different, perhaps different background cell color? -->
{% block output %}
    {{cell.source}}
{% endblock output %}


{% block markdowncell scoped %} 
{{ cell.source | wrap_text(80) }} 
{% endblock markdowncell %} 
...

Answer 1

You have a few options, generate a fenced code block or raw HTML.

Fenced code block

A fenced code block natively includes a way to assign a class to the code block. Normally the class is expected to be the language of the code contained within the block, but it does not have to be. Therefore, this should do the trick:

{% block output %}
``` nb-output
{{cell.source}}
```
{% endblock output %}

Note that we have set the class to nb-output , which will be set on the <code> tag of the HTML ( <pre><code class="nb-output"> ).

Now you can define a CSS style for the nb-output class. MkDocs already enables the fenced_code Markdown extension by default.

Raw HTML

As the Markdown rules explain :

HTML is a publishing format; Markdown is a writing format. Thus, Markdown's formatting syntax only addresses issues that can be conveyed in plain text.

That being the case, there is no mechanism in Markdown to provide styling information (or styling hooks). However, as the rules continue:

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

Therefore, in your template, include some raw HTML. Perhaps something like this:

{% block output %}
<div class="nb-output">
    {{cell.source}}
</div>
{% endblock output %}

Now you can define a CSS style for the nb-output class.

Note that as you do not provide the output (the screen shots are not particularly helpful), I can't be certain that a <div> is the best tag to use. If you provided the generated HTML for the two examples, then it might be more clear what HTML to use.

For example, Markdown processing is not done inside raw HTML blocks. Therefore, the cell.source would not get converted to a proper code block. Perhaps a better approach would be to manually create the code block yourself:

{% block output %}
<pre><code class="nb-output">
{{ cell.source|e }}
</code></div>
{% endblock output %}

Note that we manually create a code block, (wrapping the cell.source in <pre><code> tags) while assigning the nb-output class to the code block. We also escape the cell.source with the e filter to ensure that it displays properly in the code block. These are all things that Markdown normally does when creating a code block, minus the class.