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

Question

我正在尝试将mkdocs与mknotebooks结合使用，以从Jupyter Notebook和markdown文件构建网站。一切正常，除了在生成的html页面中输入和输出单元格的视觉外观相同之外，这使其难以理解。

例如，在笔记本电脑中，输入和输出单元格如下所示：

但是，当我导出到markdown，然后导出到html时，它们看起来类似：

我尝试使用CSS处理此问题。但是，div的输入和输出单元格不是不同的类，因此很难定义不同的样式。

我目前正在玩nbconvert markdown templates。但是，我不知道要修改什么，因此输出单元格看起来会有所不同。默认情况下，它们缩进1个制表符空间，当导出到HTML时似乎不足以区分它们。

我的自定义模板文件如下所示：

{% 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

您可以选择几种方法，生成受保护的代码块或原始HTML。

有栅栏的代码块

受保护的代码块本身包含一种将类分配给代码块的方法。通常，该类应为该块中包含的代码的语言，但不一定必须如此。因此，这应该可以解决问题：

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

请注意，我们已将类设置为nb-output，该类将在HTML（<code>）的<pre><code class="nb-output">标记上设置。

现在，您可以为nb-output类定义CSS样式。默认情况下，MkDocs已启用fenced_code Markdown扩展名。

原始HTML

按照降价规定explain：

  

HTML是发布格式； Markdown是一种 writing 格式。因此，Markdown的格式语法只能解决可以以纯文本形式传达的问题。

在这种情况下，Markdown中没有提供样式信息（或样式挂钩）的机制。但是，随着规则的继续：

  

对于Markdown语法未涵盖的任何标记，您只需使用HTML本身即可。无需在其前添加或定界以表明您已从Markdown切换为HTML；您只需使用标签即可。

因此，在模板中，请包含一些原始HTML。也许是这样的：

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

现在，您可以为nb-output类定义CSS样式。

请注意，由于您没有提供输出（屏幕截图不是特别有用），所以我不确定<div>是最适合使用的标签。如果您为这两个示例提供了生成的HTML，则可能会更清楚地使用哪种HTML。

例如，Markdown处理不在原始HTML块内完成。因此，cell.source将不会转换为正确的代码块。也许更好的方法是自己手动创建代码块：

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

请注意，我们在将cell.source类分配给代码块的同时，手动创建了一个代码块（将<pre><code>标记在nb-output中）。我们还使用cell.source过滤器对e进行了转义，以确保其在代码块中正确显示。这些都是Markdown在创建代码块时通常要做的事情，减去类。