Шпаргалка разметки

Общие сведения Списки Таблицы Блоки и стили

Элемент в черновиках (только для курсов)

Чтобы добавить элемент в черновики, необходимо взять его название в квадратные скобки, например,[ Множества ].

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

Абзацы

Абзацы отделяются друг от друга как минимум одной пустой строкой.

Заголовки

### Раздел
 
#### Подраздел

Результат

Раздел

Подраздел

Строчные элементы

Абсолютные ссылки: [Google](http://google.com)
 
Ссылка на файл в курсе: [Kittens][kittens.jpg]
 
Текст, _выделенный курсивом_ или *полужирным шрифтом*.

Результат

Абсолютные ссылки: Google

Ссылка на файл в курсе: Kittens

Текст, выделенный курсивом или полужирным шрифтом.

Изображения

Абсолютный URL: ![замещающий текст](http://абсолютный_url)
 
Вставка изображения из курса: ![замещающий текст][имя_файла]
 
HTML тегом: <img src='url' width='ширина' height='высота' alt='Замещающий текст'/>

Результат

Абсолютный URL: Kittens

Вставка изображения из курса: Kittens

HTML тегом: Замещающий текст

Миниатюры

~~~ {.thumb.ws}
![][file_01.jpg]
![][file_02.png]
~~~

Результат

Размеры миниатюр:

ws — 120 пикселей по ширине
wm — 180 пикселей по ширине
wl — 240 пикселей по ширине
hs — 120 пикселей по высоте
hm — 180 пикселей по высоте
hl — 240 пикселей по высоте

Аудио

<audio controls>
  <source src='абсолютный_url.mp3'/>
  <source src='[course_file_01.ogg]'/>
</audio>

Результат

Видео

Следуйте инструкциям видео-хостинга по вставке видео на свой сайт.

Формулы

Строчные %%\frac{m}{n}%%
 
Блочные $$\frac{m}{n}$$

Результат

Строчные %%\frac{m}{n}%%

Блочные $$\frac{m}{n}$$

Код

``` {.hl.html}
<p>Этот код не обрабатывается.</p>
```

Результат

<p>Этот код не обрабатывается.</p>

Код может также встретиться в строке: `a + b`

Результат

Код может также встретиться в строке: a + b

Маркированный

* Элемент 1
 
  * элемент 1.1
  * элемент 1.2
  * элемент 1.3
 
* Элемент 2

Результат

Элемент 1
- элемент 1.1
- элемент 1.2
- элемент 1.3
Элемент 2

Нумерованный

1. Элемент 1
 
2. Элемент 2
 
   * элемент 2.1
 
   * элемент 2.2
  
3. Элемент 3

Результат

Элемент 1
Элемент 2
- элемент 2.1
- элемент 2.2
Элемент 3

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

= Термин 1
- Определение 1
- Определение 2
 
= Термин 2
- Определение 1
- Определение 2

Результат

Термин 1: Определение 1; Определение 2
Термин 2: Определение 1; Определение 2

Таблицы с заголовками

--------------------------- {.wide.rows.cols}
Наименование | Количество
----------------------------
Клубника     |  6 коробок {.strawberry}
Бананы       |  500 кг    {.banana}
Апельсины    |  20 коробок{.orange}
Киви         |  100 пачек {.kiwi}
----------------------------

Результат

Наименование	Количество
Клубника	6 коробок
Бананы	500 кг
Апельсины	20 коробок
Киви	100 пачек

Таблицы без заголовков

----------------------------{.centered}
Клубника     |  6 коробок {.strawberry}
Бананы       |  500 кг    {.banana}
Апельсины    |  20 коробок{.orange}
Киви         |  100 пачек {.kiwi}
----------------------------

Результат

Клубника	6 коробок
Бананы	500 кг
Апельсины	20 коробок
Киви	100 пачек

Стили для таблицы

.rows — добавление границ между строками
.cols — добавление границ между ячейками
.bordered — добавление границ вокруг таблицы
.wide — таблица занимает всю доступную ширину
.terse — сжимает ячейки
.striped — чередует цветом четные и нечетные сткроки таблицы
.hover — выделяет строку цветом при наведение

Блоки

~~~ {.block.definition}
#### Подзаголовок группы
 
Блоки, входящие в группу
~~~

Результат

Подзаголовок группы

Блоки, входящие в группу

Базовые стили

.subtle — понижение акцента
.em, .strong — повышение акцента
.block.incut — врезка
.block.definition — определение
.block.example — пример
.block.stressed — акцент
.block.warning — предупреждение
.block.danger — опасность

Блоки .definition, .example, .stressed позволяют иметь вложенный класс .tab, который будет расположен слева от блока.

~~~ {.block.definition}
 
{.tab}
Определение
 
#### Подзаголовок группы
 
Блоки, входящие в группу
~~~

Результат

Определение

Подзаголовок группы

Блоки, входящие в группу

Дополнительные стили

.block.info — информация
.block.recap — повторение
.block.thesis — тезис
.block.summary — резюме, выводы
.block.tip — совет
.block.attention — внимание
.block.critical — критическое предупреждение
.block.error — ошибка, плохая практика
.block.success — хорошая практика

Несемантические стили

.left-align — выравнивание по левому краю
.right-align — выравнивание по правому краю
.centered — выравнивание по центру
.pull-left — «висячее положение слева» (обтекание по правому краю)
.pull-right — «висячее положение справа» (обтекание по левому краю)

Оформление объектов

.figure— иллюстрация, внутри.caption— подпись

Пример использоватения:

~~~{.figure}
![Замещающий текст][url]
 
{.caption.centered}
Немного описания изображения
~~~

Результат

Kittens

Немного описания изображения

.blockquote— цитата (блок), внутри.author— автор или источник

Пример использоватения:

~~~{.blockquote}
Наука начинается с тех пор, как начинают измерять. Точная наука немыслима без меры.
 
{.author}
Дмитрий Иванович Менделеев
~~~

Результат

Наука начинается с тех пор, как начинают измерять. Точная наука немыслима без меры.

Дмитрий Иванович Менделеев

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

Пример использоватения:

~~~{.clue}
 
{.prompt}
Текст, который будет показываться
 
Любой оставшийся текст, который будет показан в сплывающем окне.
 
Он может быть сколь угодно сложным:
 
1. С нумерованными
2. списками
 
```
или кодом
```
 
~~~

Результат

Текст, который будет показываться

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

Он может быть сколь угодно сложным:

С нумерованными
списками

или кодом

Закрыть