Як використовувати маркування в Web Development

Feb 6, 2026

Як

Як веб-розробники та творці вмісту, ми зазвичай витрачаємо багато часу написання тексту, який загорнуто всередині Html код. Що робити, якщо ми сказали вам, що є кращий спосіб зробити це з Markdown? Спосіб, в якому ви змогли зосередитися на письмовій формі, а не код?

Markdown - це звичайне текст, Lextweight Markup Manguage, розроблений у 2004 році Джоном Громбер та Аароном Сваарцем. Спочатку створені для того, щоб зробити запис XHTML / HTML, шляхом перетворення звичайних текстових файлів у структурно дійсну HTML або XHTML, маркування може бути використана практично для будь-якого типу письма: рукописи, підручники, примітки, веб-вміст тощо.

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

01. Виберіть редактор Markdown

Коли ви працюєте з Markdown для Інтернету, важливо зрозуміти основний синтаксис та обмеження, які ви можете зіткнутися. Перш ніж почати, вам потрібен якийсь тип редактора та перекладач для вашого сайту. З іншого боку, ви можете конвертувати маркування до публікації.

You'll need some kind of editor to get started — Вам знадобиться якийсь редактор, щоб розпочати роботу

Є кілька редакторів, з яких ви можете вибрати. Заступництво є дивним, оскільки він пропонує широкий спектр варіантів експорту, включаючи HTML та PDF. Ще одна велика альтернатива Складний - безкоштовний, онлайн редактор Markdown. Звичайно, будь-який текстовий редактор буде працювати.

Jetpack is handy for use with WordPress — Jetpack зручний для використання з WordPress

Якщо ви не плануєте конвертувати ваш Markdown до HTML, ви можете отримати плагін (або переривач) для вашого сайту. Для WordPress, Jetpack Має відмінну підтримку Markdown, що дозволяє використовувати маркування безпосередньо всередині повідомлень та коментарів - до тих пір, поки ви дозволяєте цей варіант.

Як і будь-яка мова розмітки, Markdown має свій власний синтаксис. Примітка: є ряд різних ароматів або різновидів маркування. У цій статті ми будемо лише загальноприйнятим синтаксисом.

02. Налаштування заголовків

У HTML існує шість стилів заголовків: h1 , h2 , h3 , h4 , h5 і h6 . Щоб відтворити їх у розмірі, використовуйте серію символів хештег ( Каштан ) - Відповідно до номера заголовка - після того, як текст заголовка. Наприклад, щоб створити & lt; h1 & gt; тег, використовуйте один хештег Каштан ; за & lt; h2 & gt; тег, використовуйте два хештег ## ; І так далі і так далі.

Введення маркування:

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

Вихід HTML:

 & lt; h1 & gt; заголовок 1 & lt; / h1 & gt;
& lt; h2 & gt; заголовок 2 & lt; / h2 & gt;
& lt; h3 & gt; заголовок 3 & lt; / h3 & gt;
& lt; h4 & gt; заголовок 4 & lt; / h4 & gt;
& lt; h5 & gt; h5 & lt; / h5 & gt;
& lt; h6 & gt; заголовок 6 & lt; / h6 & gt;

03. Позначте пункти

Абзаци представлені & lt; p & gt; тег у html. У Markdown, вони розділені однією або декількома порожніми лініями. Як HTML, пробіл ігнорується. Отже, якщо ви додасте 20 порожніх рядків, ви все ще тільки буде мати один абзац.

Введення маркування:

 Швидка коричнева лисиця стрибає над ледачим собакою.
Ледача собака не піклується, тому що він ледачий собака.

Вихід HTML:

 & lt; p & gt; Швидка коричнева лисиця перестрибує над ледачим собакою. & Lt; / p & gt;
& lt; p & gt; ледачий собака не піклується, тому що він ледачий собака. & lt; / p & gt;

04. Стиль перерв лінії

Лінії перерви, які представлені в HTML з & lt; br & gt; Міг, додають за допомогою одного ланцюга, з двома просторами в кінці попереднього рядка.

Введення маркування:

 Швидка коричнева лисиця
стрибає над ледачим собакою.

Вихід HTML:

 & lt; p & gt; Швидка коричнева fox & lt; br & gt; стрибає над ледачим собакою. & Lt; / p & gt;

05. Позначте акцент

Є два способи додати акцент на ваш текст: курсив ( & lt; em & gt; в HTML) або жирним шрифтом ( & lt; strong & gt; в HTML).

У Markdown, ви виконуєте це за допомогою однієї або двох зірочок ( * ") ). Ви також можете використовувати підкреслення (_), але я дотримуюся зірочками, тому що є й інші смаки відмінності, які використовують підкреслення для інших речей.

Введення маркування:

 * Італійський текст *
** bold text **

Вихід HTML:

 & lt; em & gt; курсивний текст & lt; / em & gt;
& lt; strong & gt; bold text & lt; / strong & gt;

Примітка. Ви також можете створити жирно-курсивний текст, використовуючи три зірочки: *** Жирний і курсивний текст *** .

06. Створіть горизонтальні правила

Створити горизонтальне правило (або & lt; hr & gt; У HTML) використовуйте серію з трьох або більше дефісів ( --- ), зірочки ( *** ) або рівні ознаки ( === ). Це ваш вибір, який ви віддаєте перевагу, але просто переконайтеся, що ви включаєте порожню лінію вище і нижче.

Введення маркування:

 Навчання щось нове - це завжди дуже весело.

---

Це впевнене!

Вихід HTML:

 & lt; p & gt; вивчення чогось нового завжди дуже весело. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; це впевнене! & lt; / p & gt;

07. Додайте зображення та посилання

У HTML, зображення додається за допомогою & lt; img & gt; Тег і посилання додаються за допомогою & lt; a & gt; тег.

У Markdown, зображення починаються з точки оклику ( ! ), після чого квадратні дужки ( [] ) для "alt text" та дужок ( () ) для шляху до зображення. Ви також можете включити додатковий заголовок всередині подвійних лапки ( "" ).

З посиланням, це майже те ж саме, за винятком оклику.

Введення маркування:

! [Alt text] (/ шлях / to / image.jpg "Необов'язковий заголовок")
[Текст посилання] (http://example.com "Необов'язковий заголовок")

Примітка. Ви також можете використовувати еталонні посилання та зображення, але це не охоплено тут.

Вихід HTML:

 & lt; img src = "/ path / to / image.jpg" alt = "alt text" title = "додатковий заголовок" / & gt;
& lt; href = "http://example.com" title = "Необов'язковий заголовок" & gt; Посилання тексту & lt; / a & gt;

08. Зробити списки

У HTML є два типи списків: замовлені ( & lt; OL & GT; ) і неупереджено ( & lt; uul & gt; ). З Markdown, використання номерів для замовлених списків та зірочок ( * ") ) або дефіс ( - ) для невпорядкованих списків.

Введення маркування:

 1. Пункт 1
2. Пункт 2
* Перший елемент
* Другий пункт
- перший елемент
- другий пункт

Вихід HTML:

 & lt; OL & GT;
& lt; li & gt; пункт 1 & lt; / li & gt;
& lt; li & gt; пункт 2 & lt; / li & gt;
& lt; / OL & GT;
& lt; uul & gt;
& lt; li & gt; перший елемент & lt; / li & gt;
& lt; li & gt; другий елемент & lt; / li & gt;
& lt; / ul & gt;
& lt; uul & gt;
& lt; li & gt; перший елемент & lt; / li & gt;
& lt; li & gt; другий елемент & lt; / li & gt;
& lt; / ul & gt;

09. Додайте комп'ютерний код та блоки коду

Коли ви працюєте з кодом у HTML, ви можете включити його як вбудований елемент за допомогою & lt; код & gt; теги; або як попередньо відформатований текстовий блок за допомогою & lt; pre & gt; & lt; код & gt; поєднання.

У Markdown, ці елементи розділені, використовуючи будь-яку основу на кожній стороні ( ` ); або за допомогою огороженого стилю, який включає в себе три резервуари вище і нижче блоку коду ( `` ` ).

Введення маркування:

 змінна `numbofpoints утримує оцінку гравця.
Якщо Player.wins {
numberofpoints + = 1
}

Вихід HTML:

 The & lt; код & gt; numberofpoints & lt; / код & gt; Змінна утримує оцінку гравця.
& lt; pre & gt; & lt; код & gt;
Якщо Player.wins {
numberofpoints + = 1
}
& lt; / pre & gt; & lt; / код & gt;

10. Стильний блокнот

Блокноти додаються в HTML за допомогою & lt; blockquote & gt; тег. У Markdown, використовуйте більший символ ( & gt; ) до лінії.

Введення маркування:

 & gt; Це моя блокнота.
& gt;
& gt; Це частина того ж блокування.
& gt; Це новий блокнот.

Вихід HTML:

 & lt; blockquote & gt;
& lt; p & gt; це моя blockquote. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; це частина того ж блокутоку. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; це новий блокнот. & lt; / p & gt;
& lt; / blockquote & gt;

11. Вбудований вбудований HTML

Є часи, коли потрібно створити HTML-елемент, який не підтримується;Наприклад, вам може знадобитися & lt; таблиця & gt; або & lt; div & gt; тег.

Якщо це так, ви можете змішувати маркування та HTML, але є деякі обмеження.Наприклад, ви не можете включати в себе маркування в тегах HTML-рівня блоку.

Читати далі:

20 модулів node.js ви повинні знати
Підтвердили 12 загальних запитань JavaScript
9 найкращих ресурсів для навчання HTML та CSS

Як використовувати маркування в Web Development

01. Виберіть редактор Markdown

02. Налаштування заголовків

03. Позначте пункти

04. Стиль перерв лінії

05. Позначте акцент

06. Створіть горизонтальні правила

07. Додайте зображення та посилання

08. Зробити списки

09. Додайте комп'ютерний код та блоки коду

10. Стильний блокнот

11. Вбудований вбудований HTML

Як - Найпопулярніші статті

Як зробити Apple Watch App

Як малювати перспективу

30 Keyshot Rendering Tips

Як зробити свій власний символ Біблії

Навчіться анімація для дітей

Додайте візуальні сигнали до вашого сайту

Що нового в кутових 4?

Створіть відповідну інформаційну панель з фігурою

Категорії