Основи Markdown

4 хв. читання

Зрозуміло, чому письменники, дизайнери, розробники, і люди схиблені на техніці обирають Markdown. Це простий та швидкий спосіб форматування статей і звичайного тексту.

В даний час він широко використовується для написання статей, документації, довідок і т.п.

У цій статті ми поговоримо про основний синтаксис та особливості Markdown. Почнемо!

Заголовки

Для написання HTML заголовків у Markdown використовується #. Щоб перемикатися від h1 до h6 ми змінюємо кількість #:

# Заголовок 1
## Заголовок 2
### Заголовок 3
#### Заголовок 4
##### Заголовок 5
###### Заголовок 6

Результат:

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Списки

Markdown підтримує два види списків, впорядковані (пронумеровані) і невпорядковані (марковані) списки. Для невпорядкованих списків в якості маркерів використовуються * (зірочки), + (плюси) і - (мінуси):

 111  
* 222 
* 2222

    + 333
    + 3333
    + 33333

    - 333
    - 3333
    - 33333

Результат:

111

  • 222
  • 2222

    • 333
    • 3333
    • 33333

    • 333

    • 3333
    • 33333

Markdown відстежує нумерацію за вас.

1. 111     
2. 222
3. 333

Результат:

  1. 111
  2. 222
  3. 333

Вкладені елементи списку

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

1. JavaScript бібліотеки
    - jQuery;             // 4 пробіли.
        * jQuery Mobile   // 8 пробілів.
    - Node і AngularJS  // знову 4 пробіли.

Результат:

  1. JavaScript бібліотеки
    • jQuery;
      • jQuery Mobile
    • Node і AngularJS

Горизонтальні лінії

В HTML, ми є тег <hr/> для створення горизонтальної лінії, але в Markdown ми будемо використовуються три або більше дефісів, зірочок, або підкреслень на окремому рядку. Вони всі працюють однаково:

Лінія 1
*******

Результат:

Лінія 1


Параграфи

Щоб написати абзац або текст в HTML, ми використовуємо теги <p> </p>, але у Markdown, блок текст автоматично перетворюється у параграф. Щоб залишити порожній рядок (тег <br> у HTML) використовуються два пробіли:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Курсив і напівжирний

*Italic*, так само як і _Italic_.
**Bold**, так само як і __Bold__.
***Italics і bold разом***, так само як і ___Italics і bold разом___.

Результат:

Italic, так само як і Italic.
Bold, так само як і Bold.
Italics і bold разом, так само як і Italics і bold разом.

Код

Щоб написати блок коду, ми можемо використовувати апостроф (```) навколо коду. Коли ми працюємо з inline блоками коду, апостроф використовується один раз:

<nav>
    <ul>
        <li></li> 
        <li></li> 
        <li></li> 
    </ul>
</nav>

або

hello!

Зображення

Щоб додати посилання на зображення, ми будемо використовувати наступний синтаксис:

`![Alt Text](image/path/img.jpg)` **Alt Text** 

Знак оклику (!) необхідний для декларування зображень.

Посилання

Markdown підтримує два стилі для форматування посилань:

[Codeguida](http://codeguida.com/)

Це другий [приклад][1].

[1]: http://example.com

Результат:

Codeguida

Це другий приклад.

Цитати

Щоб виділити цитату просто додайте символ > перед текстовим блоком:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur magna in mi elementum rutrum. In elementum vel eros at iaculis. Suspendisse iaculis hendrerit lectus, dapibus porttitor ligula volutpat non.

Ресурси

Редактори:

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація