Какой шаблон уценки мне нужен, чтобы выходные ячейки в записных книжках Jupyter отличались от входных ячеек при экспорте с помощью nbconvert

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

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

Однако, когда я экспортирую в markdown, а затем в html, они выглядят одинаково: текущий вид

Я попытался справиться с этим с помощью 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 %} 
...

jupyter-notebook python markdown nbconvert mkdocs
person gDexter42    schedule 20.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть несколько вариантов: сгенерировать изолированный блок кода или необработанный 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 нет механизма для предоставления информации о стилях (или хуков стили). Однако, поскольку правила продолжаются:

Для любой разметки, не охватываемой синтаксисом 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 обычно делает при создании блока кода, за вычетом класса.

person Waylan    schedule 21.05.2019
comment
Вэйлан благодарит за этот ответ. К моему удивлению, использование cell.source помещает входной код ячейки, а не ее выходной код. Это странно, и я пытаюсь понять это, прежде чем смогу проверить этот ответ. Между тем, я добавлю репо только с этим контентом, чтобы его было легче отлаживать. - person gDexter42; 22.05.2019
comment
@WayLan, не могли бы вы указать мне на ресурс для типов {% block XXX%}? Я пытаюсь написать несколько пользовательских шаблонов, но не знаю, как назвать эти строки, и изо всех сил пытаюсь найти их в Google. - person Aaron Ciuffo; 29.11.2020
comment
@AaronCiuffo, блоки, поддерживаемые встроенными темами MkDocs, перечислены здесь. Если вы используете стороннюю тему, вам нужно будет просмотреть документацию по этой теме или, возможно, посмотреть исходный код шаблонов. - person Waylan; 30.11.2020