Я делаю сайт, который публикует статьи в выпусках каждый месяц. Это просто, и я думаю, что использование редактора Markdown (например, WMD здесь, в Stack Overflow) было бы идеально.
Однако им нужна возможность выравнивать изображения по правому краю в данном абзаце .
Я не могу найти способ сделать это с нынешней системой - это возможно?
Ответы:
Вы можете встраивать HTML в Markdown, поэтому вы можете сделать что-то вроде этого:
источник
divи добавив закрывающую косую черту кimgтегу соответственно, то есть `<img style =" float: right "src ="divя предпочитаю использоватьspanдля встроенного отступа. Для полного центрирования абзацаdivэто хорошо, или даже простоp.Я нашел хорошее решение в чистом Markdown с небольшим хаком CSS 3 :-)
Следуйте за плавающим изображением кода CSS 3 слева или справа, когда
image altзаканчивается<или>.источник
Многие «лишние» процессоры Markdown поддерживают атрибуты. Таким образом, вы можете включить имя класса следующим образом (PHP Markdown Extra):
или, альтернативно (Maruku, Kramdown , Python Markdown ):
Тогда, конечно, вы можете использовать таблицу стилей надлежащим образом:
Если ваш поддерживает этот синтаксис, он дает вам лучшее из обоих миров: нет встроенной разметки и достаточно абстрактной таблицы стилей, чтобы ее не нужно было изменять редактором контента.
источник
У меня есть альтернатива вышеописанным методам, в которых используется тег ALT и селектор CSS для тега alt ... Вместо этого добавьте URL-хэш, например, так:
Сначала код вашего Markdown изображения:
Обратите внимание на добавленный URL-хэш #center.
Теперь добавьте это правило в CSS, используя селекторы атрибутов CSS 3, чтобы выбрать изображения с определенным путем.
Вы должны быть в состоянии использовать URL-хэш, подобный этому, почти как при определении имени класса, и это не является неправильным использованием тега ALT, как некоторые люди прокомментировали для этого решения. Это также не потребует дополнительных расширений. Сделайте один для поплавка вправо и влево, а также для любых других стилей, которые вы можете захотеть.
источник
Встраивание CSS это плохо:
CSS в другом файле:
источник
if product.name == 'Tulips'), Потому что вы не можете зависеть от стабильность стоимости. Все это занимает кто - то меняетсяFlowersкFlowerи неожиданно , что изображение появляется вне поля зрения. Кроме того, они должны звонить вам каждый раз, когда они добавляют изображение!Мне нравится быть очень ленивым, используя таблицы для выравнивания изображений с
|синтаксисом вертикальной трубы ( ). Это поддерживается некоторыми разновидностями Markdown (и также поддерживается Textile, если это плавает на вашей лодке):или
Это не самое гибкое решение, но оно подходит для большинства моих простых потребностей, легко читается в формате уценки, и вам не нужно запоминать CSS или необработанный HTML.
источник
|-|-|. Он сообщает парсеру, что таблица существует, а первая строка - заголовок. Пример: goo.gl/xUCRiKЕще чище было бы просто положить
p#given img { float: right }в таблицу стилей или в<head>и завернутые вstyleтеги. Тогда просто используйте уценку.источник
Возможность атрибута
markdownвнутри Markdown.источник
Мне понравился ответ Learnvst об использовании таблиц, потому что он вполне читабелен (что является одной из целей написания Markdown).
Однако в случае анализатора Markdown в GitBook мне пришлось, в дополнение к пустой строке заголовка, добавить разделительную строку под ним, чтобы таблица была распознана и правильно отображена:
Разделительные линии должны включать не менее трех штрихов
---.источник
Если вы реализуете его в Python, есть расширение, которое позволяет добавлять пары ключ / значение HTML и метки class / id. Синтаксис для этого:
Или, если встроенный стиль не плавает на вашей лодке,
с соответствующей таблицей стилей
stylish.css:источник
Как сказал Грег вы можете встраивать HTML-контент в Markdown, но один из пунктов Markdown состоит в том, чтобы не иметь обширных (или, если на то пошло) знаний по разметке CSS / HTML, верно? Вот что я делаю:
В моем файле Markdown я просто проинструктирую все мои редакторы вики о том, чтобы встроить все изображения в нечто похожее на это:
(конечно .. они не знают что
<div>значит, но это не должно иметь значения)Итак, файл Markdown выглядит так:
И в контенте CSS, который охватывает всю страницу, я могу делать все, что захочу, с тегом image:
Конечно, вы можете сделать больше с контентом CSS ... (в данном конкретном случае, обтекание
imgтега с помощью div предотвращает наложение другого текста на изображение ... это всего лишь пример), но ИМХО смысл Markdown в том, что вы не хотите, чтобы потенциально нетехнические люди разбирались в тонкостях CSS / HTML ... вы, как веб-разработчик, должны сделать свой CSS-контент, который оборачивает страницу, как можно более универсальным и чистым, но затем опять же ваши редакторы не должны знать об этом.источник
У меня была та же задача, и я выровнял свои изображения вправо, добавив это:
Для выравнивания изображения по левому краю или по центру замените
с участием
источник
эта работа для меня
источник
Проще всего обернуть изображение в центральную метку, вот так ...
Все, что связано с Markdown, можно проверить здесь - http://daringfireball.net/projects/markdown/dingus
Конечно,
<center>может быть устаревшим, но это просто и работает!источник
center.<center>- имеет смысл. Он устарел из HTML, потому что HTML должен описывать только контент; стили должны быть в таблицах стилей. Однако у Markdown другое назначение: включить достаточно стилей, необходимых для передачи текстового сообщения, а остальное оставить на усмотрение средства визуализации / сайта.<center>кажется гораздо более естественным, чем думать о CSSwidths,floats,margins ... - Я бы даже пошел так далеко, что парсер Markdown заменил<center>теги соответствующими элементами на основе CSS, очень похоже на то, как он в настоящее время разумно вычисляет абзацы.