Я делаю сайт, который публикует статьи в выпусках каждый месяц. Это просто, и я думаю, что использование редактора Markdown (например, WMD здесь, в Stack Overflow) было бы идеально.
Однако им нужна возможность выравнивать изображения по правому краю в данном абзаце.
Я не могу найти способ сделать это с нынешней системой - это возможно?
Вы можете вставлять HTML в Markdown, так что вы можете сделать что-то вроде этого:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Многие "дополнительные" процессоры Markdown поддерживают атрибуты. Таким образом, вы можете включить имя класса так (PHP Markdown Extra):
{.callout}
или, альтернативно (Maruku, Kramdown, Python Markdown):
{: .callout}
Тогда, конечно, вы можете использовать таблицу стилей надлежащим образом:
.callout {
float: right;
}
Если ваш синтаксис поддерживает этот синтаксис, он дает вам лучшее из обоих миров: нет встроенной разметки и абстрактной таблицы стилей, которая не нуждается в изменении вашего редактора содержимого.
Я нашел хорошее решение в чистом Markdown с небольшим хаком CSS 3 :-)
Следуйте за плавающим изображением кода CSS 3 слева или справа, когда image alt заканчивается на < или >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Вложение CSS плохое:
CSS в другом файле:
img[alt=Flowers] { float: right; }
Мне нравится быть очень ленивым, используя таблицы для выравнивания изображений с синтаксисом вертикальной трубы (|). Это поддерживается некоторыми разновидностями Markdown (и также поддерживается Textile, если это плавает на вашей лодке):
| I am text to the left |  |
или же
|  | I am text to the right |
Это не самое гибкое решение, но оно подходит для большинства моих простых потребностей, легко читается в формате уценки, и вам не нужно запоминать CSS или необработанный HTML.
У меня есть альтернатива вышеописанным методам, в которых используется тег ALT и селектор CSS для тега alt... Вместо этого добавьте URL-хэш, например, так:
Сначала ваш код изображения Markdown:
Обратите внимание на добавленный URL-хэш #center.
Теперь добавьте это правило в CSS, используя селекторы атрибутов CSS 3, чтобы выбрать изображения с определенным путем.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Вы должны быть в состоянии использовать URL-хэш, подобный этому, почти как при определении имени класса, и это не является неправильным использованием тега ALT, как некоторые люди прокомментировали для этого решения. Это также не потребует каких-либо дополнительных расширений. Сделайте один для поплавка вправо и влево, а также для любых других стилей, которые вы можете захотеть.
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Возможность markdown атрибута внутри markdown.
Даже чистым было бы просто поместить p#given img { float: right } в таблицу стилей или в <head> и обернуто тегами style. Затем просто используйте отметку .
Если вы реализуете его в Python, есть расширение, которое позволяет вам добавлять пары ключ/значение HTML и метки class/id. Синтаксис для этого:
{: style="float:right"}
Или, если встроенный стиль не плавает на вашей лодке,
{: .floatright}
с соответствующей stylish.css стилей stylish.css:
.floatright {
float: right;
/* etc. */
}
Мне понравилось answervst answer использование таблиц, потому что оно вполне читаемо (что является одной из целей написания Markdown).
Однако в случае анализатора GitBook Markdown мне пришлось, помимо пустой строки заголовка, добавить под ним строку разделителя, чтобы таблица была распознана и правильно отображена:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Строки разделителя должны содержать не менее трех дефис ---.
Как сказал Грег, вы можете встраивать HTML-контент в Markdown, но один из пунктов Markdown - избегать обширных (или, если на то пошло) знаний по разметке CSS/HTML, верно? Вот что я делаю:
В моем файле Markdown я просто приказываю всем моим редакторам вики вставлять, чтобы обернуть все изображения чем-то вроде этого:
'<div> // Put image here </div>'
(конечно.. они не знают, что означает <div>, но это не должно иметь значения)
Итак, файл Markdown выглядит так:
<div>
![optional image description][1]
</div>
[1]: /image/path
И в контенте CSS, который охватывает всю страницу, я могу делать с тегом image все, что захочу:
img {
float: right;
}
Конечно, вы можете сделать больше с контентом CSS... (в данном конкретном случае обертка тега img с помощью div предотвращает наложение другого текста на изображение... это всего лишь пример), но ИМХО смысл Отмечаем, что вы не хотите, чтобы потенциально нетехнические люди разбирались в тонкостях CSS/HTML... вам, как веб-разработчику, нужно сделать свой CSS-контент, который оборачивает страницу, настолько универсальным и чистым, насколько это возможно, но опять же, ваши редакторы не должны знать об этом.
У меня была та же задача, и я выровнял свои изображения вправо, добавив это:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Для выравнивания изображения по левому краю или по центру замените
<div style="text-align: right">
с
<div style="text-align: center">
<div style="text-align: left">
Простейшим является обернуть изображение в центральном теге, например...
<center></center>
Все, что связано с Markdown, можно протестировать здесь - http://daringfireball.net/projects/markdown/dingus
Конечно, <center> может быть устаревшим, но он прост и работает!