2

我正在尝试将mkdocs与mknotebooks一起使用，以使用 Jupyter Notebook 和 markdown 文件构建网站。一切都很好，除了生成的 html 页面中输入和输出单元格的视觉外观是相同的，因此很难理解。

例如，在笔记本中，输入和输出单元格不同，如下所示： 正确的外观

但是，当我导出到 markdown，然后导出到 html 时，它们看起来相似： 现在的样子

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

我目前正在玩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 %} 
...
4

1 回答 1

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

正如 Markdown 规则所解释的：

HTML 是一种发布格式；Markdown 是一种写作格式。因此，Markdown 的格式化语法只解决了可以用纯文本表达的问题。

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

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身。无需为它加上前缀或定界以表明您正在从 Markdown 切换到 HTML；您只需使用标签。

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

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

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

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

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

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

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

于 2019-05-21T15:23:55.730 回答