Markdown Preview

Що таке Markdown?

Markdown — це легка мова розмітки, створена Джоном Грубером у 2004 році. Вона використовує символи форматування у звичайному тексті — зірочки, решітки та дефіси — для позначення структури: заголовки, жирний, курсив, списки, посилання та блоки коду. Переглядач Markdown перетворює цей простий текст на відформатований HTML, щоб ви могли побачити, як виглядатиме кінцевий документ до публікації. Оригінальна специфікація Markdown описана в документації Gruber's Daring Fireball, а формат відтоді було стандартизовано як CommonMark.

Markdown став стандартним форматом для написання документації розробників, файлів README, генераторів статичних сайтів (Jekyll, Hugo, Astro), вікі та баз знань. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit і Notion підтримують Markdown нативно. Оскільки джерело — це звичайний текст, файли Markdown легко версіонувати за допомогою Git, порівнювати між гілками та зливати без конфліктів у непересічних ділянках файлу.

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

Навіщо використовувати онлайн-переглядач Markdown?

Написання Markdown у простому редакторі без перегляду означає, що ви здогадуєтеся про результат. Живий переглядач миттєво закриває цю петлю зворотного зв'язку.

Варіанти використання Markdown Preview

Довідник синтаксису Markdown

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

Порівняння варіантів Markdown

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

Приклади коду: програмний рендеринг Markdown

Коли вам потрібно відрендерити Markdown всередині застосунку, а не в інструменті браузера, використовуйте одну з цих бібліотек. Кожен приклад перетворює рядок Markdown на рядок HTML.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Часті запитання