Как стилизовать картинку в Markdown
CSS markdown

Как стилизовать картинку в Markdown

Как стилизовать картинку в Markdown? То есть все мы знаем, что как можно вставить картинку в markdown код, чтобы она потом вывелась в HTML.

![alt text](/src/of/image.jpg «title»)

Всё просто – alt текст, ссылка на картинку, заголовок картинки.

Но что, если нам нужно отцентровать картинку по центру, или по правому краю? Или вообще добавить на картинку фильтры и сделать изображение черно-белым?

Ведь в Markdown нельзя просто взять и добавить атрибут стиля и класс элемента. Поэтому нужно что-то выдумывать, ведь сам по себе маркдаун – отличная штуковина – простая, удобная, не позволяет что-то накосячить и испортить вёрстку. Но в тоже время, из-за того, что он не позволяет внедрить свои дополнения, в некоторых случаях – недостаточно гибкая, и вызывает отторжение из-за того, что не получается сделать какую-то простую надстройку прямо внутри контента.

Итак, давайте смоделируем ситуацию: нужно добавить возможность в маркдаун выравнивать картинки по левому краю и по правому краю. Ясное дело, что класс мы не можем добавить. Но в любом случае понятно, что удобнее это делать на CSS. Так как же тогда быть, есть стиль и классы добавить нельзя?

Тут есть хитрость. Ведь никто не запрещает добавить в ссылку картинки хеш и параметр, она по прежнему будет срабатывать и загружаться, при этому в CSS мы уже сможем сделать селектор по ссылкам картинок, у которых есть нужный хеш-параметр.

Итак, для выравнивания по левому краю:

![alt text](/src/of/image.jpg#alignleft «title»)

… по правому краю

![alt text](/src/of/image.jpg#alignright «title»)

С маркдауном всё. Теперь сделаем селекторы на CSS:

img[src*=»#alignleft»] { float: left; }

img[src*=»#alignright»] { float: right; }

Как видите, всё принципиально просто – мы делаем выборку картинок, которые в ссылке имеют нужные нам хэш-параметры. Это здорово, и не потребует разработки дополнительных параметров маркдаун разметки.

На этом всё. Ну а если у вас медленно работает компьютер, и при этому вы даже представить не можете в чем может быть проблема, то тогда на помощь прийдет компьютерный мастер на дом – проверенные специалисты, быстро и качественно.


Также рекомендуем: