Ссылка с картинкой html: Как сделать картинку ссылкой и убрать рамку

Содержание

Как сделать картинку ссылкой в html

HTML: Как сделать картинку ссылкой

Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные картинки, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместить тег <img>, который указывает путь к изображению:

Убираем рамку

При использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border со значением none.

Чтобы убрать рамку у картинки ссылки, можно прописать свойство border в атрибут style:

Этот способ подойдёт когда картинка ссылка всего одна. Но если у вас много таких ссылок, то лучше прописать стиль сразу ко всем картинкам, которые вложены в тег <a>, сделать это можно так:

Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.

Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS

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

Содержание

Изображения часто применяются в качестве кнопок заказа на коммерческих ресурсах, эта же модель применена в рекламных баннерах, другие примеры вы встречали в интернете сами множество раз.

Я расскажу о том, как сделать изображение ссылкой на основе традиционного HTML кода и альтернативной CSS вариации. Также, мы коснемся превращения картинки в ссылку для социальной сети Вконтакте (там все не так просто). И в завершающей части статьи я расскажу о форумах, там нередко используется кодировка отличная от HTML и вставка изображений и ссылок там происходит иначе.

Как сделать картинку ссылкой в HTML

Для формирования ссылок в HTML используется простой механизм. Существует специальный тег <a></a>, обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега <a> является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести.

Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега <img> с атрибутом src, указывающим путь к изображению.

Результирующий код для вставки изображения-ссылки выглядит вот так:

По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.

Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.

Для тега <a> часто применяется атрибут target=&#8221;_blank&#8221;, открывающий ссылку в новой вкладке.

А тег <img> часто содержит alt=&#8221;альтернативный текст, показываемый, если картинка не загрузилась&#8221;, title=&#8221;название изображения&#8221;, height=&#8221;указывается высота в пикселях&#8221;, width=&#8221;указывается ширина в пикселях&#8221;.

Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):

А вот так он работает:

Картинка-ссылка на CSS

Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.

Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:

1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).

Общий код выглядит вот так:

В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).

2. Вставляем в нужное место сайта html ссылку с атрибутом, указывающим, что она относится к классу link-img. Для этого используется тот же тег <a>, что и в предыдущем варианте. Код выглядит вот так:

id=&#8221;link-img&#8221; показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект <a> принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.

Как картинку сделать ссылкой Вконтакте

В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.

Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.

Шаг 1. Готовим картинку

В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.

Поддерживаемые форматы – jpg, gif и png.

Шаг 2. Вставляем ссылку в ВК

Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).

Шаг 3. Вставляем изображение

Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.

Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).

Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.

После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».

После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.

Как сделать картинку ссылкой на форуме

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

Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.

Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.

Изображение в BB-коде указывается вот так:

Указывается ссылка на картинку.

А ссылки формируются тегами [url] [/url]. И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:

Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.

Визуальные редакторы

Используя различные графические конструкторы сайтов и страниц реализовать все, что описано выше, проще и быстрее, достаточно нажать пару кнопок. И в WordPress, и в HTML редакторах, и на форумах принцип действие одинаков, схожи и кнопки.

Для того, чтобы сделать изображение ссылкой в графическом интерфейсе необходимо выполнить 2 действия:

1. Вставить изображение, вот такими кнопками (пример с форумом был выше, тут я показываю WordPress):

Там надо будет либо добавить ссылку на картинку в интернете или загрузить с компьютера (возможность загрузки есть не всегда).

2. Выделить вставленное изображение мышью (кликнуть на него), после чего нажать кнопку похожую на цепочку и вставить адрес страницы, на которую должна ссылаться картинка.

На этом все. Желаю удачи. Не забывайте оформить подписку на новые статьи.

Как сделать картинку ссылкой в html два простых способа.

В веб можно условно разделить ссылки на два типа, это текстовые и графические. В этой статье мы разберем как сделать картинку ссылкой в html с помощью обычного изображения, а так же в том случае если картинка в элементе будет в качестве фона.

Как сделать картинку ссылкой в html

Обычно картинка отображается с помощью тега img , что бы вставить картинку нужно добавить следующий код:

Тег img только отображает изображение, он не может ссылаться ни на что. Что бы сделать его ссылкой нам необходимо обернуть тег img тегом a . Ссылка вставляется следующим образом:

Теперь сложите это все и вы получите следующее:

Фоновая картинка как ссылка в html

Есть ситуации когда картинка вставляется на страницу не с помощью html тега img , а с помощью css свойства background или background-image . Пользователь визуально может и не отличить как именно была добавлена картинка, но браузер увидит разницу. В таком случае мы тоже можем сделать изображение ссылкой. Давайте рассмотрим пример как это сделать.

Для начала нужно добавить на страницу div в див добавить элемент a , этим тегам добавим классы для более удобной стилизации.

Далее добавляем фоновое изображение, в css пишем классу .box-image привила:

Картинку мы вставили с помощью background-image, а position: relative; добавили что бы ссылку растянуть на всю ширину и высоту блока.

Таким способом мы имитировали типичное поведение ссылки в которой есть изображение. Если у вас остались вопросы как сделать картинку ссылкой, после наших примеров, вы можете задать их в комментариях.

Ссылки со стрелкой как на WikiPedia или с любой картинкой в конце

В данной статье рассказано, каким образом отображать автоматически рядом с ссылкой в статье любую картинку, как это сделано на WikiPedia.org (блоки в конце любой статьи).

Для реализации задуманного понадобится небольшая правка файла стилей. В зависимости от движка сайта, место редактирования будет отличаться.

Прежде всего покажу что примерно мы будем делать, если еще не поняли:

В блоке Примечание стрелки в конце ссылки. Сделаем аналогичное.

Подобные «украшательства» позволят привлечь внимание посетителя странички к нужным ссылкам по сайту, что позволяет улучшить «Поведенческий фактор» сайта в целом.

Как сделать ссылки со стрелками

Для начала сделаем заготовку подобной стрелки-картинки и закидываем нужного размера на хостинг. Размер примерно 16*16px. Если лень искать — качайте эту .

Далее необходимо определиться: ставить подобную стрелку будем по всему сайту, т.е. на каждой ссылке, или только на определенном блоке статьи. В любом случае понадобится определиться с названием класса куда будем подставлять нужный параметр CSS (об этом ниже).

Теперь предлагаю посмотреть видео-подкаст, в котором рассказано как определить имя класс стилей. Видео записано для другой статьи, но принцип тот же:

Скачать FireBug для своего браузера можно на официальной странице getfirebug.com.

Определились с именем класса и делаем вставку в файл стилей, который имеет расширение .css

.postssylka p a {
background: url("images/external.png") no-repeat scroll right center transparent;
padding: 0 20px 0 0;}

Настройки CSS проведены так, что если в теле статьи идет ссылка, то со смещением направо проставляется картинка external.png. Атрибуту background задано соответственно: путь до картинки, нет повтора, прокрутка вместе с фоном, выравнивание направо по центру и с прозрачным фоном. Не обязательно выставлять все эти параметры и в такой последовательности. Все зависит от дизайна сайта и ваших пожеланий.

Подробнее об атрибуте background читайте в качественном справочнике http://htmlbook.ru/css/background. Обратите внимание, что слева в справочнике еть другие пункты по теме.

Параметр padding сделал нужный отступ стрелки-картинки от текста: верх справа снизу слева. Сделать это нужно обязательно, т.к. картинка у нас идет задним фоном.

Пробуйте. Экспериментируйте. Если сразу не получилось, то могли напутать с названием класса, либо иерархией. Долгое время на данном сайте стояла подобная картинка, поэтому все работает. Я снял, т.к. сайт меняет понемногу дизайн на кардинально новый.http://blogun.ru/taskbbhbacg.html

Как картинку сделать ссылкой? | Создание, настройка и продвижение сайтов.

Приветствую, друзья. Сегодня на Sdelaemblog.ru поговорим, о довольно простом, но в то же время популярном вопросе.

Как картинку сделать ссылкой? Бывает, возникает потребность добавить ссылку в структуру сайта, на какой-либо ресурс не в виде текстовой ссылки, а в виде изображения. Что довольно логично, так как ссылка в виде картинке выглядит более привлекательно, нежели простая текстовая ссылка. И, кроме того, она заметна посетителю гораздо лучше.

Вопрос, на самом деле довольно простой, однако не у всех получается его решить. В качестве примера, предлагаю взять любое изображение в сети интернет и конвертировать его в ссылку на какой-либо ресурс. Я, для примера, добавлю ссылку на социальную сеть вконтакте в данную статью. А для оформления внешнего вида ссылки, воспользуюсь, логотипом вконтакте.

Итак, для осуществления задуманного необходимо найти или нарисовать картинку, которая впоследствии станет ссылкой. И немного разобраться, как вывести картинку, с помощью html. А так же, как сделать так, чтобы картинка стала ссылкой, полностью кликабельной и рабочей.

HTML — код картинки.

Для вывода изображения в html-коде, можно воспользоваться предназначенным для этого тегом img. В зависимости от синтаксиса нашего кода, вывод изображения может выглядеть по-разному. Например, при использовании синтаксиса HTML, код будет выглядеть так:

<img src="URL" alt="альтернативный текст">

А при использовании синтаксиса XHTML — так:

<img src="URL" alt="альтернативный текст" />

О синтаксисе, написано подробнее в статье о DOCTYPE.

Немного подробнее о коде:

src=»URL» — Вместо URL необходимо прописать путь до картинки, которую мы будем конвертировать в ссылку.

alt=»альтернативный текст» — предназначен, для вывода текстовой информации о картинке, при отключенном в браузере показе изображений.

Кроме того, у тега img есть другие атрибуты. Основные из них:

height — высота изображения

width — ширина картинки

Это только часть атрибутов, применяемых к изображениям. Но на данном этапе нам вполне достаточно. Все данные атрибуты могут назначаться, как в html коде, так и в стилях css.

HTML — код ссылки.

Для создания ссылки, нужно использовать тег а. Данный тег имеет, как открывающий тег а, так и закрывающий. HTML — код ссылки выглядит следующим образом:

<a href="URL">Анкор (текст ссылки)</a>

Пояснения к коду:

href — атрибут href задает адрес ссылки, по которой должен быть осуществлен переход.

URL — ссылка на документ.

Анкор (текст ссылки) — Выводится в документе в виде текста ссылки.

У тега а, также есть и другие атрибуты, но на данном этапе нам могут быть интересны только пару из них:

title — заголовок ссылки. Добавляет всплывающий текст (подсказку), которая отображается, при наведении на анкор ссылки.

target — предназначен, для определения, в каком окне браузера будет открываться документ по текущей ссылке. Например, документ будет открываться в текущем окне (по умолчанию) или в новом окне.

Как картинку сделать ссылкой?

Итак, теперь мы знаем, что картинка — ссылкой, состоит из двух частей кода. Остается только их объединить воедино. Как я уже говорил выше, я буду использовать логотип социальной сети вконтакте, для вывода картинки и поставлю ссылку на свою группу вкоктакте, в которой, используя атрибут target задам открытие ссылки в новом окне.

Для начала, необходимо загрузить картинку на сервер, который мы используем или же скопировать ссылку на изображение в сети интернет. Я предпочитаю использовать свой сервер, для отображения картинок.

<img src="/wp-content/uploads/2013/06/logo_vkontakte.png" alt="Ссылка картинка на группу вконтакте">

Сразу хочу оговориться, что я загрузил картинку в библиотеку wordpress, то есть в медиафайлы. Так как я просто добавлю ссылку-картинку в статью. Но при оформлении дизайна сайта и добавления различных элементов на сайт, правильнее загружать изображения с помощью ftp-клиента в предназначенную для этого папку. В wordpress чаще всего папка находится в папке с темой и называется images или img.

Вот так будет это выглядеть:

Как  мы можем видеть получилось, мягко говоря, не очень. Улучшить внешний вид и расположение нам помогут атрибуты, для img. А также я добавил параграф, которому присвоил атрибут выравнивания текста по середине. А значит текст и другие элементы, которые находятся между тегами p, будут выравниваться.

<p><img alt="Ссылка картинка на группу вконтакте" src="/wp-content/uploads/2013/06/logo_vkontakte.png"></p>

Немного подробнее о теге p:

Он предназначен для определения текстового абзаца. Имеет открывающий и закрывающий теги.

style — атрибут определяет стили элемента, используя правила CSS.

text-align: center; — Правило CSS. Определяет горизонтальное выравнивание элемента (тега p и всех элементов внутри). В данном случае элемент выравнивается по центру.

Итак, с картинкой разобрались. Но она до сих пор не стала ссылкой.

Для создания ссылки из картинки достаточно обернуть предыдущий код тегами а. Чтобы HTML-код выглядел так:

<a title="Ссылка на группу" href="http://vk.com/clubsdelaemblog" target="_blank"><p><img alt="Ссылка картинка на группу вконтакте" src="/wp-content/uploads/2013/06/logo_vkontakte.png"></p></a>

 

 

На этом, в принципе все. На первый взгляд может показаться немного сложным. Но на деле все просто, главное внимательно прочитать все, что написано. И естественно обязательно нужно попробовать сделать ссылку картинкой самому. Практика лучше всего помогает понять все, что не понятно в теории, а также так намного лучше запоминать, что нужно делать.

Удачи!

Смена изображения при клике по ссылке

124

454

Для того чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.

Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.


Для получения такого эффекта «смены» изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:

JavaScript код:

<script type="text/javascript">
function l_image (a) {
    document.example_img.src = a;
}
</script>

В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:

HTML код:

<table style="width: 100%;">
<tr style="text-align: center; vertical-align: center;">
 <td style="width: 50%;">
  <a href="javascript:l_image('image/img_1.png')">Ссылка на изображение № 1</a><br>
  <a href="javascript:l_image('image/img_2.png')">Ссылка на изображение № 2</a><br>
  <a href="javascript:l_image('image/img_3.png')">Ссылка на изображение № 3</a><br>
  <a href="javascript:l_image('image/img_4.png')">Ссылка на изображение № 4</a><br>
 </td>
 <td style="width: 50%;">
  <img src="image/img_1.png" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений">
 </td>
</tr>
</table>

Данный пример поможет Вам избежать переизбытка изображений на одной страничке сайта и улучшит общую читабельность.

Дата создания: 14:24:56 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 60923 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

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

HTML-карта, CSS-карта, HTML Image Map Creator

Создать HTML-карту

HTML-карты изображений — один из лучших способов добавить несколько ссылок к одному изображению. Карты HTML полностью поддерживаются всеми браузерами. Ниже вы можете найти бесплатный инструмент, который позволит вам создать HTML-карту самым простым способом — просто нарисуйте области и дайте им ссылки, альтернативные варианты и цели. Система сгенерирует для вас HTML-карту с кодом . Создать HTML-карту очень просто! Просто следуйте инструкциям ниже.

Сначала укажите изображение, которое вы хотите сопоставить:


Готово! Скопируйте один из приведенных ниже кодов и вставьте его на свою HTML-страницу:


 

HTML-код карты

Код карты CSS

Что такое карты HTML?

HTML-тег был создан для того, чтобы упростить установку нескольких ссылок на одно изображение.Вместо того, чтобы разрезать изображение на части и добавлять тег привязки () к каждой из них — все, что вам нужно сделать, это создать тег и соединить его с соответствующим изображением на вашей HTML-странице.

Элемент HTML-карты имеет только один обязательный атрибут: «имя», которое позже используется для соединения тега с правым элементом .

Области внутри карты HTML

Способ указания ссылок внутри карты HTML заключается в вложении тегов в соответствующую карту.
Тег имеет несколько важных атрибутов:

  • shape : устанавливает форму области, на которую мы хотим добавить ссылку. Атрибут формы может быть одним из следующих:
    1. «rect» — для прямоугольной области ссылок (наиболее часто).
    2. «круг» — для области круговой ссылки.
    3. «poly» — для пользовательской полигональной области связи.
  • coords : устанавливает координаты области ссылки.
  • href : указывает URL-адрес для ссылки.
  • alt : указывает альтернативный текст.
  • цель : указывает целевое окно ссылки.

Ищете привлекательный сайт?
Попробуйте адаптивный конструктор сайтов Simbla.

Как создать карту изображения HTML?

Чтобы создать карту HTML-изображений , вы должны указать свои области по их относительным координатам в пикселях.Иногда это может быть очень мучительной процедурой, поскольку для каждой области требуется как минимум две координаты (x, y). Это означает, что для 5 областей на вашей HTML-карте вам придется измерить не менее 10 различных точек на изображении и ввести их все. в. Карта HTML предлагает вам этот бесплатный онлайн-инструмент для простого создания этих областей — просто перетащите области ссылок, и создатель карты HTML автоматически сгенерирует весь код, включая измерение всех координат для вас.

Попробуйте этот классный 3D-решатель кубика Рубика.

Найдите друзей PokemonGO!

Услуги Flickr

URL-адреса фотоизображений

Вы можете создать исходный URL-адрес фотографии, если знаете ее идентификатор, идентификатор сервера и секрет, возвращаемые многими методами API.

URL-адрес имеет следующий формат:

#
# Типичное использование
#

https://live.staticflickr.com/{id-сервера}/{id}_{секрет}_{суффикс-размера}.jpg

#
# Уникальный формат URL для размера 500px
#

https://live.staticflickr.com/{идентификатор_сервера}/{идентификатор}_{секрет}.jpg

#
# Оригиналы могут иметь другое расширение формата файла
#

https://live.staticflickr.com/{id-сервера}/{id}_{o-secret}_o.{o-format}

#
# Пример
# идентификатор сервера: 7372
# фото-id: 12502775644
# секрет: acfd415fa7
# размер: ш
#

https://live.staticflickr.com/7372/12502775644_acfd415fa7_w.jpg

 

Суффиксы размера

Различные размеры, предлагаемые на Flickr, имеют следующие буквенные суффиксы:

6
Суффикс Класс Самый длинный край (пкс) Примечания
с миниатюрами 75 обрезанного квадрат
кв миниатюрами 150 обрезанной площадь
т миниатюрами 100
м небольшие 240
л малые 320
ж малые 400
(нет) средних 500
г Средняя 640 640 640020
C Medium 80022 800
B
Большой 1024
H Большой 1600 имеет уникальный секрет; владелец фото может ограничить
k большое 2048 имеет уникальный секрет; владелец фотографии может ограничить
3k очень большой 3072 имеет уникальный секрет; владелец фотографии может ограничить
4k очень большой 4096 имеет уникальный секрет; владелец фотографии может ограничить
f очень большой 4096 имеет уникальный секрет; владелец фотографии может ограничить; существует только для фотографий с соотношением сторон 2:1. владелец фотографии может ограничить
6k очень большой 6144 имеет уникальный секрет; владелец фотографии может ограничить
o оригинал произвольно имеет уникальный секрет; владелец фотографии может ограничить; файлы имеют полные данные EXIF; файлы могут не вращаться; файлы могут использовать произвольное расширение файла

Секреты

Все URL-адреса фотоизображений используют секретное значение, предоставляемое методами API.Все размеры ниже размера H (1600) используют один общий секрет. Все размеры выше, включая размер H (1600), используют уникальный секрет только для себя. Исходный размер, вне зависимости от габаритов, всегда использует свой секрет.

Еще несколько замечаний об оригиналах

Исходный размер ведет себя немного иначе, чем другие размеры. У них есть свой секрет (в ответах он называется originalsecret ) и переменное расширение файла (в ответах он называется originalformat ).Эти значения возвращаются через API только в том случае, если у вызывающей стороны есть разрешение на просмотр исходного размера (на основе предпочтений пользователя и различных других критериев). Значения возвращаются методом flickr.photos.getInfo и любым методом, который возвращает список фотографий и допускает параметр extras (со значением original_format ), например flickr.photos.search. Метод flickr.photos.getSizes, как всегда, вернет полный исходный URL-адрес, если позволяют разрешения.

Кроме того, поскольку исходные файлы — это файлы, загруженные на Flickr, они могут иметь дополнительные EXIF, XMP и т. д.встроенные в них метаданные. Сюда могут входить данные поворота, что может привести к отображению изображения в неожиданной ориентации. Метаданные также могут включать конфиденциальную информацию, например географические данные. Помня об этих деталях, важно предоставлять доступ к исходным файлам только тогда, когда вы знаете, что это безопасно и необходимо.

Размеры изображения

Определенный размер будет существовать по одной из трех причин:

  1. Это один из следующих размеров, которые всегда существуют: s , q , t , o (в зависимости от первоначальной загрузки).
  2. Размер меньше оригинала (при условии максимального разрешения).
  3. Это больше, чем оригинал, и оригинал находится в пределах определенного количества пикселей по размеру.
    • Этот случай немного забавный, и над ним стоит подумать. Например, это означает, что если вы загрузите оригинал размером 1000 × 1000, он будет иметь размер 1024, даже если он меньше, чем обычно. Размеры этого размера будут 1000 × 1000, и API правильно сообщит размеры как таковые.Сколько пикселей пространства для маневра имеет каждый размер, варьируется, но обычно это «половина количества пикселей между этим размером и следующим меньшим размером».

Устаревшие URL-адреса

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

URL-адреса веб-страниц

URL-адреса страниц с фотографиями и профилями используют либо NSID пользователя (число со знаком «@»), либо его собственный URL-адрес (если он выбран).Вы можете найти их собственный URL-адрес с помощью вызова flickr.people.getInfo. Версия URL-адреса NSID будет работать всегда, независимо от того, настроили ли они «красивый» URL-адрес, поэтому вы можете избежать вызова API, просто используя идентификатор пользователя, возвращаемый большинством вызовов API фотографий.

Затем вы можете легко создавать URL-адреса для профилей, фотопотоков, отдельных фотографий или альбомов:

https://www.flickr.com/people/{user-id}/ - профиль
https://www.flickr.com/photos/{user-id}/ - фотопоток
https://www.flickr.com/photos/{user-id}/{photo-id} — отдельные фотографии
https://www.flickr.com/photos/{user-id}/albums/ - все альбомы
https://www.flickr.com/photos/{user-id}/albums/{album-id} - отдельный альбом
 

Другие URL-адреса могут быть построены аналогичным образом. Направление пользователя на https://www.flickr.com/photos/me/* или https://www.flickr.com/people/me/* заменит « me » собственным идентификатор пользователя, если они вошли в систему (в противном случае он будет перенаправлен на страницу с последними фотографиями).

Примеры

Risk legacy campaign completed
iamcal.com tag graph.
https://www.flickr.com/photos/[email protected]/albums/
Laura / Helvetica Neue
 

Короткие URL-адреса

Flickr предоставляет службу сокращения URL-адресов для загруженных фотографий (и видео). Короткие URL-адреса могут быть полезны в различных контекстах, включая электронную почту, визитные карточки, мгновенные сообщения, текстовые сообщения или краткие обновления статуса.

Каждая фотография на Flickr имеет математически рассчитанный короткий URL вида:

https://flic.kr/p/{base58-photo-id}
 

Base58 используется для сжатия фотоидентификаторов с использованием сочетания букв и цифр. Дополнительную информацию о base58 и примеры кода можно найти в группе Flickr API.

Получите бесплатные иконки, написав URL

Использование

Вставьте тег непосредственно в ваш HTML. Icons8 найдет соответствующий значок и сгенерирует его в правильный фасон, размер и цвет.

Он находит значок поиска в нашем самом популярном стиле с разрешением по умолчанию для этого стиля (50 пикселей). и черный цвет.

Для имен значков, состоящих из двух и более слов, используйте — или _ для разделения. Например: стрелка влево.

Чтобы узнать, что у нас есть, попробуйте выполнить поиск в нашем веб-приложении или загрузите наши приложения для Mac и Windows — это бесплатно, удобно и работает в автономном режиме.

Цвет

Значок изменен на #2266EE. Цветные значки не могут быть перекрашен.

Стиль

Значок поиска в стиле Windows 10. Другие стили являются:

Проверьте все стили в нашем веб-приложении.

Размер

Иконка изменена на 96x96px.Выберите любое значение до 512. Каждый стиль имеет размер, для которого он предназначен, а также называется пикселей идеального размера :

  • iOS: 50×50
  • Windows 8: 26×26
  • Windows 10: 32×32
  • Android 4: 24×24
  • Android 5: 24×24
  • Цвет: 48×48
  • Офис: 16×16, 30×30, 40×40, 80×80

Когда это возможно, используйте умножение стиля pixel perfect.Например, для iOS используйте 50 x 50, 100 x 100, 150х150 и т.д.

Лицензия

Иконки создаются Icons8. Пожалуйста, либо дайте ссылку, либо купите.

Кредиты

  • Вдохновленный микроиконой Брента Джексона. Брент, твоя идея классно.
  • Ускорено CDN77 и замечательными людьми, работающими там.

Помогите нам

  • Станьте нашим спонсором для серверов Linux или Windows
  • Напишите плагин для вашей IDE (мы предоставим API)
  • Напишите плагин для webpack и gulp для загрузки вставленных значков и их локального хранения
  • Помогать другим разработчикам? Используйте омг! в коде, ответы Stack Overflow, и учебники
  • Обучение? Покажи боже мой! в своем курсе и сэкономьте своим студентам несколько месяцев жизнь
  • Купите нашу платную лицензию.
Сообщество уже здесь

Больше бесплатных вещей

  • Загрузите все 100 000+ значков для автономного использования
  • Line Awesome — похоже на Font Awesome, но в виде контура. стиль

Формат изображения для Интернета  | Интернет | Разработчики Google

WebP — это современный формат изображения , который обеспечивает превосходное качество без потерь и сжатие с потерями для изображений в Интернете.Использование WebP, веб-мастеров и веб-сайтов разработчики могут создавать меньшие, более насыщенные изображения, которые делают Интернет быстрее.

изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG. WebP изображения с потерями на 25-34% меньше, чем сопоставимые изображения JPEG при эквивалентном Индекс качества SSIM.

Lossless WebP поддерживает прозрачность (также известную как альфа-канал) на стоимость всего 22% дополнительных байтов. Для случаев, когда сжатие RGB с потерями приемлемо, WebP с потерями также поддерживает прозрачность , обычно предоставляя Размер файлов в 3 раза меньше по сравнению с PNG.

Как работает WebP

Сжатие WebP с потерями использует предиктивное кодирование для кодирования изображения, то же самое метод, используемый видеокодеком VP8 для сжатия ключевых кадров в видео. Предиктивный кодирование использует значения в соседних блоках пикселей для предсказания значений в блоке, а затем кодирует только разницу.

Сжатие WebP без потерь использует уже просмотренные фрагменты изображения, чтобы точно восстановить новые пиксели. Он также может использовать локальную палитру, если нет найдено интересное совпадение.

Файл WebP состоит из данных изображения VP8 или VP8L и контейнера на основе РИФ. Автономная библиотека libwebp служит справочным материалом. реализация для спецификации WebP и доступна по адресу наш репозиторий git или в виде архива.

Поддержка WebP

WebP изначально поддерживается в Google Chrome, Safari, Firefox, Edge, Opera браузер и многие другие инструменты и программные библиотеки. У разработчиков есть также добавлена ​​поддержка различных инструментов редактирования изображений.

WebP включает облегченную библиотеку кодирования и декодирования libwebp и инструменты командной строки cwebp и dwebp для преобразования изображения в формате WebP и из него, а также инструменты для просмотра, мультиплексирования и анимация изображений WebP. Полный исходный код доступен на страница загрузки.

Конвертер WebP Скачать

Преобразуйте свою любимую коллекцию из PNG и JPEG в WebP, загрузив предварительно скомпилированный инструмент преобразования cwebp для Linux, Windows или macOS.

Расскажите нам о своем опыте участия в списке рассылки проекта.

Руководство по описанию изображений — DIAGRAM Center

Введение | Начало работы | Содержание | Заявление об авторских правах | Скачать документ Microsoft Word

Это руководство по описанию изображений было разработано Национальным центром семьи Карла и Рут Шапиро по доступным медиа в WGBH (NCAM) совместно с DIAGRAM Center ( D igital I mage A nd G raphic R esources). для A доступных M материалов) в Benetech.Центр DIAGRAM — это центр исследований и разработок, цель которого — упростить, удешевить и ускорить создание и использование доступных цифровых изображений. Центр DIAGRAM, основанный в 2010 году, представляет собой инициативу Benetech Global Literacy, поддерживаемую Управлением специальных образовательных программ Министерства образования США. Благодаря серии грантов, финансируемых Национальным научным фондом и Министерством образования США, NCAM занимается исследованием и разработкой методов создания эффективных и действенных текстовых альтернатив изображениям, чтобы дети и взрослые, студенты и специалисты, слепые или слабовидящие зрение может иметь равный доступ к богатым изображениями цифровым текстам.Начиная с 2004 года, в рамках гранта Национального научного фонда, NCAM начала исследования по совершенствованию подходов к описанию изображений, встречающихся в текстах по науке, технологиям, инженерии и математике (STEM). NCAM и ее партнеры по проекту рассмотрели сотни описаний и многочисленные типы изображений, в конечном итоге сузив свое внимание до наиболее часто используемых изображений в STEM. Это исследование включало в себя опросы слепых и слабовидящих специалистов STEM (ученых, математиков и т. д.) и пользовательское тестирование студентов высших учебных заведений с нарушениями зрения.Результатом стал набор руководств и учебных материалов для описания изображений, которые поощряют рекомендуемые методы, такие как краткость, сосредоточенность на данных, ясность и последовательность в языке, управление навигацией с помощью доступных списков, таблиц и правильное использование заголовков. В конце 2012 года Центр DIAGRAM запустил Инструмент описания изображения поэта — веб-инструмент с открытым исходным кодом, облегчающий создание доступных изображений. На сегодняшний день с помощью Poet было создано более 45 000 описаний изображений, но отзывы первых пользователей и партнеров выявили серьезные проблемы, связанные с написанием описаний.В ответ осенью 2014 года NCAM и DIAGRAM объединились, чтобы предоставить дополнительные ссылки для поддержки тех, кто хочет сделать изображения доступными. Следующие страницы выходят за рамки первоначальных исследований и руководств, начатых NCAM примерно десять лет назад. Были добавлены общие рекомендации, применимые ко всем типам изображений, а также расширенный набор рекомендаций для конкретных изображений. Расширенные рекомендации включают типы изображений, часто встречающиеся в гуманитарных и социальных науках, например карты, фотографии и искусство.Мы рады поделиться этим ресурсом и хотели бы поблагодарить сообщество DIAGRAM и сторонников Poet за их вклад в этот проект. Выражаем особую благодарность десяткам добровольцев из «Image Slam» и «Describathon», которые предоставили бесценные отзывы и без которых это справочное руководство было бы невозможно. Мы надеемся, что эта ссылка будет полезна для всех вас и других, которые все еще изучают доступность изображений.

вернуться к началу страницы


Этот справочный документ разбит на два основных раздела.В первом разделе приведены рекомендации по стилю, языку, форматированию и макету, применимые ко всем типам изображений. В частности, это включает в себя рассмотрение ключевых элементов, таких как контекст, аудитория и функция, а также использование соответствующего тона. В этом разделе также представлены рекомендации по макету, которые обычно встречаются в различных изображениях, таких как вставки и изображения, занимающие несколько страниц. Кроме того, в этой части документа рассматриваются часто задаваемые вопросы новых описателей, например, когда упоминать цвет и как описывать эмоции.

Во втором разделе этого документа представлены рекомендации, относящиеся к определенным категориям и классификациям изображений. Лучший подход к описанию линейного графика отличается от лучшего подхода к описанию карты. Описатели сталкиваются с различными проблемами и вопросами, потому что создание доступного описания сильно различается в зависимости от типа изображения. Таким образом, этот раздел направлен на то, чтобы представить нюансы, характерные для типов изображений.

Это справочное руководство отформатировано как ресурс HTML на этом сайте, но также доступно для прямой загрузки в виде документа Word.

Пожалуйста, присылайте нам свои отзывы об этом ресурсе, используя форму обратной связи.

вернуться к началу страницы

1. Контекст является ключевым

2. Учитывайте свою аудиторию

3. Будьте лаконичны

4. Будьте объективны

5. От общего к конкретному

6. Тон и язык

1. Вставки

2. Макет страницы

1. Рисунки и картины

2. Фотографии

3. Мультфильмы и комиксы

1.Химический элемент

1. Сравнение объектов

2. Сравнение объектов, комплекс

3. Сравнение событий во времени

1. Диаграммы Венна

2. Радиальные/веб-диаграммы

3. Иерархия/древовидные диаграммы

4. Блок-схемы

5. Циклы

1. Гистограммы

2. Линейные графики

3. Круговые диаграммы

4. Точечная диаграмма

1. Географические карты

2. Политические карты

1.Графики

2. Математические диаграммы

3. Геометрия

4. Уравнения и выражения

1. Простой

2. Комплекс

1. Этикетки пищевой ценности

2. Хронология

Вернуться к началу страницы | Заявление об авторских правах | Скачать документ Microsoft Word | Далее: Перейти к части 1 (Общие рекомендации)

Синтаксис | Крамдаун

Это версия 2.3.2 документации по синтаксису.

Синтаксис kramdown основан на синтаксисе Markdown и дополнен функциями, которые можно найти в других реализациях Markdown, таких как Maruku, PHP Markdown Extra и Pandoc.Однако, он стремится обеспечить строгий синтаксис с определенными правилами и поэтому не полностью совместим с уценкой. Тем не менее, большинство документов Markdown должны нормально работать при анализе с помощью kramdown. Все места, где синтаксис kramdown отличается от синтаксиса Markdown, выделены.

Ниже приводится полное определение синтаксиса для всех элементов, поддерживаемых kramdown. Вместе с документации по имеющимся конвертерам, там четко указано, что вы получите при крамдауне документ конвертируется.

Форматирование исходного текста

Крамдаун-документ может быть в любой кодировке, например, ASCII, UTF-8 или ISO-8859-1, а вывод будет иметь ту же кодировку, что и источник.

Документ состоит из двух типов элементов, элементов уровня блока и элементов уровня диапазона:

  • Элементы уровня блока определяют основную структуру контента, например, какая часть текста должен быть абзацем, списком, цитатой и так далее.

  • Элементы уровня Span размечают небольшие части текста, например, выделенный текст или ссылку.

Таким образом, элементы уровня диапазона могут встречаться только внутри элементов уровня блока или других элементов уровня диапазона.

Вы часто найдете ссылки на «первый столбец» или «первый символ» строки в блочном уровне. описания элементов. Такая ссылка всегда должна быть сделана относительно текущего отступа. уровне, потому что некоторые элементы уровня блока открывают новый уровень отступа (например, цитаты). То начало документа Kramdown открывает уровень отступа по умолчанию, который начинается с первого столбец текста.

Перенос строки

Некоторый упрощенный синтаксис разметки плохо работает в средах, где строки жестко переносятся. Для например, так обстоит дело со многими программами электронной почты. Поэтому kramdown позволяет использовать такой контент, как абзацы или цитаты должны быть заключены в перенос, т. е. разбиты по строкам. Это иногда называют to как «ленивый синтаксис», поскольку отступ или префикс строки, необходимый для первой строки содержимого, не требуется для последовательных строк.

Элементы уровня блока, поддерживающие перенос строк, всегда заканчиваются при выполнении одного из следующих условий. встретил:

Перенос строк разрешен во всем документе Kramdown, но есть некоторые элементы блочного уровня, которые сделать , а не поддерживать жесткую упаковку:

коллекторы

В большинстве случаев это не проблема, поскольку заголовки обычно помещаются в одну строку.Если текст заголовка становится слишком длинным для одной строки, вместо этого вам нужно использовать синтаксис HTML.

огороженные кодовые блоки

Строки-разделители изолированного блока кода не поддерживают жесткий перенос. Поскольку все между строки-разделители принимаются как есть, содержимое огороженного блока кода также не поддерживает жесткая упаковка.

термины списка определений

Каждый термин определения должен располагаться на отдельной строке. Таким образом, жесткая упаковка вводит дополнительные термины определения.Однако сами определения поддерживают жесткую обертку.

таблицы

Поскольку каждая строка таблицы Kramdown описывает одну строку таблицы или разделитель, невозможно жесткие столы.

Обратите внимание , что НЕ рекомендуется использовать ленивый синтаксис для написания документа kramdown. То гибкость, которую предлагает синтаксис kramdown из-за проблемы переноса строк, затрудняет читаемость и поэтому не должны использоваться.

Использование вкладок

kramdown предполагает, что позиции табуляции кратны четырем. Это особенно важно, когда использование табуляции для отступов в списках. Кроме того, табуляция может использоваться только в начале строки, когда отступ текста и не должен предваряться пробелами. В противном случае результаты могут быть неожиданными.

Автоматическое и ручное экранирование

В зависимости от выходного формата часто встречаются символы, требующие специальной обработки. Например, при преобразовании документа Kramdown в HTML необходимо позаботиться о символах < , > и и .Чтобы упростить работу с этими специальными символами, они автоматически и правильно экранируются. в зависимости от выходного формата.

Это означает, например, что вы можете просто использовать < , > и и в документе Kramdown и не нужно подумайте о том, когда использовать их аналоги HTML-сущностей. Однако, если вы действительно используете объекты HTML или HTML-теги, которые используют один из символов, тем не менее, результат будет правильным!

Так как kramdown также использует некоторые символы для разметки текста, должен быть способ избежать эти специальные символы, чтобы они могли иметь свое обычное значение.Это можно сделать с помощью обратная косая черта экранируется. Например, вы можете использовать обратную галочку следующим образом:

.
  Это не кодовый диапазон!
  

Ниже приведен список всех символов (последовательностей символов), которые можно экранировать:

  \ обратная косая черта
. период
* звездочка
_         подчеркивать
+ плюс
- минус
= знак равенства
` обратная галочка
()[]{}<> левые и правые круглые скобки/квадратные скобки/скобки/угловые скобки
# хэш
! хлопнуть
<< левый гильемет
>> правый кайр
:         двоеточие
| трубка
" двойная кавычка
'одинарная кавычка
знак доллара
  

Границы блоков

Некоторые элементы блочного уровня должны начинаться и/или заканчиваться на так называемых границах блоков, как указано в их документация.Есть два случая, когда границы блоков вступают в игру:

  • Если элемент уровня блока должен начинаться на границе блока, ему должен предшествовать пустая строка, маркер EOB, блок IAL или он должен быть первым элементом.

  • Если элемент уровня блока должен заканчиваться на границе блока, за ним должен следовать либо пробел, линия, маркер EOB, блок IAL или это должно быть последний элемент.

Все структурные элементы являются элементами блочного уровня и используются для структурирования содержимого.Они может разметить некоторый текст, например, как простой абзац, цитату или как элемент списка.

Пустые строки

Любая строка, содержащая только пробельные символы, такие как пробелы и табуляции, считается пустой. линия по Крамдауну. Одна или несколько последовательных пустых строк обрабатываются как одна пустая пустая строка. Пустой линии используются для отделения элементов блочного уровня друг от друга, и в этом случае они не имеют семантическое значение. Однако в некоторых случаях пустые строки имеют семантическое значение:

Пункты

Абзацы являются наиболее часто используемыми элементами блочного уровня.Одна или несколько последовательных строк текста трактуется как один абзац. Первая строка абзаца может быть с отступом до трех пробелов. другие строки могут иметь любое количество отступов, потому что абзацы поддерживают строку упаковка. В дополнение к правилам, изложенным в разделе о переносе строк, абзац заканчивается, когда встречается строка списка определений.

Два последовательных абзаца можно отделить друг от друга с помощью одной или нескольких пустых строк. Уведомление что разрыв строки в источнике не означает разрыв строки в выводе (из-за ленивого синтаксис)!.Если вы хотите иметь явный разрыв строки (т.е. тег
), вам нужно чтобы закончить строку двумя или более пробелами или двумя обратными косыми чертами! Обратите внимание, однако, что разрыв строки в последняя текстовая строка абзаца невозможна и будет проигнорирована. Начальные и конечные пробелы будут быть удалены из текста абзаца.

Ниже приведен пример того, как выглядят абзацы:

  Эта⋅пара⋅строка⋅начинается⋅в⋅первом⋅столбце.⋅Однако,
⋅⋅⋅⋅⋅⋅следующие⋅строки⋅могут⋅быть⋅с отступом⋅любое⋅количество⋅пробелов/табуляций.⋅⋅⋅Продолжение⋅параграфа⋅здесь.

⋅⋅Это⋅другой⋅абзац,⋅не⋅связанный⋅с⋅выше⋅одним.⋅Но⋅⋅
с⋅a⋅жестким⋅разрывом⋅строки.⋅\\
И⋅еще⋅один.
  

kramdown поддерживает так называемые заголовки стиля Setext и стиля atx. Обе формы могут использоваться внутри единый документ.

Стиль Setext

Заголовки в стиле Setext должны начинаться на границе блока со строкой текста ( текст заголовка) и строку, состоящую только из знаков равенства (для заголовка первого уровня) или тире (для второго уровня). заголовок уровня).Текст заголовка может иметь отступ до трех пробелов, но любые начальные или конечные пробелы удаляются из текста заголовка. Количество знаков равенства или тире не имеет значения, достаточно одного достаточно, но больше может выглядеть лучше. Знаки равенства или тире должны начинаться с первого столбца. Для пример:

  Заголовок первого уровня
==================

Заголовок второго уровня
------

   Другой заголовок первого уровня
знак равно
  

Поскольку заголовки Setext начинаются на границах блоков, это означает, что в большинстве ситуаций они должны быть предшествует пустая строка.Однако пустые строки после заголовка Setext не нужны:

  Это нормальный
пункт.

И заголовок
------------
И абзац

> Это цитата.

И заголовок
------------
  

Однако рекомендуется также использовать пустую строку после заголовка Setext, поскольку это выглядит более подходящим и облегчает чтение документа.

Исходный синтаксис Markdown позволяет опустить пустую строку перед заголовком Setext. Однако, это приводит к двусмысленности и делает чтение документа более трудным, чем необходимо.Поэтому это не допускается в документе Kramdown.

Крайний случай, о котором стоит упомянуть, следующий:

  заголовок
---
пункт
  

Можно спросить, представляет ли это два абзаца, разделенных горизонтальной линейкой. или заголовок второго уровня и абзац. Как следует из формулировки в примере, последний дело. Общее правило заключается в том, что заголовки Setext обрабатываются перед горизонтальными правилами.

Атх Стиль

Заголовки в стиле

atx должны начинаться на границе блока со строки, содержащей один или несколько символов решетки, а затем текст заголовка.Пробелы перед хэшем не допускаются персонажи. Количество символов решетки определяет уровень заголовка: один символ решетки дает вам заголовок первого уровня, два заголовка второго уровня и т. д., пока не будет достигнуто максимальное количество решеток из шести символов. для заголовка шестого уровня. При желании вы можете использовать любое количество хэшей в конце строки для закрыть шапку. Любые начальные или конечные пробелы удаляются из текста заголовка. Например:

  # Заголовок первого уровня

### Заголовок третьего уровня ###

## Заголовок второго уровня ######
  

Опять же, исходный синтаксис Markdown позволяет опустить пустую строку перед заголовком в стиле atx.

kramdown поддерживает удобный способ явной установки идентификатора заголовка, который берется из PHP Markdown. Extra и Maruku: если после текста заголовка поставить открывающую фигурную скобку (отделенную от текст с хотя бы одним пробелом), решетка, идентификатор и закрывающая фигурная скобка, идентификатор устанавливается на заголовок. Если вы используете функцию завершающего хэша заголовков в стиле atx, идентификатор заголовка должен идти после конечные хэши. Например:

  Привет {#id}
-----

# Привет {#id}

# Привет # {#id}
  

Этот дополнительный синтаксис не является частью стандартного Markdown.

Блок-котировки

Цитата начинается с маркера > , за которым следует необязательный пробел и содержание цитата. Сам маркер может иметь отступ до трех пробелов. Все последующие строки, независимо от того, начинаются с маркера цитаты или просто содержат текст, относятся к цитате, потому что цитаты поддерживают перенос строк.

Содержимое цитаты — это элементы блочного уровня. Это означает, что если вы просто используете текст как содержимое, которое будет заключено в абзац.Например, следующее дает вам одну блочную цитату с двумя абзацами в нем:

  > Это цитата.
> в несколько строк
что может быть лень.
>
> Это второй абзац.
  

Поскольку содержимое цитаты является элементами уровня блока, вы можете вкладывать цитаты и использовать другие элементы уровня блока (это также причина, по которой блочные кавычки должны поддерживать перенос строк):

  > Это абзац.
>
> > Вложенная цитата.>
> ## Заголовки работают
>
> * тоже перечисляет
>
> и все остальные элементы блочного уровня
  

Обратите внимание, что первый символ пробела после маркера > учитывает , а не при подсчете пробелов для отступ элементов блочного уровня внутри цитаты! Итак, блоки кода должен быть отступ с пятью пробелами или одним пробелом и одной табуляцией, например:

  > Кодовый блок:
>
> ruby ​​-e 'ставит: работает'
  

Перенос строк позволяет быть ленивым, но ухудшает читабельность и поэтому должен следует избегать, особенно с блок-кавычками.Вот пример использования цитат с переносом строки:

  > Это абзац внутри
цитата.
>
> > Это вложенный абзац
это продолжается здесь
> и здесь
> > и здесь
  

Кодовые блоки

Блоки кода

можно использовать для дословного представления текста, такого как разметка, HTML или фрагмент программы, потому что внутри блока кода не анализируется синтаксис.

Стандартные кодовые блоки

Кодовый блок можно начать, используя четыре пробела или одну табуляцию, а затем текст кодового блока.Все следующие строки, содержащие текст, независимо от того, придерживаются они этого синтаксиса или нет, принадлежат блоку кода потому что блоки кода поддерживают перенос строк). Обернутая строка кода автоматически добавляется к предыдущей строке кода, заменяя разрыв строки символом пробела. То отступ (четыре пробела или одна табуляция) удаляется из каждой строки блока кода.

Исходный синтаксис Markdown не допускает переноса строк в блоках кода.

Обратите внимание, что последовательные блоки кода, разделенные только пустыми строками, объединяются. вместе в один кодовый блок:

  Вот код

    Этот текст принадлежит к тому же кодовому блоку.Этот отдельный.
  

Кодовые блоки с ограждением

Этот альтернативный синтаксис не является частью исходного синтаксиса Markdown. Идея и синтаксис приходят из пакета PHP Markdown Extra.

kramdown также поддерживает альтернативный синтаксис для блоков кода, который не использует блоки с отступом, но разграничительные линии. Начальная строка должна начинаться с трех или более символов тильды ( ~ ) и в закрывающей строке должно быть не меньше тильды, чем в стартовой.Все между воспринимается буквально, как и в случае с другим синтаксисом, но нет необходимости делать отступ в тексте. Для пример:

  ~~~~~~~~
Вот код.
~~~~~~~~
  

Если вам нужны строки с тильдами в таком блоке кода, просто начните блок кода с большего количества тильд. Для пример:

  ~~~~~~~~~~~~
~~~~~~~
код с тильдами
~~~~~~~~
~~~~~~~~~~~~~~~~~~~
  

Этот тип блока кода особенно удобен для копируемого кода, так как вам не нужно делать отступ код.

Язык кодовых блоков

Вы можете сообщить Kramdown язык блока кода, используя IAL:

  ~~~
деф что?
  42
конец
~~~
{: .language-рубин}
  

Специально названный класс language-ruby сообщает kramdown, что этот блок кода написан на языке Ruby. язык. Такая информация может использоваться, например, конвертерами для подсветки синтаксиса на кодовый блок.

Огражденные блоки кода обеспечивают более простой способ указать язык, а именно путем добавления языка кодового блока до конца стартовой строки:

  ~~~ рубин
деф что?
  42
конец
~~~
  

Списки

kramdown предоставляет элементы синтаксиса для создания упорядоченных и неупорядоченных списков, а также определение списки.

Нумерованные и неупорядоченные списки

Как упорядоченные, так и неупорядоченные списки подчиняются одним и тем же правилам.

Список начинается с маркера списка (в случае ненумерованных списков один из + , - или * – можно смешать их - и в случае упорядоченных списков число, за которым следует точка), за которой следует одна вкладка или в хотя бы один пробел, за которым может следовать IAL, который следует применять к элемент списка, а затем первую часть содержимого элемента списка.Ведущие табуляции или пробелы удаляются из этой первой строки содержимого, чтобы обеспечить хорошее выравнивание со следующим содержимое элемента списка (см. ниже). Все последующие элементы списка с одинаковым типом маркера (неупорядоченные или заказанные) помещаются в тот же список. Номера, используемые для упорядоченных списков, не имеют значения, упорядоченный список всегда начинается с 1.

Следующее дает вам неупорядоченный список и упорядоченный список:

  * крам
+ вниз
- сейчас

1. Крам
2. вниз
3. сейчас
  

Исходный синтаксис Markdown позволяет смешивать маркеры упорядоченных и неупорядоченных списков, первый маркер, определяющий тип списка (упорядоченный или неупорядоченный).Это не разрешено в kramdown. Так как заявлено, приведенный выше пример даст вам два списка (неупорядоченный и упорядоченный) в kramdown и только один ненумерованный список в Markdown.

Первый маркер списка в списке может иметь отступ до трех пробелов. Номер столбца первого символ без пробела, который появляется после маркера элемента списка в той же строке, указывает отступ, который должен использоваться для следующих строк содержимого элемента списка. Если нет такой символ, отступ, который необходимо использовать, составляет четыре пробела или одну табуляцию.Линии с отступом могут за которыми следуют строки, содержащие текст с любым количеством отступов из-за строки упаковка. Обратите внимание, однако, что в дополнение к правилам, изложенным в разделе о переносе строк: элемент списка также заканчивается, когда встречается строка с другим маркером элемента списка – см. следующий абзац.

Отступ удаляется из содержимого и содержимого (обратите внимание, что содержимое, естественно, также содержит содержимое строки с маркером элемента) обрабатывается как текст, содержащий блочный элементы.Все остальные маркеры списка в списке могут иметь отступ до трех пробелов или количества пробелы, используемые для отступа последнего элемента списка, минус один, в зависимости от того, какое число меньше. Для пример:

  * Это первая строка. Поскольку первые не пробельные символы появляются в
  столбец 3, все остальные строки с отступом должны иметь отступ в 2 пробела.
Впрочем, можно было бы полениться и не сделать отступ строки, но это не так.
рекомендуемые.
* Это еще один пункт списка. Он использует другой номер
   пробелов для отступов, что нормально, но, как правило, их следует избегать.* Маркер элемента списка имеет отступ в 3 пробела, что разрешено, но должно
     также следует избегать и запускает третий элемент списка. Обратите внимание, что ленивый
     строка во втором элементе списка может заставить вас поверить, что это
     подсписок, которым это не является! Так что избегайте лени!
  

Таким образом, несмотря на то, что описанное выше возможно и создает один список с тремя элементами, не рекомендуется использовать разные отступы (маркер и содержимое списка) для элементов списка одного уровня, а также ленивый отступ! Гораздо лучше написать такой список следующим образом:

  * Это первый элемент списка bla blabla blabla blabla blabla blabla
  блабла блабла блабла блабла блабла блабла блабла блабла блабла блабла
  блабла блабла блабла бла
* Это еще один пункт списка.бла блабла блабла блабла блабла
  блабла блабла блабла блабла блабла блабла блабла блабла блабла блабла
  

Исходный синтаксис Markdown также позволяет делать отступ маркера, однако поведение того, что происходит с элементами списка, четко не указано и может вас удивить.

Кроме того, Markdown использует фиксированное количество пробелов/табуляций для отступа строк, принадлежащих элементу списка!

Ненумерованные и упорядоченные списки работают одинаково в отношении отступа:

  * список 1 пункт 1
 * список 1 элемент 2 (отступ 1 пробел)
  * список 1 пункт 3 (отступ 2 пробела)
   * список 1 пункт 4 (отступ 3 пробела)
    * ленивый текст, относящийся к пункту 4 выше
  
  1.список 1 пункт 1
 2. список 1 элемент 2 (отступ 1 пробел)
  3. список 1 пункт 3 (отступ 2 пробела)
   4. список 1 пункт 4 (отступ 3 пробела)
    5. ленивый текст, относящийся к пункту 4 выше
  
  * список 1 пункт 1
  * элемент вложенного списка 1
  * элемент вложенного списка 2
* список 1 пункт 2
  * элемент вложенного списка 1
  
  1. список 1 пункт 1
   1. элемент вложенного списка 1
   2. элемент вложенного списка 2
10. список 1 пункт 2
    1. элемент вложенного списка 1
  
  1. текст для этого элемента списка
   далее текст (отступ 3 пробела)

10.текст для этого элемента списка
    далее текст (отступ 4 пробела)
  

При использовании табуляции для отступа содержимого элемента списка помните, что позиции табуляции возникают в кратных из четырех для Kramdown. Табуляции корректно преобразуются в пробелы для расчета отступа. Для пример:

  * При использовании табуляции для отступа этой строки табуляция считается только тремя пробелами
    и поэтому общий отступ составляет четыре пробела.

   1. Табуляция после маркера считается здесь тремя пробелами.Поскольку
        отступ маркера три пробела и сам маркер
        занимает два символа, общий отступ, необходимый для
        следующие строки - это восемь пробелов или две табуляции.
  

Понятно, что вы можете получить неожиданные результаты, если смешаете табуляции и пробелы или если у вас нет в вашем редакторе для табуляции установлено значение, кратное четырем! Поэтому этого следует избегать!

Содержимое элемента списка состоит из текстовых или блочных элементов.Только простые элементы списка содержать текст, как в приведенных выше примерах. Они даже не заключены в тег абзаца. Если первый за текстом списка следует одна или несколько пустых строк, он будет заключен в тег абзаца:

  * крам

* вниз
* сейчас
  

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

Текст последнего элемента списка также заключен в тег абзаца, если все других элементов списка содержат правильный абзац в качестве первого элемента. Это заставляет следующий вариант использования работать так, как ожидалось, т.е. все элементы списка заключены в абзацы:

  * Первый элемент списка

* Второй элемент списка

* Последний элемент списка
  

Исходная страница синтаксиса Markdown указывает, что элементы списка, разделенные одним или несколькими пустые строки заключаются в теги абзаца.Это означает, что первый текст также будет обернут в абзац, если в списке есть элементы блочного уровня, разделенные пустыми строками. То вышеприведенное правило легко запомнить и позволяет точно указать, когда должен быть отображен первый текст списка. завернутый в абзац. Идея приведенного выше правила исходит из пакета Pandoc.

Как видно из приведенных выше примеров, допускаются пустые строки между элементами списка.

Поскольку содержимое элемента списка может содержать элементы блочного уровня, вы можете сделать следующее:

  * Первая позиция

    Второй абзац

    * вложенный список

    > цитата

* Второй предмет
  

Однако возникает проблема, когда вы хотите иметь блок кода сразу после элемента списка.Блок кода, следующий за элементом списка.

Любой элемент уровня блока может быть первым элементом в элементе списка. Однако, как описано выше, ведущие табуляции или пробелы строки с маркером элемента списка удаляются. Это приводит к проблема, когда вы хотите иметь блок кода в качестве первого элемента. Решением этой проблемы является следующая конструкция:

  *⋅
⋅⋅⋅⋅⋅⋅⋅⋅Это⋅это⋅код⋅блок⋅(отступ⋅должен⋅быть⋅4(1)+4(1)
⋅⋅⋅⋅⋅⋅⋅⋅пробелы⋅(табуляции)).
  

Обратите внимание, что за маркером списка должен следовать хотя бы один пробел или табуляция! В противном случае линия не распознается как начало элемента списка, но интерпретируется как абзац, содержащий список маркер.* Список два

Поскольку абзацы поддерживают перенос строк, обычно невозможно создать компактный вложенный список, т.е. список, в котором текст не заключен в абзацы, потому что нет пустая строка, но после нее подсписок:

  * Это просто текст.
    * это подпункт списка
      * это подэлемент подсписка
* Это просто текст,
    охватывающий две строки
  * это вложенный элемент списка.
  

Однако это часто используемый синтаксис, поэтому kramdown поддерживает его.

Если вы хотите начать абзац с чего-то похожего на маркер элемента списка, вам нужно избежать этого. Это делается путем экранирования точки в упорядоченном списке или маркера элемента списка в неупорядоченный список:

  1984\. Это было здорово
\- так говорят и другие!
  

Как упоминалось в начале, можно использовать необязательный IAL для применения атрибутов к элементу списка. после маркера элемента списка:

  * {:.cls} Этот элемент имеет класс "cls".Здесь продолжается предыдущий абзац.

* Это обычный элемент списка.
  

Списки определений

Эта функция синтаксиса не является частью исходного синтаксиса Markdown. Идея и синтаксис исходят из пакет PHP Markdown Extra.

Списки определений позволяют назначать одно или несколько определений одному или нескольким терминам.

Список определений запускается, когда за обычным абзацем следует строка с маркером определения (двоеточие, которое может иметь отступ до трех пробелов), затем по крайней мере одна табуляция или один пробел, необязательно, за которым следует IAL, который следует применить к элементу списка, и затем первая часть определения.Строка с маркером определения может быть опционально отделяется от предыдущего абзаца пустой строкой. Ведущие вкладки или пробелы удалены из этой первой строки определения, чтобы обеспечить хорошее согласование со следующим определением содержание. Каждая строка предыдущего абзаца считается термином, а строки анализируются отдельно. как элементы уровня пролета. Каждый такой термин может необязательно начинаться с IAL. это должно быть применено к термину.

Ниже приведен простой список определений:

  Крамдаун
: конвертер Markdown-superset

Маруку
: еще один конвертер Markdown-superset
  

Номер столбца первого непробельного символа, который появляется после маркера определения на в той же строке указывается отступ, который должен использоваться для следующих строк определения.Если такого символа нет, отступ, который необходимо использовать, равен четырем пробелам или одной табуляции. За строками с отступом могут следовать строки, содержащие текст с любым отступом из-за строки. упаковка. Обратите внимание, однако, что в дополнение к правилам, изложенным в разделе Что касается переноса строк, элемент списка также заканчивается, когда встречается строка с другим маркером определения.

Отступ удаляется из определения и (обратите внимание, что определение, естественно, также содержит содержимое строки с маркером определения) обрабатывается как текст, содержащий блок элементы уровня.Если существует более одного определения, все остальные маркеры определения термина могут иметь отступ до трех пробелов или количество пробелов, использованное для отступа последнего определение минус один, в зависимости от того, какое число меньше. Например:

  термин определения 1
термин определения 2
: Это первая строка. Поскольку первые не пробельные символы появляются в
столбец 3, все остальные строки должны быть с отступом в 2 пробела (или ленивый синтаксис может
  следует использовать после строки с отступом). Это сообщает Kramdown, что строки
  относятся к определению.: Это другое определение того же термина. Он использует
        разное количество пробелов для отступов, что нормально, но
        вообще следует избегать.
   : Маркер определения имеет отступ в 3 пробела, что разрешено, но
     также следует избегать.
  

Таким образом, в то время как выше возможно и создает список определений с двумя терминами и тремя определениями для них не рекомендуется использовать разные отступы (маркер определения и определение) в одном и том же список определений, а также ленивый отступ!

Определение термина состоит из текстовых и/или блочных элементов.Если определение , а не с предшествующей пустой строкой, первая часть определения будет просто текстом, если это будет абзац иначе:

  определение термина
: это определение будет просто текстом, потому что обычно это
  абзац и перед ним нет пустой строки.

  > хотя определение содержит другие элементы блочного уровня

: Это определение *будет* абзацем, поскольку ему предшествует
  пустая строка.
  

Правила о наличии любого элемента уровня блока в качестве первого элемента в элементе списка также применяются к определение.

Как упоминалось в начале, необязательный IAL для применения атрибутов к термину или определению может использовать:

  {:#term} Срок с
: {:.cls} Определение с классом "cls"

{:#term1} Первый срок
{:#term2} Второй срок
: {:.cls} Определение
  

Таблицы

Эта функция синтаксиса не является частью исходного синтаксиса Markdown. Синтаксис основан на одном из пакета PHP Markdown Extra.

Иногда требуется включить простые табличные данные в документ Kramdown, для которого используется полномасштабная HTML-таблица — это уже слишком.kramdown поддерживает это с помощью простого синтаксиса для ASCII. столы.

Таблицы можно создавать с ведущей вертикальной чертой или без нее: если первая строка таблицы содержит символ вертикальной черты в начале строки (необязательно с отступом до трех пробелов), затем все начальные символы вертикальной черты (т. е. символы вертикальной черты, которым предшествует только пробел) игнорируются на всех строках таблицы. В противном случае они не игнорируются и учитываются при делении строки таблицы на таблицу. клетки.

В таблице можно использовать четыре разных типа строк:

  • Строки таблицы определяют содержимое таблицы.

    Строка таблицы — это любая строка, содержащая хотя бы один символ вертикальной черты и не идентифицированная как другой тип линии таблицы! Строка таблицы делится на отдельные ячейки таблицы вертикальной чертой. Необязательный символ завершающей вертикальной черты игнорируется. Обратите внимание, что символы буквальной черты должны быть экранированные , за исключением , если они встречаются в фрагментах кода или элементах HTML !

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

    Вот несколько примеров строк таблицы:

      | Первая ячейка|Вторая ячейка|Третья ячейка
    | Первый | Второй | Третий |
    
    Первый | Второй | | Четвертый |
      
  • Линии-разделители используются для разделения тела таблицы на несколько частей тела.

    Строка-разделитель — это любая строка, которая содержит только вертикальные черты, тире, плюсы, двоеточия и пробелы/табуляции и который содержит по крайней мере один символ дефиса и один символ вертикальной черты.Можно использовать символы вертикальной черты и плюса для визуального разделения столбцов, хотя в этом нет необходимости. Несколько разделительных строк после другой рассматриваются как одна разделительная строка.

    Вот несколько примеров строк-разделителей:

      |----+----|
    +----|----+
    |---------|
    |-
    | :-----: |
    -|-
      
  • Первая строка-разделитель после хотя бы одной строки таблицы обрабатывается особым образом, а именно как заголовок разделительная линия . Он используется для разграничения строк заголовка от обычных строк таблицы и/или для установки столбца выравнивания.Все строки таблицы выше линии-разделителя заголовков считаются строками заголовков.

    Строка-разделитель заголовка может быть специально отформатирована, чтобы содержать определения выравнивания столбца: определение выравнивания состоит из необязательного пробела/табуляции, за которым следует необязательное двоеточие, один или несколько тире, необязательное двоеточие и еще один необязательный пробел/табуляция. Двоеточие определения выравнивания используются для установки выравнивания столбца: если нет двоеточий, столбец использует значение по умолчанию выравнивание, если двоеточие стоит только перед тире, столбец выравнивается по левому краю, если есть двоеточия до и после тире, столбец выравнивается по центру, и если есть только двоеточие после тире столбец выравнивается по правому краю.Каждое определение выравнивания задает выравнивание для один столбец, первое определение выравнивания для первого столбца, второе определение выравнивания для второго столбца и так далее.

    Вот несколько примеров строк-разделителей заголовков с определениями выравнивания:

      |---+---+---|
    + :-: |:------| ---:|
    | :-: :- -: -
    :-: | :-
      
  • Строка-разделитель нижнего колонтитула используется для разграничения строк нижнего колонтитула от обычных строк таблицы. Все строки таблицы ниже разделительной линии нижнего колонтитула считаются строками нижнего колонтитула.

    Строка-разделитель нижнего колонтитула похожа на обычную линию-разделитель, за исключением того, что дефисы заменены равными приметы. Строка-разделитель нижнего колонтитула может появляться в таблице только один раз. Если несколько строк-разделителей нижнего колонтитула используются в одной таблице, только последняя считается строкой-разделителем нижнего колонтитула, все остальные обрабатываются как обычные разделительные линии. Обычные разделительные линии, которые используются после разделительной строки нижнего колонтитула. игнорируются.

    Вот несколько примеров строк-разделителей нижнего колонтитула:

      |====+====|
    +====|====+
    |=========|
    |=
      

Завершающие пробелы или табуляции игнорируются во всех случаях.Чтобы упростить создание и обслуживание таблиц, строки заголовка, нижнего колонтитула и обычные разделители не должны указывать такое же количество столбцов, как и строки таблицы; даже |- и |= являются допустимыми разделителями.

Учитывая вышеуказанные компоненты, таблица определяется

  • дополнительная разделительная линия,
  • , за которым может следовать ноль, одна или несколько строк таблицы, за которыми следует строка-разделитель заголовка,
  • одна или несколько строк таблицы, по желанию перемежающихся разделительными линиями,
  • , за которым может следовать строка-разделитель нижнего колонтитула и ноль, одна или несколько строк таблицы и
  • дополнительная завершающая разделительная линия.

Также обратите внимание на

  • что в первой строке таблицы не должно быть более трех пробелов отступа перед первый символ без пробела,
  • , что в каждой строке таблицы должен быть хотя бы один неэкранированный символ вертикальной черты, чтобы распознает ее как строку, принадлежащую таблице, и
  • , что таблицы должны начинаться и заканчиваться на границах блоков!

Синтаксис таблицы отличается от используемого в PHP Markdown Extra следующим образом:

  • Крамдаун-таблицы не обязательно должны иметь заголовок таблицы.
  • Таблицы Kramdown
  • можно структурировать с помощью строк-разделителей.
  • Крамдаун-таблицы
  • могут содержать нижний колонтитул.
  • таблицы Kramdown должны быть отделены от других элементов блочного уровня.

Вот пример таблицы Kramdown со строкой заголовка таблицы, двумя телами таблицы и нижним колонтитулом таблицы. ряд:

  |-----------------+-------------+---------------- -+----------------|
| Выровнено по умолчанию |Выровнено по левому краю| Выровнено по центру | Выровнено по правому краю |
|-----------------|:-----------|:----------------:| ---------------:|
| Первая часть тела |Вторая ячейка | Третья ячейка | четвертая ячейка |
| Вторая строка |foo | **сильный** | баз |
| Третья строка |quux | баз | бар |
|------------------+-------------+---+ ----------------|
| Второе тело | | | |
| 2 линия | | | |
|=================+============+=================+ ================|
| Строка нижнего колонтитула | | | |
|------------------+-------------+---+ ----------------|
  

Приведенная выше примерная таблица требует много времени для создания без помощи таблицы ASCII. редактор.Однако синтаксис таблицы является гибким, и приведенную выше таблицу также можно записать так:

.
  |---
| Выровнено по умолчанию | Выровнено по левому краю | Выровнено по центру | Выровнено по правому краю
|-|:-|:-:|-:
| Первая часть тела | Вторая ячейка | Третья ячейка | четвертая ячейка
| Вторая строка |foo | **сильный** | баз
| Третья строка |quux | баз | бар
|---
| Второе тело
| 2 линия
|===
| Строка нижнего колонтитула
  

Горизонтальные правила

Горизонтальное правило для визуального разделения контента создается с помощью трех или более звездочек, дефисы или подчеркивания (они не могут быть смешаны в строке), необязательно разделенные пробелами или символами табуляции, на в противном случае пустая строка.Первая звездочка, тире или подчеркивание могут иметь отступ до три пробела. В следующих примерах показаны различные возможности создания горизонтальной линейки:

  * * *

---

  _ _ _ _

---------------
  

Математические блоки

Эта функция синтаксиса не является частью исходного синтаксиса Markdown. Идея исходит от Maruku и пакеты Pandoc.

kramdown имеет встроенную поддержку математики на уровне блоков и интервалов, написанную в LaTeX.

Математический блок должен начинаться и заканчиваться на границах блока. Он запущен с использованием два знака доллара, опционально с отступом до трех пробелов. Математический блок продолжается до следующего два знака доллара (которые могут быть на той же строке или на одной из следующих строк), которые появляются в конце строки, то есть за ними могут следовать только пробельные символы. Содержимое математического блока чтобы быть допустимой математикой LaTeX.n x_i y_j \phi(e_i, e_j) = \\ & (x_1, \ldots, x_n) \left( \begin{массив}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \конец{массив} \справа) \влево(\начать{массив}{с} у_1 \\ \vdots\\ д_н \конец{массив} \справа) \конец{выровнено}\]

Использовать встроенную математику также просто: просто окружите математическое содержание двумя знаками доллара, например, математический блок.Если вы не хотите начинать встроенный математический оператор, просто избегайте знаков доллара и они будут рассматриваться как простые знаки доллара.

Обратите внимание, , что код LaTeX, использующий символ вертикальной черты | во встроенных математических операторах может привести к строка распознается как строка таблицы. Этой проблемы можно избежать, используя команду \vert . вместо | !

Если у вас есть абзац, который выглядит как математический блок, но на самом деле должен быть абзацем с встроенный математический оператор, вам нужно избежать первого знака доллара:

  Ниже приведен математический блок:

$$ 5 + 5 $$

Но затем следует абзац со встроенным математическим выражением:

\$$ 5 + 5 $$
  

Если вам даже не нужен встроенный математический оператор, избегайте первых двух знаков доллара:

  \$\$ 5 + 5 $$
  

HTML-блоков

Исходный синтаксис Markdown указывает, что блок HTML должен начинаться с левого поля, т.е.е. нет допускается отступ. Кроме того, блок HTML должен быть окружен пустыми строками. Обе ограничения сняты для документов Kramdown. Кроме того, исходный синтаксис не позволяет вам использовать синтаксис Markdown в блоках HTML, который разрешен с kramdown.

Блок HTML потенциально запускается, если встречается строка, начинающаяся с HTML-кода, отличного от диапазона. тег или общий тег XML (открывающий или закрывающий), который может иметь отступ до трех пробелов.

Следующие теги HTML считаются HTML-тегами на уровне диапазона, и не будут запускать блок HTML, если они будут найдены в начало строки блока HTML:

  a abbr acronym b big bdo br button cite code del dfn em i img input
ins kbd label option q rb rbc rp rt rtc ruby ​​samp select small span
сильная сабвуферная текстовая область tt var
  

Дальнейший разбор найденного начального тега зависит от тега и от того, каким из трех возможных способов его содержимое проанализировано:

  • Анализировать как необработанный блок HTML: если содержимое тега HTML/XML должно обрабатываться как необработанный HTML, то только Теги HTML/XML анализируются с этого момента и далее, а текст обрабатывается как необработанный, не проанализированный текст до тех пор, пока соответствующий конечный тег найден или до конца документа.Каждый найденный тег будет проанализирован как снова необработанный HTML. Однако, если тег имеет атрибут уценки , этот атрибут управляет синтаксическим анализом этот один тег (см. ниже).

    Обратите внимание, что синтаксический анализатор в основном поддерживает только правильный XHTML! Однако есть некоторые исключения. Например, атрибуты без значений (т. е. логические атрибуты), а также атрибут без кавычек. значения также поддерживаются, и элементы без содержимого, такие как


    , могут быть записаны как
    .Если обнаружен недопустимый закрывающий тег, он игнорируется.

  • Анализировать как элементы уровня блока: если содержимое тега HTML/XML должно анализироваться как текст, содержащий блочные элементы, оставшийся текст в строке будет проанализирован синтаксическим анализатором блочного уровня как если он появляется на отдельной строке ( Предупреждение : Это также означает, что если строка состоит из начальный тег, текст и конечный тег, конечный тег не будет найден!). Все следующие строки анализируются как элементы уровня блока, пока не будет найдена строка блока HTML с соответствующим конечным тегом или пока не будет конец документа.

  • Анализировать как элементы уровня диапазона: если содержимое тега HTML/XML должно анализироваться как текст, содержащий диапазон элементы уровня, затем весь текст до следующего соответствующего закрывающего тега или до конца документа будет содержимым тега и позже будет проанализировано синтаксическим анализатором на уровне диапазона. Это также означает что если соответствующий конечный тег находится внутри того, что выглядит как диапазон кода, он все еще используется!

Если после закрывающего тега есть текст, он будет проанализирован, как если бы он находился на отдельной строке, за исключением случаев, когда внутри необработанного HTML-блока.

Кроме того, если обнаружен недопустимый закрывающий тег, он игнорируется.

Обратите внимание, что все имена HTML-тегов и атрибутов преобразуются в нижний регистр!

По умолчанию kramdown анализирует все блочные теги HTML и все теги XML как необработанные блоки HTML. Однако это можно настроить с помощью parse_block_html . Если установлено значение true , то синтаксический анализ в HTML блоки включены глобально. Также можно включить/отключить синтаксический анализ тега для каждого тега. основе с использованием атрибута уценки :

  • Если тег HTML имеет атрибут markdown="0" , то тег анализируется как необработанный блок HTML.

  • Если тег HTML имеет атрибут markdown="1" , то механизм по умолчанию для анализа синтаксиса в используется этот тег.

  • Если тег HTML имеет атрибут markdown="block" , содержимое тега анализируется как блок элементы уровня.

  • Если тег HTML имеет атрибут markdown="span" , содержимое тега анализируется как диапазон элементы уровня.

В следующем списке показано, какие теги HTML анализируются в каком режиме по умолчанию, когда markdown="1" применено или parse_block_html равно true :

Анализировать как необработанный HTML
  стиль сценария math option textarea pre code kbd samp var
  

Кроме того, все общие теги XML анализируются как необработанные блоки HTML.

Анализировать как элементы блочного уровня
  кнопка апплета blockquote body colgroup dd div dl fieldset форма iframe li
map noscript object ol table tbody thead tfoot tr td ul
  
Анализировать как элементы уровня диапазона
  a abbr acronym address b bdo big cite caption code del dfn dt em
h2 h3 h4 h5 h5 h6 i ins kbd легенда метки optgroup p pre q rb rbc
rp rt rtc ruby ​​samp select small span strong sub th tt var
  

Помните, что все теги HTML уровня диапазона, такие как a или b , не начинают блок HTML! Однако приведенные выше списки также включают HTML-теги на уровне диапазона в случае, если атрибут уценки используется в тег внутри необработанного HTML-блока.

Вот простой пример ввода и его HTML-вывода с parse_block_html , установленным на false :

  Это пункт.
<дел>
Что-то здесь.
Другой пункт
  

Это пункт.

<дел> Что-то здесь.

Другой пункт

Как видно, содержимое тега div будет проанализировано как необработанный HTML-блок и оставлено в покое. Однако, если в теге div использовался атрибут markdown="1" , содержимое будет проанализировано как элементы уровня блока и, следовательно, преобразуются в абзац.

Вы также можете использовать несколько тегов HTML одновременно:

  <дел><дел><дел>
Это какой-то текст в div `layer1`.
Это какой-то текст в разделе `layers`. Это пункт вне блока HTML.

Однако помните, что если содержимое тега анализируется как элементы блочного уровня, содержимое, которое появляется после начального/конечного тега, но в той же строке, обрабатывается так, как если бы оно появилось в новой строке:

  
Это первая часть абзаца, что здесь продолжается.

Это работает без проблем, поскольку анализируется как элементы уровня диапазона

Конечный тег не найден, так как эта строка анализируется как абзац

Поскольку установка parse_block_html на true может привести к нежелательному поведению, обычно лучше выборочно включать или отключать синтаксический анализ элементов на уровне блоков/промежутков, используя уценку атрибут!

Незакрытые HTML-теги блочного уровня корректно закрываются в конце документа для обеспечения правильного из вывода удалены вложенные и недопустимо используемые конечные теги:

  Это пункт.<разметка div="1">
Другой абз.

  

Это пункт.

<дел>

Еще один пункт.

Также поддерживается анализ XML-комментариев. Содержимое XML-комментариев может занимать несколько строк. Начало комментария XML может появляться только в начале строки, возможно, с отступом до три пробела. Если после конца XML-комментария есть текст, он будет проанализирован так, как если бы он появился на отдельной строке.синтаксис kramdown в XML-комментариях не обрабатывается:

  Это пункт.

 Первая часть абзаца,
продолжается здесь.
  

Все эти элементы являются элементами уровня диапазона и используются внутри элементов уровня блока для разметки текста. фрагменты. Например, можно легко создавать ссылки или выделять определенные части текста.

Обратите внимание, что пустые элементы уровня диапазона не преобразуются в пустые теги HTML, а копируются как есть в выход.

Ссылки и изображения

Поддерживаются три типа ссылок: автоматические ссылки, встроенные ссылки и справочные ссылки.

Автоматические ссылки

Создать его проще всего: просто окружите веб-адрес или адрес электронной почты углом. скобки и адрес будет преобразован в правильную ссылку. Адрес будет использоваться в качестве цели ссылки и как текст ссылки. Например:

  Информацию можно найти на главной странице .
Вы также можете написать мне: 
  

Невозможно указать другой текст ссылки с помощью автоматических ссылок – используйте другую ссылку типы для этого!

Встроенные ссылки

Как следует из формулировки, встроенные ссылки предоставляют всю информацию, встроенную в поток текста. Ссылка Ссылки стиля предоставляют только текст ссылки в текстовом потоке, а все остальное определяется в другом месте. Это также позволяет повторно использовать определения ссылок.

Ссылку в встроенном стиле можно создать, заключив текст ссылки в квадратные скобки, а затем сразу по URL-адресу ссылки (и необязательному заголовку в одинарных или двойных кавычках, которому предшествует как минимум один пробел) в обычных круглых скобках.Например:

  Это [ссылка](http://rubyforge.org) на страницу.
[link](../test "local URI") также может иметь заголовок.
И [пробелы](ссылка с space.html)!
  

Примечания:

  • Текст ссылки обрабатывается как обычный текст на уровне диапазона, поэтому анализируется и преобразуется. Однако, если вы используете квадратные скобки в тексте ссылки, вы должны либо правильно вложить их, либо чтобы избежать их. Невозможно создавать вложенные ссылки!

    Текст ссылки также может быть опущен, т.е.грамм. для создания анкоров ссылок.

  • URL-адрес ссылки должен содержать правильно вложенные круглые скобки, если заголовок не указан, или URL-адрес ссылки должны заключаться в угловые скобки (допускаются неправильно вложенные скобки).

  • Заголовок ссылки не может содержать разделителей и не может быть пустым.

  • Дополнительные атрибуты ссылки могут быть добавлены с помощью Span IAL после встроенной ссылки, например:

      Это [ссылка](http://пример.com){:hreflang="de"}
      

Справочные ссылки

Чтобы создать ссылку в стиле ссылки, необходимо заключить текст ссылки в квадратные скобки (как в встроенные ссылки), за которыми следуют необязательные пробелы/табуляции/разрывы строк, а затем, необязательно, следует с другой набор квадратных скобок с идентификатором ссылки в них. Идентификатор ссылки не может содержать закрывающая скобка и, если указано в определении ссылки, символы новой строки; это тоже не дело чувствительны, разрывы строк и табуляции преобразуются в пробелы, а несколько пробелов сжимаются в один.Например:

  Это [ссылка в стиле ссылки][linkid] на страницу. И это]
[linkid] также является ссылкой. Как и [это][] и [ЭТО].
  

Если не указать идентификатор ссылки (т.е. использовать только пустые квадратные скобки) или полностью опустить вторая пара квадратных скобок, текст ссылки преобразуется в действительный идентификатор ссылки путем удаления все недопустимые символы и вставка пробелов для разрывов строк. Если найдено определение ссылки для идентификатор ссылки, ссылка будет создана.В противном случае текст не преобразуется в ссылку.

Как и в случае со встроенными ссылками, дополнительные атрибуты ссылки могут быть добавлены с помощью IAL диапазона. после реферальной ссылки.

Определения ссылок

Определение ссылки можно разместить в любом месте документа. В выводе не появляется. Ссылка определение выглядит так:

  [linkid]: http://www.example.com/ "Необязательное название"
  

Определения ссылок, несмотря на то, что они описаны здесь, являются элементами блочного уровня, не относящимися к содержимому.

Определение ссылки имеет следующую структуру:

  • Идентификатор ссылки в квадратных скобках, опционально с отступом до трех пробелов,
  • , затем двоеточие и один или несколько необязательных пробелов/табуляций,
  • , затем URL-адрес ссылки, который должен содержать хотя бы один непробельный символ или левую угловую скобку, URL ссылки и правая угловая скобка,
  • , затем, необязательно, заголовок в одинарных или двойных кавычках, отделенный от URL-адреса ссылки одним или несколькими пробелов или на следующей строке с отступом на любое количество пробелов/табуляций.

Исходный синтаксис Markdown также позволял указывать заголовок в скобках. Это не разрешено для согласованности со встроенным заголовком.

Если у вас есть текст, который выглядит как определение ссылки, но на самом деле должен быть ссылкой и текстом, вы можете избежать двоеточия после идентификатора ссылки:

  Следующий абзац содержит ссылку и некоторый текст.

[Комната 100]\: Там вы найдете все, что вам нужно!

[Комната 100]: ссылка_на_комнату_100.HTML
  

Хотя определения ссылок не являются элементами блочного уровня содержимого, блочные IAL могут быть используется на них для указания дополнительных атрибутов для ссылок:

  [ссылка]: http://example.com
{:hreflang="de"}
  

Изображения

Изображения можно указывать с помощью синтаксиса, аналогичного тому, который используется в ссылках. Разница в том, что вы должны использовать восклицательный знак перед первой квадратной скобкой и что текст ссылки обычная ссылка становится альтернативным текстом ссылки на изображение.Как и в случае с обычными ссылками, ссылки на изображения могут быть написано встроенным или справочным стилем. Например:

  А вот и ![смайлик](../images/smiley.png)! И тут
![too](../images/other.png 'Текст заголовка'). Или ![здесь].
С пустым замещающим текстом ![](см.jpg)
  

Определение ссылки для изображений точно такое же, как определение ссылки для обычных ссылок. С дополнительные атрибуты могут быть добавлены через span и block IAL, можно, например, указать ширина и высота изображения:

  Вот встроенный ![смайлик](смайлик.png){:height="36px"}.

А вот ссылка ![улыбается]

[улыбается]: smile.png
{:}
  

Акцент

Крамдаун

поддерживает два типа упора: легкий и сильный упор. Части текста, окруженные с одиночными звездочками * или символами подчеркивания _ обрабатываются как текст со светлым выделением, текстовые части окруженные двумя звездочками или символами подчеркивания, рассматриваются как текст с сильным выделением. Окруженный означает, что за начальным разделителем не должен следовать пробел, а за конечным разделителем не должен предваряться пробелом.

Вот пример текста с легким и сильным выделением:

  *текст*
_какой-то текст_
**какой-то текст**
__какой-то текст__
  

Форма звездочки также разрешена в пределах одного слова:

  Это просто невероятно! Это не работает!
  

Текст может быть размечен как легким, так и сильным выделением, возможно, с использованием различных разделителей. Однако невозможно вложить сильное в сильное или легкое в текст со светлым выделением:

  Это ***текст с легким и сильным акцентом***.Это **также _акцентировано_**.
Это не работает*.
Это **тоже __не__ работает**.
  

Если одна или две звездочки или символы подчеркивания окружены пробелами, они обрабатываются буквально. если ты хотите принудительно указать буквальное значение звездочки или подчеркивания, вы можете экранировать его обратной косой чертой:

  Это буквальная звездочка *.
Это ** две буквальные звездочки.
Как \*являются\* эти!
  

Диапазоны кодов

Это эквивалент элемента блока кода на уровне промежутка.Вы можете разметить текст часть как диапазон кода, окружив его обратными кавычками ` . Например:

  Используйте для этого теги ``.
  

Обратите внимание, что все специальные символы в диапазоне кода обрабатываются правильно. Например, когда диапазон кода преобразуется в HTML, символы < , > и и заменяются соответствующими HTML-кодами. аналоги.

Чтобы включить литеральную обратную кавычку в диапазон кода, необходимо использовать две или более обратные кавычки в качестве разделителей.Вы можете вставить один необязательный пробел после начального и перед конечным разделителем (эти пробелы в выводе не используются). Например:

  Вот буквальная обратная кавычка `` `` .
А вот `` `какой-то` `` текст (обратите внимание на два пробела, чтобы остался один
на выходе!).
  

Одна обратная кавычка, окруженная пробелами, рассматривается как буквальная обратная кавычка. Если вы хотите заставить буквальное значение обратной косой черты, вы можете использовать обратную косую черту:

  Это буквальная обратная кавычка.Как эти!
  

Как и в случае с блоками кода, вы можете установить язык диапазона кода с помощью ИАЛ:

  Это фрагмент кода Ruby `x = Class.new`{:.language-ruby}
  

HTML-промежутков

HTML-теги

можно использовать не только на уровне блоков, но и на уровне интервалов. Теги HTML на уровне диапазона может использоваться только внутри одного элемента уровня блока, невозможно использовать начальный тег в одном блоке элемент уровня и конечный тег в другом. Обратите внимание, что поддерживается только правильный XHTML! Это означает, что надо использовать например
вместо
(хотя kramdown пытается исправить такие ошибки если возможно).

По умолчанию kramdown анализирует синтаксис kramdown внутри HTML-тегов span. Однако такое поведение может быть настроен с параметром parse_span_html . Если установлено значение true , то синтаксический анализ в HTML spans включен, если для него установлено значение false , синтаксический анализ отключен. Также возможно включить/отключить анализ синтаксиса для каждого тега на основе тега с использованием атрибута уценки :

  • Если HTML-тег имеет атрибут markdown="0" , то синтаксический анализ не выполняется (кроме синтаксического анализа HTML-тегов span) делается внутри этого тега HTML.

  • Если тег HTML имеет атрибут markdown="1" , содержимое тега анализируется как диапазон элементы уровня.

  • Если HTML-тег имеет атрибут markdown="block" , выдается предупреждение, так как HTML охватывает не может содержать элементы блочного уровня, и атрибут игнорируется.

  • Если тег HTML имеет атрибут markdown="span" , содержимое тега анализируется как диапазон элементы уровня.

Содержимое тега HTML уровня диапазона обычно анализируется как элементы уровня диапазона. Обратите внимание, однако, что некоторые теги типа