Страница 1 из 1

MLO5: Markdown: Как хранить картинки в теле заметки

Добавлено: 21 апр 2018, 14:11
WaRoX
Markdown в MLO5 принес много дополнительных возможностей по хранению и удобному использованию форматирования в заметках. Например, с его помощью можно отображать картинки в заметках, если вставить такой код (https://... надо заменить на адрес необходимой картинки):

Код: Выделить всё

<img src="https://is1-ssl.mzstatic.com/image/thumb/Purple62/v4/e2/93/56/e29356f6-a7a5-0aa3-0969-1c2be8630815/AppIcon-1x_U007emarketing-85-220-0-7.png/246x0w.jpg" />

Также можно вставлять локальные картинки (перед локальным путем надо добавить file:/// и заменить все \ на /):

Код: Выделить всё

<img src="file:///C:/Users/username/Pictures/MLO/mlo_logo.jpg" />

Либо альтернативно использовать код самого Markdown:

Код: Выделить всё

![](C:\Users\username\Pictures\MLO\mlo_logo.jpg)

В первом случае картинка не отобразится, если нет подключения к Интернету, но также требует загрузку своих картинок на какой-то хостинг. Второй-третий вариант не поддерживает отображение картинки при использовании одного MLO-профайла на нескольких компах или при перемещении картинки. Но возможность использования HTML дает также возможность хранить картинку в тексте самой заметки!

Для этого необходимо саму картинку перевести в текстовый формат base64 и вставить внутрь тега img в заметках. Для этого можно:
  1. На сайте https://www.base64-image.de/ загрузить картинку и получить код base64
  2. Нажать "Show code", потом "copy to clipboard" для кода в "For use in <img> elements"
  3. В текст заметки прописать <img src="XXX" /> , где вместо XXX вставить скопированный код
  4. Все, в свойствах задачи должна появиться картинка!
MarkdownPicture.png
MarkdownPicture.png (39.63 КБ) 8605 просмотров

Важное замечание: хранение картинок в тексте заметок значительно увеличивает вес файла MLO и при злоупотреблении может повлиять на скорость работы MLO, а также создавать излишнюю нагрузку на облако. Картинка из моего примера весит дополнительных 9 КБ. Поэтому стоит (1) вставлять таким образом только небольшие картинки (например, размером с иконку) и (2) не хранить много картинок таким образом

MLO5: Markdown: Как хранить картинки в теле заметки

Добавлено: 21 апр 2018, 19:16
MrCricket
WaRoX писал(а):Источник цитаты Также можно вставлять локальные картинки (перед локальным путем надо добавить file:/// и заменить все \ на /):

<img src="file:///C:/Users/username/Pictures/MLO/mlo_logo.jpg" />


также работает с двойными обратными слэшами и без 'file:///':

Код: Выделить всё

<img src="C:/Program Files/Windows Sidebar/Gadgets/SlideShow.Gadget/images/Tulip.jpg" />

<img src="C:\\Program Files\\Windows Sidebar\\Gadgets\\SlideShow.Gadget\\images\\Tulip.jpg" />

MLO5: Markdown: Как хранить картинки в теле заметки

Добавлено: 21 апр 2018, 19:29
Franko
Познавательно. Господа, а есть ли разница, какой слэш использовать в третьем способе - прямой или обратный? На практике работают оба варианта.

MLO5: Markdown: Как хранить картинки в теле заметки

Добавлено: 23 апр 2018, 07:30
WaRoX
Franko писал(а):Источник цитаты Господа, а есть ли разница, какой слэш использовать в третьем способе - прямой или обратный? На практике работают оба варианта

Тогда, видимо, и разницы нет :) Вообще, разница в типе слэша изначально появилась из-за разных протоколов (который используется в локальной файловой системе, и который используется в веб), поэтому некоторые интерпретаторы, авторы которых специально заморочились (например, автор Markdown), могут работать одновременно с двумя вариантами.