Какой шаблон уценки мне нужен, чтобы выходные ячейки в записных книжках Jupyter выглядели иначе, чем входные ячейки при экспорте с использованием nbconvert - PullRequest
0 голосов
/ 21 мая 2019

Я пытаюсь использовать mkdocs с mknotebooks для создания веб-сайта из Jupyter Notebook и файлов разметки. Все работает хорошо, за исключением того, что внешний вид входных и выходных ячеек на итоговых html-страницах идентичен, что затрудняет понимание.

Например, в записной книжке ячейки ввода и вывода различаются, как показано ниже: correct appearance

Однако при экспорте в уценку, а затем в HTML они выглядят примерно так: current appearance

Я пытался справиться с этим с помощью CSS. Однако div входных и выходных ячеек не относятся к разным классам, что затрудняет определение другого стиля.

В настоящее время я играю с nbconvert шаблонов уценки . Однако я не могу понять, что нужно изменить, чтобы выходные ячейки выглядели иначе. По умолчанию они имеют отступ в 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 %} 
...

1 Ответ

1 голос
/ 21 мая 2019

У вас есть несколько вариантов, сгенерировать блок изолированного кода или необработанный HTML.

Блок огражденного кода

Блок огороженного кода изначально содержит способ присвоения класса блоку кода.Обычно ожидается, что класс будет языком кода, содержащегося в блоке, но это не обязательно.Следовательно, это должно сработать:

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

Обратите внимание, что мы установили класс на nb-output, который будет установлен на теге <code> HTML (<pre><code class="nb-output">).

Теперь вы можете определить стиль CSS для класса nb-output.MkDocs по умолчанию уже включает расширение fenced_code Markdown.

Необработанный HTML

Как правила * Markdown объясняют :

HTML является публикация формат;Уценка - это запись формат.Таким образом, синтаксис форматирования Markdown решает только те проблемы, которые могут быть переданы в виде простого текста.

В таком случае в Markdown нет механизма для предоставления информации о стилях (или хуков оформления).Однако, поскольку правила продолжаются:

Для любой разметки, не охватываемой синтаксисом Markdown, вы просто используете сам HTML.Нет необходимости вводить предисловие или разделять его, чтобы указать, что вы переходите с Markdown на HTML;вы просто используете теги.

Поэтому в ваш шаблон включите некоторый необработанный HTML.Возможно, что-то вроде этого:

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

Теперь вы можете определить стиль CSS для класса nb-output.

Обратите внимание, что поскольку вы не предоставляете вывод (скриншоты не особополезно), я не могу быть уверен, что <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 при создании блока кода, за исключением класса.

...