Podgląd Markdown

Czym jest Markdown?

Markdown to lekki język znaczników stworzony przez Johna Grubera w 2004 roku. Używa symboli formatowania w zwykłym tekście — gwiazdek, znaków hash i myślników — do oznaczania struktury: nagłówków, pogrubienia, kursywy, list, linków i bloków kodu. Podgląd Markdown renderuje ten zwykły tekst do sformatowanego HTML, dzięki czemu możesz zobaczyć dokładnie, jak będzie wyglądał gotowy dokument przed opublikowaniem. Oryginalna specyfikacja Markdown opisana jest w dokumentacji Daring Fireball Grubera, a format został od tamtej pory sformalizowany jako CommonMark.

Markdown stał się domyślnym formatem pisania dokumentacji dla programistów, plików README, generatorów stron statycznych (Jekyll, Hugo, Astro), wiki i baz wiedzy. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit i Notion obsługują Markdown natywnie. Ponieważ źródłem jest zwykły tekst, pliki Markdown są niezwykle proste do kontroli wersji za pomocą Git, porównywania między gałęziami i scalania bez konfliktów w nienakładających się sekcjach pliku.

Narzędzie do podglądu Markdown analizuje dane wejściowe i konwertuje je na HTML w czasie rzeczywistym. Pozwala to wykryć błędy formatowania, uszkodzone linki i nieoczekiwane zagnieżdżenia przed zatwierdzeniem pliku lub opublikowaniem strony. Ten podgląd działa całkowicie w przeglądarce bez żadnego zapytania do serwera, dzięki czemu możesz pracować z prywatną lub wrażliwą dokumentacją bez wysyłania treści przez sieć.

Dlaczego warto używać podglądu Markdown online?

Pisanie Markdown w zwykłym edytorze bez podglądu oznacza zgadywanie, jak będzie wyglądać wynik. Podgląd na żywo natychmiast zamyka tę pętlę informacji zwrotnej.

Przypadki użycia podglądu Markdown

Dokumentacja składni Markdown

Poniższa tabela mapuje popularną składnię Markdown na jej renderowany wynik i odpowiadający element HTML. Obejmuje ona podstawy CommonMark, które obsługuje praktycznie każdy parser Markdown.

Porównanie wariantów Markdown

Różne platformy rozszerzają oryginalną specyfikację Markdown o dodatkowe funkcje. Znajomość tego, który wariant jest docelowy, pomaga unikać składni, która cicho zawodzi w innym rendererze.

Przykłady kodu: programowe renderowanie Markdown

Gdy chcesz renderować Markdown wewnątrz aplikacji zamiast narzędzia przeglądarkowego, użyj jednej z tych bibliotek. Każdy przykład konwertuje ciąg znaków Markdown na ciąg 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>

Często zadawane pytania