Подтвердить что ты не робот

Добавление пользовательских стилизованных абзацев в ячейки разметки

Я хочу добавить больше элементов форматирования, чем предоставлено синтаксисом Markdown в IPython Notebook.

Например, я хочу добавить "Предупреждающий ящик" или "Блокнот", которые в основном представляют собой абзац с разными стилями (например, цвет фона, границы, значок и т.д.).

Я думаю, я могу добавить HTML-код в ячейку, например <div> с встроенным стилем. Но что такое "правильный" способ сделать это, я имею в виду тот, который поддерживает разработчик ipython?

Примеры оценены.

NB: Я использую текущую версию 1.0dev от git master.

4b9b3361

Ответ 1

Простой способ добавления предупреждающих, заметных, успешных (и т.д.) полей (также называемых предупреждениями или предупреждениями) просто использует классы bootstrap уже включен в ноутбук. Единственное предостережение в том, что ссылки и другие стили (например, полужирный) должны быть указаны в HTML внутри поля.

Пример

Удерживающая ячейка, содержащая этот код:

# Upload data files
<p class="lead">This <a href="https://jupyter.org/">Jupyter notebook</a>
shows how to upload data files to be converted
to [Photon-HDF5](http://photon-hdf5.org) format. </p>

<i>Please send feedback and report any problems to the 
[Photon-HDF5 google group](https://groups.google.com/forum/#!forum/photon-hdf5).</i>

<br>
<div class="alert alert-warning">
<b>NOTE</b> Uploading data files is only necessary when running the notebook online.
</div>

приведет к этому выводу:

введите описание изображения здесь

Вы можете изменить alert-warning на alert-success, alert-info или alert-danger, чтобы получить разные цвета для поля.

Ответ 2

Отвечая на мой вопрос...

Другие решения

Джим предложил добавить некоторый пользовательский стиль CSS в ячейку уценки каждого ноутбука. Это решение работает, но не удобно, так как вам нужно встроить стиль в каждый ноутбук. В моем случае я хочу глобальный стиль, и я не хочу изменять все ноутбуки после каждой модификации стиля.

Естественным решением будет использование пользовательского файла (custom.css), содержащего стиль. Однако после использования этих инструкций стиль не применяется к ноутбуку (его можно загрузить с сервера, хотя).

Лучшее решение (пока)

Я нашел решение, рассматривающее эту впечатляющую книгу, написанную как коллекцию ноутбуков IPython. В конце каждого ноутбука автор добавляет следующую ячейку кода:

from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

Вставьте файл custom.css в папку вашего ноутбука (в подпапке styles), стиль будет загружен после выполнения первого. Кроме того, при каждом открытии ноутбука стиль будет волшебным образом загружен без необходимости повторного запуска ячейки!

Этот волшебный трюк работает, потому что стиль сохраняется в ячейке ouput при первом запуске, и, хотя он невидим, будет сохранен, как и любой другой вывод. Поэтому, когда мы загружаем ноутбук и последовательно подключаем выходные ячейки, стиль будет применен.

Пример CSS

Чтобы выполнить ответ, я публикую стиль CSS, который я использовал для создания "Предупреждающего окна":

<style>
div.warn {    
    background-color: #fcf2f2;
    border-color: #dFb5b4;
    border-left: 5px solid #dfb5b4;
    padding: 0.5em;
    }
 </style>

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

<div class=warn>
**Warning:** remember to do bookeping  
<div/>

Это будет выглядеть следующим образом:

enter image description here

Для более общей стилистики ноутбуков вы можете вдохнуть вдохновение из custom.css упомянутой выше книги.

Ответ 3

Обновление: Этот метод больше не работает в IPython 4.0/Jupyter, так как способ рендеринга ноутбука изменился.

Я считаю, что лучший способ сделать такой стиль - создать запись уценки в верхней части документа и собрать свои стили. Поскольку ячейка уценки может содержать любой допустимый HTML-код, она может содержать (например)

<style>
    .warning { color: red; }
</style>

См. "Обсуждение PyCon 2013" Мэтта Дэвиса, около 22 минут во время Q & A для примера этого в использовании.

Ответ 4

Эти пользовательские стили css уже добавлены в ipython версии 2 и выше.

<div class="alert">
As of IPython 2.0, the user interface has changed significantly
</div>

<div class="alert alert-success">
Enter edit mode by pressing `Enter`
</div>

<div class="alert alert-error">
Don't try to type into a cell in command mode
</div>

Просто вставьте это в ячейку и измените ее на тип уценки.

Отметьте этот для примеров и ipython в глубину для передовых функций ipython.

Ответ 5

Другое среднее состоит в том, чтобы просто создать цепочку стилей и открыть ее с iPython HTML-объектом в ячейке кода:

from IPython.display import HTML
style = "<style>div.warn { background-color: #fcf2f2;border-color: #dFb5b4; border-left: 5px solid #dfb5b4; padding: 0.5em;}</style>"
HTML(style)

Затем используйте его в ячейке уценки:

<div class="warn">Warning!</div>