mirror of
https://github.com/svek95/GeekBrainsHomeWork.git
synced 2026-06-10 15:15:56 +03:00
igor_pont
255 lines
8.6 KiB
Markdown
255 lines
8.6 KiB
Markdown
#
|
||
# **Особенности синтаксиса Markdown**
|
||
|
||
Абзацы создаются при помощи пустой строки. Если вокруг текста сверху и снизу есть пустые строки, то текст превращается в абзац.
|
||
|
||
Чтобы сделать перенос строки вместо абзаца, нужно поставить два пробела в конце предыдущей строки.
|
||
|
||
#
|
||
|
||
# *__Заголовки (h1)__*
|
||
## заголовки (h2)
|
||
### заголовки (h3)
|
||
#### заголовки (h4)
|
||
##### заголовки (h5)
|
||
###### заголовки (h6)
|
||
|
||
#
|
||
|
||
# *__Списки__*
|
||
|
||
Для разметки неупорядоченных списков можно использовать `*` или `-` или `+`:
|
||
|
||
- элемент 1
|
||
- элемент 2
|
||
|
||
Вложенные пункты создаются четырьмя пробелами (или tab):
|
||
* элемент 1
|
||
* элемент 2
|
||
* вложенный элемент 2.1
|
||
* вложенный элемент 2.2
|
||
|
||
Упорядоченный список:
|
||
|
||
1. элемент 1
|
||
2. элемент 2
|
||
1. вложенный 2.1
|
||
2. вложенный 2.2
|
||
|
||
Список с абзацами (четыре пробела или один tab):
|
||
|
||
* Раз абзац.
|
||
|
||
* Два абзац.
|
||
|
||
* Три абзац.
|
||
|
||
#
|
||
|
||
# *__Цитаты__*
|
||
|
||
Цитаты оформляются как в емейлах, спомощью символа `>`.
|
||
|
||
Например:
|
||
> Первая цитата
|
||
|
||
> Вторая цитата
|
||
|
||
> Третья цитата
|
||
|
||
Строки циатат можно объединять символом `>`.
|
||
|
||
> Первая строка цитаты,
|
||
>
|
||
> вторая строка цитаты,
|
||
>
|
||
> третья строка цитаты.
|
||
|
||
В цитаты можно помещать любые элементы, в том числе и вложенные цитаты:
|
||
|
||
> ## **Заголовок цитаты**
|
||
>
|
||
> 1. Первая строка
|
||
> 2. Вторая строка
|
||
>
|
||
> > Вложенная цитата
|
||
>
|
||
> Вот пример кода...
|
||
>
|
||
> Конец цитаты
|
||
|
||
#
|
||
|
||
# *__Исходный код__*
|
||
|
||
В чистом Маркдауне блоки кода отбиваются 4 пробелами (или tab) в начале каждой строки.
|
||
|
||
Но в GitHub-Flavored Markdown (сокращенно GFM) есть более удобный способ: ставим по три апострофа до и после кода. Также можно указать язык исходного кода.
|
||
|
||
Пример:
|
||
|
||
```html
|
||
<nav class="nav nav-primary">
|
||
<ul>
|
||
<li class="tab-conversation active">
|
||
<a href="#" data-role="post-count" class="publisher-nav-color" data-nav="conversation">
|
||
<span class="comment-count">0 комментариев</span>
|
||
<span class="comment-count-placeholder">Комментарии</span>
|
||
</a>
|
||
</li>
|
||
<li class="dropdown user-menu" data-role="logout">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||
<span class="dropdown-toggle-wrapper">
|
||
<span>
|
||
Войти
|
||
</span>
|
||
</span>
|
||
<span class="caret"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
```
|
||
|
||
В таком случае в коде не нужно заменять угловые скобки `< >` и амперсанд `&` на их html-сущности.
|
||
|
||
#
|
||
|
||
# *__Инлайн код__*
|
||
|
||
Для вставки кода внутри внутри предложений нужно заключать этот код в апострофы.
|
||
|
||
Пример: `<html class="ie no-js">`
|
||
|
||
Если внутри кода есть апостроф, то код необходимо обрамить двойными апострафами: ``There is a literal backtick (`) here.``
|
||
|
||
#
|
||
|
||
# *__Горизонтальная черта__*
|
||
|
||
`hr` создается тремя звездочками или тремя дефисами.
|
||
|
||
Пример:
|
||
|
||
***
|
||
|
||
---
|
||
|
||
#
|
||
|
||
# *__Ссылки__*
|
||
|
||
Это встроенная [ссылка с title элементом](http://gb.ru "Ссылка для обучения").
|
||
|
||
Это - [без title элемента](http://gb.ru)
|
||
|
||
А вот [пример][1] [нескольких][2] [ссылок][id] с разметкой как у сносок. Прокатит и [короткая запись][] без указания id.
|
||
|
||
[1]: https://gb.ru "Главная страница"
|
||
[2]: https://gb.ru/education
|
||
[id]: https://gb.ru/events (Мероприятия)
|
||
|
||
[короткая запись]: https://gb.ru/events
|
||
|
||
Вынос длинных урлов из предложения способствует сохранению читабельности исходника. Сноски можно располагать в любом месте документа.
|
||
|
||
#
|
||
|
||
# *__Выделения текста__*
|
||
|
||
Выделять слова можно при помощи `*` и `_`. Один символ - для наклонного текста, два символа - для жирного текста, три символа - для наклонного и жирного одновременно.
|
||
|
||
Например:
|
||
|
||
_наклонный_ и *наклонный*
|
||
|
||
__жирный__ и **жирный**
|
||
|
||
***жирный и наклонный***
|
||
|
||
#
|
||
|
||
# *__Зачеркивание текста__*
|
||
|
||
В GFM добавлено зачеркивание текста: две тильды `~` до и после текста.
|
||
|
||
Например:
|
||
~~Зачеркнуть~~
|
||
|
||
#
|
||
|
||
# *__Добавление изображений__*
|
||
|
||
Чтобы добавить изображение ___без `Alt` текста___ нобходимо использовать следующую команду:
|
||
|
||
``````
|
||
|
||
Например:
|
||
|
||
|
||
|
||
___Картина с Alt и тайтлом___ добавляется следующей командой:
|
||
|
||
|
||
|
||
Запомнить просто: синтаксис как у ссылок, только перед открывающей квадратной скобкой ставится восклицательный знак.
|
||
|
||
___Картинки "сноски"___ добавляются следующим способом:
|
||
|
||
![Картинка][image_3]
|
||
|
||
[image_3]: image_3.png
|
||
|
||
___Картинки-ссылки___ добавляются следующей командой:
|
||
|
||
```[](http://адрес ресурса)```
|
||
|
||
#
|
||
|
||
# *__Использование HTML внутри Markdown__*
|
||
|
||
Можно смешивать Markdown и HTML. Если на какие-то элементы необходимо поставить классы или атрибуты, то смело используем HTML:
|
||
|
||
> Выделять слова можно при помощи * и _ . Например, это <em class="a1">italic</em> и это тоже <i class="a1">italic</i>. А вот так уже <b>strong</b>, и так тоже <strong>strong</strong>.
|
||
|
||
Можно и наоборот, внутри HTML-тегов использовать Markdown.
|
||
|
||
<section class="someclass">
|
||
|
||
### Пример Маркдауна внутри HTML
|
||
|
||
Выделять слова можно при помощи `*` и `_` . Например, это _italic_ и это тоже *italic*. А вот так уже __strong__, и так тоже **strong**.
|
||
|
||
</section>
|
||
|
||
#
|
||
|
||
# *__Работа с таблицами__*
|
||
|
||
В чистом Markdawn нет синтаксиса для таблиц, а в GFM есть.
|
||
|
||
First Header | Second Header
|
||
-------------|--------------
|
||
Content Cell | Content Cell
|
||
Content Cell | Content Cell
|
||
|
||
Для красоты можно и по бокам линии нарисовать, но суть от этого не поменяется:
|
||
|
||
| First Header | Second Header |
|
||
| -------------|-------------- |
|
||
| Content Cell | Content Cell |
|
||
| Content Cell | Content Cell |
|
||
|
||
__Для выравнивания столбцов можно использовать двоеточие:__
|
||
|
||
| Left-Aligned | Center Aligned | Right Aligned |
|
||
|:------------- |:---------------:| -------------:|
|
||
| col 3 is | some wordy text | **$1600** |
|
||
| col 2 is | centered | $12 |
|
||
| zebra stripes | are neat | ~~$1~~ |
|
||
|
||
Внутри таблиц можно использовать ссылки, наклонный, жирный или зачеркнутый текст.
|
||
|
||
#
|
||
|
||
# **Для всего остального есть обычный HTML.** |