Абитуриенту Студенту Партнерам

Таблицы

Grid таблицы

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

+---------+---------+
| Header  | Header  |
| Column1 | Column2 |
+=========+=========+
| 1. ab   | > This is a quote
| 2. cde  | > For the second column 
| 3. f    |
+---------+---------+
| Second row spanning
| on two columns
+---------+---------+
| Back    |         |
| to      |         |
| one     |         |
| column  |         |

Правило №1: В первой строке таблицы должен быть разделитель строки (символ -). Символ + используется для разделения столбцов.

Обычная строка также должна начинаться с символа - | и находится в том же положении как у первого разделителя строки.

Символ : служит для центрирования содержимого текста. Для выравнивания по левому и правому краю - : ставится соответственно слева или справа. Для выравнивания по центру : ставится с обеих сторон.

Правило №2: Для объединения столбцов необходимо пропустить символ разделителя столбцов:

+---------+---------+---------+
| Col1    | Col2    | Col3    |
| Col1a   | Col2a   | Col3a   |
| Col1b             | Col3b   |
| Col1c                       |

Строка заголовков выделяется символами +=========+, зарывающими строки, содержащие названия столбцов. Обычная строка закрывается +---------+

Последний разделитель столбцов | может быть опущен:

+---------+---------+
| This is | a table with a longer text in the second column

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

+-----+:---:+-----+
|  A  |  B  |  C  |
+-----+-----+-----+

Таблица может объединять строки и столбцы:

+---+---+---+
| AAAAA | B |
+---+---+ B +
| D | E | B |
+ D +---+---+
| D | CCCCC |
+---+---+---+

Строка в таблице может содержать атрибуты colspan и rowspan одновременно:

+---+---+---+
| AAAAA | B |
+ AAAAA +---+
| AAAAA | C |
+---+---+---+
| D | E | F |
+---+---+---+

Таблица не может иметь неправильную форму клеток:

+---+---+---+
| AAAAA | B |
+ A +---+ B +
| A | C | B |
+---+---+---+
| DDDDD | E |
+---+---+---+

Один символ + в линии выдает простой список <ul></ul>

Pipe таблицы

Каждая строка абзаца должна содержать по крайней мере один разделитель столбца |. Заголовок таблицы: a | b.

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

a | b
-- | -
0 | 1

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

a | b
- | -
0 | 1

Также допускается таблица с одной строкой заголовка:

a | b
-- | --

Вторая строка -- | -- после заголовка будет интерпретирована. как простые строки:

a | b
-- | --
-- | --

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

a b
c | d
e | f

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

a  | b 
-- | --
0  | 1 | 2
3  | 4
5  |

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

a          | b              |
-- | --
0      | 1       |

Разделители столбцов | в самом начале и конце строки могут быть опущены:

  a     | b     |
--      | --
| 0     | 1
| 2     | 3     |
  4     | 5

Для красоты символ | может находится в начале и конце строки:

|a|b|
|-|-|
|0|1|

А может быть пропущен на одной стороне:

|a|b
|-|-
|0|1

a|b|
-|-|
0|1|

Таблица с одним столбцом может быть объявлена строкой, начинающийся разделителем столбцов:

| a
| --
| b
| c

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

 a     | b       | c 
:------|:-------:| ----:
 0     | 1       | 2 
 3     | 4       | 5

Аббревиатура

Синтаксис: *[Abbreviation Label]: Abbreviation description

Пример:

*[HTML]: Hypertext Markup Language

Later in a text we are using HTML and it becomes an abbr tag HTML

Аббревиатура может содержать:

  • Пробелы
*[SUPER HTML]: Super Hypertext Markup Language
This is a SUPER HTML document
  • Любые символы юникода
*[😃 HTML]: Hypertext Markup Language

This is a 😃 HTML document

Они могут быть похожи:

*[1A]: First
*[1A1]: Second
*[1A2]: Third

We can abbreviate 1A, 1A1 and 1A2!

Сокращения соответствует целому слову, но не части:

*[1A]: First

We should not abbreviate 1.1A or 11A!

Автоссылки

Автоматическая генерация ссылок происходит, когда строка начинается с:

  • http:// или https://
  • ftp://
  • mailto:
  • www.

Пример:

This is a http://www.google.com URL and https://www.google.com
This is a ftp://test.com
And a mailto:email@toto.com
And a plain www.google.com

Но неполные ссылки не будут соответствовать:

This is not a http:/www.google.com URL and https:/www.google.com
This is not a ftp:/test.com
And not a mailto:emailtoto.com
And not a plain www. or a www.x

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

Пользовательские блоки

Синтаксис:

:::spoiler
This is a *spoiler*
:::

Текст после открытия блока не обязателен.

:::
This is a regular div
:::

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

::::::::::::spoiler
This is a spoiler
::::::::::::

Такой блок может охватывать несколько пустых строк в списке:

- This is a list
  :::spoiler
  This is a spoiler
  - item1
  - item2
  :::
- A second item in the list

Блоки поддерживают добавление дополнительных атрибутов:

:::spoiler {#myspoiler myprop=yes}
This is a spoiler
:::

Содержимое блока может содержать любые другой код:

:::mycontainer
<p>This is a raw spoiler</p>
:::

Inline пользовательские блоки

Пользовательские блоки могут использоваться с Inline блоками (параграф, заголовки) выделив ::

This is a text ::with special emphasis::

Другие теги также могут быть использованы в Inline пользовательских блоках:

This is a text ::with special *emphasis*::

Также как и атрибуты:

This is a text ::with special emphasis::{#myId .myemphasis}

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

Простое определение состоит из однострочного термина с последующим двоеточием и определением этого термина:

Apple
:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

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

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

Term 1

:   This is a definition with two paragraphs. Lorem ipsum 
    dolor sit amet, consectetuer adipiscing elit. Aliquam 
    hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus.

:   Second definition for term 1, also wrapped in a paragraph
    because of the blank line preceding it.

Term 2

:   This definition has a code block, a blockquote and a list.

        code block.

    > block quote
    > on two lines.

    1.  first list item
    2.  second list item

Символ : может быть перенесен на третье место:

Term 1
   : Valid even if `:` starts at most 3 spaces

Но если символов перед : будет больше чем 3, то это будет ошибкой:

Term 1

    : Not valid

Списки определений также могут быть внутри обычного списка:

1.  First

2.  Second

    Term 1
    :   Definition

    Term 2
    :   Second Definition

Зачеркнутый текст

Для зачеркивания текста используется символы ~~ с обеих сторон текста. В html для этого используется тег <del>:

The following text ~~is deleted~~

Верхний и нижний индексы

Для верхнего индекса используется символ ^, для нижнего индекса используется ~:

H~2~O is a liquid. 2^10^ is 1024

Подчеркнутый текст

Для подчеркнутого текста используется ++. Html тег - <ins>

++Inserted text++

Выделенный текст

Для выделения текста другим цветом используется ==. Html тег - <mark>

==Marked text==

Группировка элементов (тег <figure>)

^^^
This is a figure
^^^ This is a *caption*

Нижний колонтитул (<footer>)

Для обозначение нижнего колонтитула используются символы ^^:

^^ This is a footer
^^ multi-line

Цитата или сноска на другой материал (<cite>)

Для обозначения цитаты используются символы "":

This is a ""citation of someone""

Примечания (сноска)

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

That's some text with a footnote.[^1]

[^1]: And that's the footnote.

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

Каждая сноска должна иметь уникальное имя. Оно используется в качестве ссылки на примечание и не влияет на нумерацию строк. Название может содержать любые символы, допустимые в качестве атрибута ID в HTML.

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

That's some text with a footnote.[^1]

[^1]: And that's the footnote.

    That's the second paragraph.

На странице может быть несколько примечаний:

Here is a footnote[^1]. And another one[^2]. And a third one[^3]. And a fourth[^4].

[^1]: Footnote 1 text

[^2]: Footnote 2 text

a

[^3]: Footnote 3 text

[^4]: Footnote 4 text

Также можно не использовать пустую строку для разделения строк:

Here is a footnote[^1]. And another one[^2]. And a third one[^3]. And a fourth[^4].

[^1]: Footnote 1 text
[^2]: Footnote 2 text
[^3]: Footnote 3 text
[^4]: Footnote 4 text

Универсальные атрибуты

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

Header 1            {#header1}
========

## Header 2 ##      {#header2}

После этого можно создавать ссылки на эти элементы в любой части текста:

[Link back to header 1](#header1)

Универсальный атрибут может быть вида:

  • ID атрибута (идентификатор - #), используется для указания ID элемента HTML
  • Класс (идентификатор - .), будет добавляться к классу CSS-свойства элемента HTML
  • name=value или name="value", будет добавляться к атрибутам элемента HTML

Чтобы использовать таким же образом класс, необходимо:

## The Site ##    {.main}

Пользовательские атрибуты, идентификатор, несколько классов могут быть объединены в том же блоке универсального атрибута:

 ## Le Site ##    {.main .shine #the-site lang=fr}

Универсальный атрибут может быть использован с:

  • Заголовками
  • Блоками предварительно форматированного текста (<pre></pre>)
  • Ссылками
  • Картинками

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

[link](url){#id .class}  
![img](url){#id .class}

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

Позволяет использовать список со строчными латинскими буквами вместо цифр:

a. First item
b. Second item
c. Last item

Это работает и с заглавными буквами:

A. First item
B. Second item
C. Last item

Как и список с цифрами, он может начинаться с различных символов:

b. First item
c. Second item

Другой тип упорядоченного списка прерывает предыдущий список:

a. First item1
b. Second item
A. First item2

Упорядоченный список с римскими цифрами

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

i. First item
ii. Second item
iii. Third item
iv. Last item

Это также работает для заглавных букв:

I. First item
II. Second item
III. Third item
IV. Last item

Как и список с цифрами, он может начинаться с различных символов:

ii. First item
iii. Second item

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

Для выделения математического блока используются $...$:

This is a $math block$

Или $$...$$:

This is a $$math block$$

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

This is not a $ math block $

This is not a m$ath block$

This is should not match a 16$ or a $15

Для экранизации $ внутри математического блока используется \\:

This is a $math \$ block$

Максимуи подряд может стоять два символа $. Последующие символы остаются в тексте:

This is a $$$math block$$$

Для многострочного математического блока используется $$:

\begin{equation}
  \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
  \label{eq:sample}
\end{equation}

Медиа ссылки

Вставка аудио/видео ссылок на популярных ресурсах:

![Video1](https://www.youtube.com/watch?v=mswPy5bt3TQ)

![Video2](https://vimeo.com/8607834)

SmartyPants

Конвертация из простых символов ASCII в знаки препинания HTML:

This is a "text"
в
<p>This is a &ldquo;text&rdquo;</p>

Автоматическая генерация атрибута ID для заголовков

# This is a heading

Удаляются все не буквенные символы, кроме -, _ ..

Форматирование и ссылки также удаляется:

# This is a *heading*
.
<h1 id="this-is-a-heading">This is a <em>heading</em></h1>

# This is a [heading](/url)
.
<h1 id="this-is-a-heading">This is a <a href="/url">heading</a></h1>

Если несколько заголовков с одним названием, то к ID добавляется -1, -2…-n:

# This is a heading
# This is a heading
.
<h1 id="this-is-a-heading">This is a heading</h1>
<h1 id="this-is-a-heading-1">This is a heading</h1>

Если буквенных символов не будет, то прибавляется id="section":

# 1.0 & ^ % *
# 1.0 & ^ % *
.
<h1 id="section">1.0 &amp; ^ % *</h1>
<h1 id="section-1">1.0 &amp; ^ % *</h1>

Такие автоссылки можно использовать для создания ссылок на такие заголовки:

# This is a heading
[This is a heading]
.
<h1 id="this-is-a-heading">This is a heading</h1>
<p><a href="#this-is-a-heading">This is a heading</a></p>

Ссылки до заголовка также работают:

[This is a heading]
# This is a heading
.
<p><a href="#this-is-a-heading">This is a heading</a></p>
<h1 id="this-is-a-heading">This is a heading</h1>