Я только начал с Markdown. Мне это нравится, но меня беспокоит одна вещь: как я могу изменить размер изображения с помощью Markdown?
Документация дает только следующее предложение для изображения:
![drawing](drawing.jpg)
Если это возможно, я бы хотел, чтобы изображение также было отцентрировано. Я прошу об общей уценке, а не о том, как это делает GitHub.
Ответы:
В некоторых реализациях Markdown (включая Mou и Marked 2 (только macOS)) вы можете добавить
=WIDTHxHEIGHT
URL-адрес графического файла для изменения размера изображения. Не забудьте про пространство перед=
.Вы можете пропустить ВЫСОТУ
источник
title
атрибут.Вы можете просто использовать HTML в вашей Markdown:
Или через
style
атрибут ( не поддерживается GitHub )Или вы можете использовать пользовательский файл CSS, как описано в этом ответе на Markdown и выравнивание изображения
CSS в другом файле:
источник
style
не работает на большинстве веб-сайтов (например, GitHub) и будет очищено. Предпочитаюwidth
иheight
вместо этого, как упомянуто @kushdillip.max-width
вместо этого оно работало лучше, чтобы гарантировать, что изображения неПринятый ответ здесь не работает ни с одним редактором Markdown, доступным в приложениях, которые я использовал до настоящего времени, таких как Ghost, Stackedit.io или даже в редакторе Stack Overflow. Я нашел обходной путь здесь в трекере проблем StackEdit.io .
Решение состоит в том, чтобы напрямую использовать синтаксис HTML, и он отлично работает:
Надеюсь, это поможет.
источник
Просто используйте:
вместо:
источник
Если вы пишете MarkDown для PanDoc, вы можете сделать это:
Это добавляет
style="width: 50%;"
к HTML<img>
тег, или[width=0.5\textwidth]
в\includegraphics
в LaTeX.Источник: http://pandoc.org/MANUAL.html#extension-link_attributes
источник
Возможно, это недавно изменилось, но документы Kramdown показывают простое решение.
Из документов
Работает на GitHub с Джекилом и Крамдауном.
источник
{: height=36 width=36}
; это генерирует атрибуты HTML, поэтому у него не должно бытьpx
суффикса. Кроме того, вы можете использовать CSS с{: style="height:36px; width:36px"}
.![alt text](image.png){:height="36px" }
width
иheight
атрибуты включают в себя «рх» часть. Мне нужно было использовать{:height="36" width="36"}
Можно использовать
alt
атрибут, который можно установить почти во всех реализациях / рендерах Markdown вместе с CSS-селекторами на основе значений атрибутов. Преимущество состоит в том, что можно легко определить целый набор изображений разных размеров (и других атрибутов).Markdown:
CSS:
источник
Заменить
![title](image-url.type)
на<img src="https://image-url.type" width="200" height="200">
источник
Если вы используете kramdown , вы можете сделать это:
Затем добавьте это в ваш пользовательский CSS :
источник
Основываясь на ответе Tiemes, если вы используете CSS 3, вы можете использовать селектор подстроки :
Этот селектор будет сопоставлять любое изображение с тегом alt, оканчивающимся на '-fullwidth':
Тогда вы все еще можете использовать тег alt по назначению для описания изображения.
Уценка для вышеупомянутого может быть что-то вроде:
Я использовал это в Ghost Markdown, и это работало хорошо.
источник
Объединив два ответа, я нашел решение, которое может показаться не таким красивым,
но оно работает!
Он создает миниатюру с определенным размером, по которой можно щелкнуть, чтобы получить изображение с максимальным разрешением.
Вот пример! Я проверил это на Visual Code и Github.
источник
Я пришел сюда в поисках ответа. Некоторые удивительные предложения здесь. И золотая информация, указывающая на то, что уценка полностью поддерживает HTMl!
Хорошее чистое решение всегда должно идти с чистым синтаксисом HTML наверняка. С тегом.
Но я все еще пытался придерживаться синтаксиса уценки, поэтому я попытался обернуть его вокруг тега и добавил любые атрибуты, которые я хотел, для изображения внутри тега div. И это работает !!
Таким образом, внешние изображения поддерживаются!
Просто подумал, что я это изложу, поскольку это не входит ни в один из ответов. :)
источник
![chilling](link)
на<img src="link" alt="chilling">
.Для тех, кого интересует
rmarkdown
иknitr
решение. Есть несколько способов изменить размер изображения в.rmd
файле без использованияhtml
:Вы можете просто указать ширину изображения, добавив
{width=123px}
. Не вводите пробелы между скобками:Другой вариант заключается в использовании
knitr::include_graphics
:источник
{}
но не получилось. Отдельные{}
сбои тоже.{height=x width=y}
. Кажется, этот синтаксис не распознает запятые, но я мог бы указать другие атрибуты, включая элементы стиля.Я написал скрипт парсера простых тегов для использования тега img нестандартного размера в Jekyll .
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
Вы можете добавить файл в
_plugins
папку.источник
Я знаю, что этот ответ немного конкретен, но он может помочь другим нуждающимся.
Поскольку многие фотографии загружаются с помощью сервиса Imgur , вы можете использовать API, подробно здесь чтобы изменить размер фотографии.
При загрузке фотографии в комментарии к проблеме GitHub, она будет добавлена через Imgur, так что это очень поможет, если фотография очень большая.
По сути, вместо http://i.imgur.com/12345.jpg вы бы поместили http://i.imgur.com/12345m.jpg для изображения среднего размера.
источник
Вы также можете использовать это с kramdown:
или
Таким образом, вы можете напрямую добавлять произвольные атрибуты в последний элемент HTML. Для добавления классов есть ярлык .class.secondclass .
источник
Это работает для меня, это не в одной строке, но я надеюсь, что это работает для вас.
источник
Для R-Markdown ни одно из перечисленных выше решений не сработало для меня, поэтому я обратился к обычному синтаксису LaTeX , который работает просто отлично.
Затем вы можете использовать, например,
\begin{center}
заявление, чтобы центрировать изображение.источник
\centering
после\begin{figure}
или ничего, если вы используете `\ includegraphics [width = \ linewidth] {drawing.jpg}`, который, я думаю, должен быть выводом pandoc по умолчанию, по крайней мере, когда изображение шире текста.Есть способ добавить класс и стиль CSS
![pic][logo]{.classname}
затем запишите ссылку и CSS ниже
Ссылка здесь
источник
Для всех, кто ищет решения, которые работают в R уценке / уценке , эти предыдущие решения работают / не работают или нуждаются в небольшой адаптации:
За работой
Добавить
{ width=50% }
или{ width=50% height=50% }
![foo](foo.png){ width=50% }
![foo](foo.png){ width=50% height=50% }
Важно: без запятой между шириной и высотой - т.е.
{ width=50%, height=30% }
не будет работать !Append
{ height="36px" width="36px" }
![foo](foo.png){ height="36px" width="36px" }
{:height="36px" width="36px"}
с двоеточием, как в @sayth, похоже, не работает с R уценкойНе работает:
=WIDTHxHEIGHT
=WIDTHxHEIGHT
![foo](foo.png =100x20)
не=WIDTH
только![foo](foo.png =250x)
работаисточник
Если вы используете образы эталонного стиля Github :
источник
Добавление относительных измерений к исходному URL будет отображаться в большинстве средств визуализации Markdown.
Мы реализовали это в Corilla, так как я думаю, что этот шаблон соответствует ожиданиям существующих рабочих процессов, не заставляя пользователя полагаться на базовый HTML. Если ваш любимый инструмент не следует похожему шаблону, стоит запросить функцию.
Пример синтаксиса:
![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)
Пример котенка:
источник
Изменение размера вложения изображений в Markdown в ноутбуке Jupyter
Я использую
jupyter_core-4.4.0
ноутбук Jupyter.Если вы прикрепляете свои изображения, вставляя их в уценку следующим образом:
Эти
attachment
ссылки не работают:ДЕЛАЙ ЭТО . Это делает работу.
Просто добавьте скобки div.
Надеюсь это поможет!
источник
Для дальнейшего использования:
Реализация Markdown для Joplin позволяет контролировать размер импортируемых изображений следующим образом:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
Эта функция была запрошена здесь и , как обещал на Лоране это было реализовано.
Мне потребовалось некоторое время, чтобы придумать конкретный ответ Джоплина.
источник
При использовании колбы (я использую его с плоскими страницами) ... Я обнаружил, что включение явно (не было по умолчанию по какой-то причине) 'attr_list' в расширениях внутри вызова markdown делает свое дело - и тогда можно использовать атрибуты (очень полезно также для доступа к CSS - class = "my class", например ...).
FLATPAGES_HTML_RENDERER = prerender_jinja
и функция:
А потом в уценке:
источник
Для пользователей IntelliJ IDEA , пожалуйста, обратитесь к Markdown Navigator плагину .
Предварительный просмотр отображает изображения, значки, HTML и т. Д.
источник
Если изменение начальной уценки не вариант для вас, этот хак может сработать:
Я использовал это, чтобы иметь возможность изменять размеры изображений перед отправкой их по электронной почте (поскольку Outlook игнорирует любые стили CSS для изображений)
источник
Ответ Tieme является лучшим для большинства случаев.
В моем случае я использую pandoc для конвертации уценки в латекс. HTML-теги не будут работать здесь.
Мое решение состоит в том, чтобы повторно реализовать
\includegraphics
Аналогично использованию CSS после преобразования в HTML.
источник