Встраиваем картинки в Jupyter
Рассмотрим способы вставки картинок в Jupyter ноутбук.
Синтаксис Markdown
Выглядит следующим образом:
Например, исполним Markdown ячейку со следующим содержимым:
Синтаксис HTML
Для этого в Markdown ячейке используем тег . Этот способ позволяет задавать дополнительные настройки, в частности, размеры:
Возможности Ipython
В отличие от предыдущих способов позволяет совместить код и вывод картинки в одной ячейке, так как делает это посредством использования функции Image из модуля IPython.display:
from IPython.display import Image print('Картинка с птицей') Image("data/картинки/kartinki-ryabchiki-28.jpeg", width=320, height=240)
Как вставить изображение в таблицу в Jupyter Notebook
У меня есть отчёт с кодом в Jupyter Notebook, в котором я хочу привести таблицу с картинками. Этот отчёт я планирую сохранить в html и отправить. Вопрос: Как вставить картинки в таблицу так, чтобы ipynb экспортировался в html, корректно отображаемый на другом компьютере? Попытка решения №1 Я попробовал создать таблицу через html в ячейке Markdown:
Въезд запрещен Движение без остановки запрещено
После сохранения в hmtl и запуска из другой директории, картинки перестают отображаться (см. рис. 1), т.к. их нет в текущей директории. Я бы не хотел таскать кучу картинок вместе с html. Может быть можно вставить их в бинарном виде в html? Рисунок 1. Попытка решения №2 Я попробовал перетащить картинку курсором мыши в Google Chrome — Jupyter сам сгенерировал Markdown:
 Изображение вставленное такие образом корректно отображается после сохранения в hmtl из любой директории, однако если вставить изображения в таблицу следующим образом:
 Въезд запрещен  Движение без остановки запрещено
то изображение перестаёт отображаться (см. рис. 2). В Markdown ошибка? Рисунок 2.
Как вставить картинку в юпитер ноутбук
В этой статье рассматриваются некоторые дополнительные возможности, которые позволят вам максимально использовать возможности формата Markdown. Если вы чувствуете что описаные здесь возможности сейчас вам не нужны, то пропустите этот документ и возвращайтесь к нему тогда, когда они вам понадобятся.
- Перенос строк
- Горизонтальные линии
- Картинка со ссылкой
- Использование HTML
- Отмена форматирования
- Использование специальных символов
- Официальная информация
Перенос строк
В некоторых текстах, например в поэзии, необходимо иметь возможность разделять абзац на несколько строк. Использование клавиши Enter не даст ожидаемого эффекта, т.к. по-умолчанию отдельные строки соединяются вместе чтобы текст выглядел как цельный абзац.
Люблю грозу в начале мая,
Когда весенний первый гром,
Как бы резвяся и играя,
Грохочет в небе голубом.
В приведенном выше стихотворении новую строку начинали используя клавишу Enter, однако в результате эти переносы будут проигнорированы:
Люблю грозу в начале мая, Когда весенний первый гром, Как бы резвяся и играя, Грохочет в небе голубом.
Однако если вы закончите строку двумя символами «пробел», то заставите следующую начаться с новой строки:
Люблю грозу в начале мая,
Когда весенний первый гром,
Как бы резвяся и играя,
Грохочет в небе голубом.
Горизонтальные линии
Создать горизонтальную линию можно поместив три или больше звездочек (*), минусов (-) или подчеркиваний (_) на отдельной строке.
Такая строка создаст линию:
но вы можете разделять символы пробелами, чтобы сделать линию более очевидной в процессе редактирования документа.
_ _ _ _ _
Каждая из приведенных выше строк даст одинаковый результат. Вот такой:
Картинка со ссылкой
В документе ‘Форматирование текста с помощью Markdown’ уже были приведены инструкции для создания web-ссылок и вставки картинок. Однако вы можете совместить две эти возможности и создать картинку, которая является еще и ссылкой на какую-нибудь страницу в сети.
[Поисковая система Google][google]
![Логотип Google][logo]
Выше приведены обычная ссылка и обычное изображение. Вы можете поместите картинку туда где указан текст ссылки, например:
[![Логотип Google][logo]][google]
Нужно не забывать что приведенные выше ссылки должны быть определены где-либо в документе:
[logo]: http://www.google.com/images/logo.gif
[google]: http://www.google.com/ «щелкните, чтобы посетить Google.com»
Такое совмещение создает картинку, щелчок по которой переместит вас по указанной ссылке:
Такая техника может использоваться для создания коллекции уменьшеных картинок, которые, в свою очередь, ссылаются на полноразмерные копии.
Использование HTML
Если вы являетесь специалистом в HTML, то можете обнаружить, что Markdown не дает вам всех возможностей, которые вы бы хотели. К счастью Markdown разрабатывался с учетом этого и позволяет вставлять теги HTML непосредственно в форматируемый текст.
* мелкий текст
* крупный текст
Имейте в виду что HTML-разметка со-существует с разметкой Markdown. Это освобождает вас от необходимости использовать HTML для основных элементов оформления, таких как параграфы, списки и т.п., однако всеже предоставляет всю мощь HTML в специфических ситуациях.
Отмена форматирования
Если, в отличии от предыдущей главы, вы хотите, чтобы введенные теги HTML отображались в точности как вы их написали, а не использовались в оформлении текста, то начните каждую строку с четырех пробелов.
Абзац с тегами HTML отображается без изменений
Кроме того, это используется для отображения текста программ:
for (int i=0; i
Т.к. подобное форматирование часто используется для отображения листингов компьютерных программ, а также текстов, которые могут содержать символы, используемые Markdown для оформления документов, то для этих сторок форматирование Markdown отключено:
В обычном состоянии это слово было бы **полужирным**. О том как использовать специальные символы в обычном тексте читайте в следующей главе.
Использование специальных символов
Если вы хотите отобразить любой из специальных символов Markdown вместо того, чтобы использовать его для форматирования, просто поставьте перед ним символ обратной косой черты (\). Сама косая черта не отображается, однако следующий за ней символ будет показан как есть.
\*звездочки, а не курсив\*
*звездочки, а не курсив*
*курсив, а не звездочки*
курсив, а не звездочки
Краткое руководство по Маркдауну
Официальное руководство по синтаксису Markdown мне кажется слишком длинным и не слишком наглядным, поэтому я составил краткое руководство, которое поможет выучить или повторить синтаксис Маркдауна за час.
Кроме традиционного Маркдауна у разработчиков получил распространение дополненный и улучшеный вариант языка — Github Flavoured Markdown, сокращенно GFM.
Основные отличия GFM и чистого Маркдауна:
- добавили таблицы, которых не было в оригинальном Маркдауне;
- добавили альтернативный синтаксис для вставки блоков кода: теперь можно не ставить 4 пробела перед каждой строкой кода, также можно явно указать язык кода;
- добавили зачеркнутый текст.
# GitHub-Flavored Markdown ## Краткое руководство Абзацы создаются при помощи пустой строки. Если вокруг текста сверху и снизу есть пустые строки, то текст превращается в абзац. Чтобы сделать перенос строки вместо абзаца, нужно поставить два пробела в конце предыдущей строки. Заголовки отмечаются диезом `#` в начале строки, от одного до шести. Например: # Заголовок первого уровня # ## Заголовок h2 ### Заголовок h3 #### Заголовок h4 ##### Заголовок h5 ###### Заголовок h6 В декоративных целях заголовки можно «закрывать» с обратной стороны. ### Списки Для разметки неупорядоченных списков можно использовать или `*`, или `-`, или `+`: - элемент 1 - элемент 2 - элемент . Вложенные пункты создаются четырьмя пробелами перед маркером пункта: * элемент 1 * элемент 2 * вложенный элемент 2.1 * вложенный элемент 2.2 * элемент . Упорядоченный список: 1. элемент 1 2. элемент 2 1. вложенный 2. вложенный 3. элемент 3 4. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. На самом деле не важно как в коде пронумерованы пункты, главное, чтобы перед элементом списка стояла цифра (любая) с точкой. Можно сделать и так: 0. элемент 1 0. элемент 2 0. элемент 3 0. элемент 4 Список с абзацами: * Раз абзац. Lorem ipsum dolor sit amet, consectetur adipisicing elit. * Два абзац. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. * Три абзац. Ea, quis, alias nobis porro quos laborum minus sed fuga odio dolore natus quas cum enim necessitatibus magni provident non saepe sequi? Четыре абзац (Четыре пробела в начале или один tab). ### Цитаты Цитаты оформляются как в емейлах, с помощью символа `>`. > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse > id sem consectetuer libero luctus adipiscing. Или более ленивым способом, когда знак `>` ставится перед каждым элементом цитаты, будь то абзац, заголовок или пустая строка: > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. В цитаты можно помещать всё что угодно, в том числе вложенные цитаты: > ## This is a header. > > 1. This is the first list item. > 2. This is the second list item. > > > Вложенная цитата. > > Here's some example code: > > return shell_exec("echo $input | $markdown_script"); ### Исходный код В чистом Маркдауне блоки кода отбиваются 4 пробелами в начале каждой строки. Но в GitHub-Flavored Markdown (сокращенно GFM) есть более удобный способ: ставим по три апострофа (на букве Ё) до и после кода. Также можно указать язык исходного кода. ` ` `html nav class="nav nav-primary"> ul> 0 комментариев Комментарии Войти ul> nav> ` ` ` Самое приятное, что в коде не нужно заменять угловые скобки `< >` и амперсанд `&` на их html-сущности. ### Инлайн код Для вставки кода внутри предложений нужно заключать этот код в апострофы (на букве Ё). Пример: ``. Если внутри кода есть апостроф, то код надо обрамить двойными апострофами: ``There is a literal backtick (`) here.`` ### Горизонтальная черта `hr` создается тремя звездочками или тремя дефисами. *** ### Ссылки Это встроенная [ссылка с title элементом](http://example.com/link "Я ссылка"). Это — [без title](http://example.com/link). А вот [пример][1] [нескольких][2] [ссылок][id] с разметкой как у сносок. Прокатит и [короткая запись][ ] без указания id. [1]: http://example.com/ "Optional Title Here" [2]: http://example.com/some [id]: http://example.com/links (Optional Title Here) [короткая запись]: http://example.com/short Вынос длинных урлов из предложения способствует сохранению читабельности исходника. Сноски можно располагать в любом месте документа. ### Emphasis Выделять слова можно при помощи `*` и `_`. Одним символ для наклонного текста, два символа для жирного текста, три — для наклонного и жирного одновременно. Например, это _italic_ и это тоже *italic*. А вот так уже __strong__, и так тоже **strong**. А так ***жирный и наклонный*** одновременно. ### Зачеркивание В GFM добавлено зачеркивание текста: две тильды `~` до и после текста. ~~Зачеркнуто~~ ## Картинки Картинка без `alt` текста  Картинка с альтом и тайтлом:  Запомнить просто: синтаксис как у ссылок, только перед открывающей квадратной скобкой ставится восклицательный знак. Картинки «сноски»: ![Картинка][image1] ![Картинка][image2] ![Картинка][image3] [image1]: http://placehold.it/250x100 [image2]: http://placehold.it/200x100 [image3]: http://placehold.it/150x100 Картинки-ссылки: [](http://example.com/) ## Использование HTML внутри Markdown Mожно смешивать Markdown и HTML. Если на какие-то элементы нужно поставить классы или атрибуты, смело используем HTML: > Выделять слова можно при помощи * и _ . Например, это italic и это тоже italic. А вот так уже strong, и так тоже strong. Можно и наоборот, внутри HTML-тегов использовать Маркдаун. section class="someclass"> ### Пример Маркдауна внутри HTML Выделять слова можно при помощи `*` и `_` . Например, это _italic_ и это тоже *italic*. А вот так уже __strong__, и так тоже **strong**. section> ### Таблицы В чистом Маркдауне нет синтаксиса для таблиц, а в GFM есть. First Header | Second Header ------------- | ------------- Content Cell | Content Cell Content Cell | Content Cell Для красоты можно и по бокам линии нарисовать: | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | Можно управлять выравниванием столбцов при помощи двоеточия. | Left-Aligned | Center Aligned | Right Aligned | |:------------- |:---------------:| -------------:| | col 3 is | some wordy text | **$1600** | | col 2 is | centered | $12 | | zebra stripes | are neat | ~~$1~~ | Внутри таблиц можно использовать ссылки, наклонный, жирный или зачеркнутый текст. Для всего остального есть обычный HTML.