Я только начал с Markdown. Мне это нравится, но меня беспокоит одна вещь: как я могу изменить размер изображения с помощью Markdown?
Документация дает только следующее предложение для изображения:
Если это возможно, я бы хотел, чтобы изображение также было отцентрировано. Я прошу об общей уценке, а не о том, как это делает GitHub.
В некоторых реализациях Markdown (включая Mou и Marked 2 (только macOS)) вы можете добавить =WIDTHxHEIGHT после URL-адреса графического файла, чтобы изменить размер изображения. Не забудьте про место перед =.
Вы можете пропустить ВЫСОТУ
Вы можете просто использовать HTML в вашей Markdown:
<img src="drawing.jpg" alt="drawing" width="200"/>
Или с помощью атрибута style (не поддерживается GitHub)
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
Или вы можете использовать пользовательский файл CSS, как описано в этом ответе на Markdown и выравнивание изображения
CSS в другом файле:
img[alt=drawing] { width: 200px; }
Принятый здесь ответ не работает с любым редактором Markdown, доступным в приложениях, которые я использовал до даты, таких как Ghost, Stackedit.io или даже в редакторе Stack Overflow. Я нашел обходное решение здесь, в трееере StackEdit.io.
Решение состоит в том, чтобы напрямую использовать синтаксис HTML, и он отлично работает:
<img src="http://....jpg" width="200" height="200" />
Надеюсь, это поможет.
Просто используйте:
<img src="Assets/icon.png" width="200">
вместо:
Возможно, это недавно изменилось, но Документы Kramdown показывают простое решение.
Из документов
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
Работает на github с Jekyll и Kramdown.
Если вы пишете MarkDown для PanDoc, вы можете сделать это:
{ width=50% }
Это добавляет style="width: 50%;" в тег HTML <img> или [width=0.5\textwidth] в \includegraphics в LaTeX.
Источник: http://pandoc.org/MANUAL.html#extension-link_attributes
Можно использовать атрибут alt, который может быть установлен почти во всех реализациях Markings/renderes вместе с CSS-селекторами на основе значений атрибутов. Преимущество состоит в том, что можно легко определить целый набор различных размеров изображения (и дополнительных атрибутов).
Markdown:
CSS
img[alt="minipic"] {
max-width: 20px;
display: block;
}
Если вы используете kramdown, вы можете сделать это:
{:.foo}
Затем добавьте это в ваш пользовательский CSS:
.foo {
text-align: center;
width: 100px;
}
Основываясь на Tiemes, ответьте, если вы используете CSS 3, вы можете использовать селектор подстроки:
Этот селектор будет соответствовать любому изображению с тегом alt, который заканчивается на "-fullwidth":
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
Затем вы можете использовать тег alt для предназначенной цели для описания изображения.
Отметка для вышеуказанного может быть примерно такой:
Я использую это в уклонах Ghost, и он работает хорошо.
Я пришел сюда, чтобы найти ответ. Некоторые удивительные предложения здесь. И информация о золоте, указывающая, что уценка поддерживает HTMl полностью!
Хорошее чистое решение всегда должно идти с чистым синтаксисом html. С тегом.
Но я пытался по-прежнему придерживаться синтаксиса уценки, поэтому я попробовал обернуть его вокруг тега и добавил все атрибуты, которые мне нужны для изображения внутри тега div. И это РАБОТАЕТ!!
<div style="width:50%"></div>
Таким образом, поддерживаются внешние изображения!
Просто подумал, что я поместил бы это, потому что он не отвечает ни на один из ответов.:)
Я написал простой тег парсера для использования тега img нестандартного размера в Jekyll.
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
Вы можете добавить файл в папку _plugins.
Я знаю, что этот ответ немного конкретен, но он может помочь другим нуждающимся.
Поскольку многие фотографии загружаются с помощью сервиса Imgur, вы можете использовать API, подробно описанный здесь, чтобы изменить размер фотографии.
При загрузке фотографии в комментарии к выпуску GitHub, она будет добавлена через Imgur, так что это очень поможет, если фотография очень большая.
По сути, вместо http://i.imgur.com/12345.jpg вы бы поместили http://i.imgur.com/12345m.jpg для изображения среднего размера.
Вы можете использовать этот вариант также с помощью kramdown:
markdown
{:.some-css-class style="width: 200px"}
или
markdown
{:.some-css-class width="200"}
Таким образом вы можете напрямую добавлять произвольные атрибуты к последнему элементу html. Для добавления классов существует ярлык .class.secondclass.
Для тех, rmarkdown knitr решении rmarkdown и knitr. Есть несколько способов изменить размер изображения в файле .rmd без использования html:
Вы можете просто указать ширину изображения, добавив {width=123px}. Не вводите пробелы между скобками:
{width=250px}
Другой вариант - использовать knitr::include_graphics:
'''{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
'''
![pic][logo]{.classname}
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
Для R-Markdown ни один из вышеперечисленных решений не работал у меня, поэтому я обратился к регулярному синтаксису LaTeX, который отлично работает.
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
Затем вы можете использовать, например. \begin{center} для центрирования изображения.
Добавление относительных измерений к исходному URL будет отображаться в большинстве средств визуализации Markdown.
Мы реализовали это в Corilla, так как я думаю, что этот шаблон соответствует ожиданиям существующих рабочих процессов, не заставляя пользователя полагаться на базовый HTML. Если ваш любимый инструмент не следует подобному шаблону, стоит запросить функцию.
Пример синтаксиса:
Пример котенка:
Заменить  на <img src="https://image-url.type" width="200" height="200">
При использовании Flask (я использую его с плоскими страницами)... Я обнаружил, что включение явно (по умолчанию не было по какой-то причине) "attr_list" в расширениях в вызове уценки делает трюк - и тогда можно использовать атрибуты (очень полезно также обращаться к CSS - class= "мой класс", например...).
FLATPAGES_HTML_RENDERER = prerender_jinja
и функция:
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
return pygmented_body
И затем в Markdown:
{: width=200px}
Если изменение начальной уценки не вариант для вас, этот хак может сработать:
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
Я использовал это, чтобы иметь возможность изменять размеры изображений перед отправкой их по электронной почте (так как Outlook игнорирует любые стили CSS для изображений)
Для пользователей IntelliJ IDEA, пожалуйста, обратитесь к плагину Markdown Navigator.
Предварительный просмотр отображает изображения, значки, HTML и т.д.
Я использую jupyter_core-4.4.0 & ноутбук Юпитера.
attachment не работают:<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
Просто добавьте скобки div.
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
Надеюсь, это поможет!
Для дальнейшего использования:
Реализация уценки для Joplin позволяет контролировать размер импортируемых изображений следующим образом:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
Эта функция была запрошена здесь, и, как обещал Лораном, она была реализована.
Мне потребовалось некоторое время, чтобы придумать конкретный ответ джоплина.