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

Question

我正在尝试使用mkdocs和{a2}一起使用Jupyter笔记本和降价文件来建立一个网站。所有的工作都很好，除了结果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。在

围栏代码块

fenced代码块本机包含一种将类分配给代码块的方法。通常情况下，类应该是块中包含的代码的语言，但它不是必须的。因此，这应该能做到：

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

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

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

原始HTML

作为降价规则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.

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

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.

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

^{pr2}$

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

注意，由于您没有提供输出（屏幕截图不是特别有用），所以我不能确定<div>是否是最好的标记。如果您为这两个示例提供了生成的HTML，那么使用什么HTML可能会更清楚。在

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

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

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