Jak korzystać z Markdown w tworzeniu stron internetowych

Sep 15, 2025

Jak

Jako twórcy stron internetowych i twórców treści, ogólnie spędzamy dużo czasu na pisanie tekstu, który jest owinięty wewnątrz Html. kod. Co jeśli powiedzieliśmy ci, że jest lepszy sposób, aby zrobić to z Markdown? Sposób, w jaki udało ci się skupić na pisaniu, a nie kodowi?

Markdown to zwykły tekst, lekki język znacznika opracowany w 2004 roku przez Johna Grubera i Aarona Swartszego. Pierwotnie stworzony, aby ułatwić pisanie XHTML / HTML, przekształcając pliki zwykłego tekstu w strukturalnie poprawny HTML lub XHTML, Markdown może być używany do niemal każdego rodzaju pisma: rękopisów, samouczków, notatek, treści internetowych i więcej.

Chociaż stosunkowo prosty, Markdown może być nieco zastraszający po pierwszym rozpoczęciu. Ale kiedy dostaniesz się go, szybko uświadomisz sobie, ile czasu spędził formatowanie kodu zamiast wpisywania treści.

01. Wybierz edytor Markdown

Kiedy pracujesz z Markdown do sieci, ważne jest, aby zrozumieć podstawową składnię i ograniczenia, na które możesz stawić czoła. Przed rozpoczęciem potrzebujesz jakiegoś typu edytora i tłumacza dla Twojej witryny. Alternatywnie można przekonwertować markdown przed publikowaniem.

You'll need some kind of editor to get started — Potrzebujesz jakiegoś redaktora, aby zacząć

Istnieje kilka redaktorów, z których możesz wybrać. Synonim jest niesamowite, ponieważ oferuje szeroką gamę opcji eksportu, w tym HTML i PDF. Kolejną wielką alternatywą jest Stackedit. - Bezpłatny edytor znaków online. Oczywiście każdy zwykły edytor tekstu będzie działać.

Jetpack is handy for use with WordPress — Jetpack jest przydatny do użytku z WordPress

Jeśli nie planujesz przekonwertować znacznika do HTML, możesz uzyskać wtyczkę (lub przerywacz) dla swojej witryny. Dla WordPress, Jetpack. Ma doskonałe wsparcie dla Markdown, co pozwala użyć Markdown bezpośrednio wewnątrz postów i komentarzy - tak długo, jak włączasz tę opcję.

Podobnie jak każdy język znacznika, Markdown ma własną składnię. Uwaga: Istnieje wiele różnych smaków lub odmian marki. W tym artykule omówimy tylko powszechnie współdzieloną składnię.

02. Skonfiguruj nagłówki

W HTML jest sześć stylów nagłówków: H1. , H2. , h3. , H4. , h5. i H6. . Odtworzyć je w Markdown, użyj serii symboli Hashtag ( # ) - Odpowiednia numeru nagłówka - a następnie tekst nagłówka. Na przykład, aby utworzyć & lt; h1 & gt; Tag, użyj jednego Hashtag # ; przez & lt; H2 & GT; Tag, użyj dwóch hashtagów ## ; i tak dalej i tak dalej.

Wejście Markdown:

 # KIEDYKA 1
## Nagłówek 2.
### Nagłówek 3.
#### Nagłówek 4.
##### Nagłówek 5.
###### Nagłówek 6

Wyjście HTML:

 H1 & GT; nagłówek 1 ° C / H1 & GT;
& lt; H2 & GT; Heading 2 ° C / H2 & GT;
& lt; h3 & gt; / h3 & gt;
& lt; h4 & gt; / h4 & gt;
& LT; H5 & GT; Heading 5 ° / H5 & GT;
H6 & GT; Heading 6 ° C / H6 & GT;

03. Zaznacz akapity

Akapity są reprezentowane przez & lt; p & gt; Tag w HTML. W Markdown są oddzielone jedną lub więcej pustymi liniami. Jak HTML, białe znaki są ignorowane. Więc jeśli dodasz 20 pustych linii, nadal będziesz miał tylko jeden akapit.

Wejście Markdown:

 Szybki brązowy lis skacze nad leniwym psem.
Leniwy pies się nie obchodzi, ponieważ jest leniwym psem.

Wyjście HTML:

 P & GT; Szybki brązowy lis przeskakuje nad leniwym psem. ^
& LT; P & GT; leniwy pies się nie obchodzi, ponieważ jest leniwym psem. '

04. Styl przerwy liniowe

Przerwy liniowe, które są reprezentowane w HTML z & lt; br & gt; Tag, są dodawane za pomocą jednej przerwy linii, z dwoma spacjami na końcu poprzedniej linii.

Wejście Markdown:

 Szybki brązowy lis
skacze nad leniwym psem.

Wyjście HTML:

 i P & GT; Szybki brązowy lis & LT; Br & GT; skacze nad leniwym psem. ^

05. Znak nacisk

Istnieją dwa sposoby nacisk na podkreślenie tekstu: kursywy ( & lt; em & gt; w HTML) lub pogrubiony ( & lt; silny & gt; w HTML).

W Markdown wykonasz to za pomocą jednej lub dwóch gwiazdek ( * ). Możesz także użyć podkreśleń (_), ale trzymam się gwiazdki, ponieważ istnieją inne smaki markdowni, które używają podkreśleń dla innych rzeczy.

Wejście Markdown:

 * Tekst kursywny *
** Bold Tekst **

Wyjście HTML:

 EM & GT; Tekst i LT; / EM & GT;
& lt; silny i pogrubiony tekst

Uwaga: Możesz także tworzyć pogrubiony tekst za pomocą trzech gwiazdek: *** Odważny i tekst kursywny *** .

06. Utwórz reguły poziome

Aby utworzyć regułę poziomą (lub & lt; hr & gt; W HTML), użyj serii trzech lub więcej myślników ( --- ), gwiazdki ( *** ) lub równe znaki ( ===. ). To twój wybór, który wolisz, ale po prostu upewnij się, że umieścisz pustą linię powyżej i poniżej.

Wejście Markdown:

 Nauka czegoś nowego jest zawsze dużo zabawy.

---

Na pewno jest!

Wyjście HTML:

 P & GT; Nauka czegoś nowego jest zawsze dużo zabawy. Always / P & GT;
& lt; hr & gt;
& P & GT; na pewno jest! & lt; / p & gt;

07. Dodaj obrazy i linki

W HTML obraz jest dodawany za pomocą & lt; img & gt; Tag i linki są dodawane za pomocą & lt; a & gt; etykietka.

W Markdown, obrazy zaczynają się od wykrzyknika ( ! ), a następnie wsporniki kwadratowe ( [] ) dla tekstu "alt" i nawiasów ( () ) Na ścieżkę do obrazu. Możesz także dołączyć opcjonalny tytuł wewnątrz podwójnych cytatów ( "" ).

Z linkami jest prawie taki sam, chyba że nie ma wykrzyknika.

Wejście Markdown:

! [ALT Tekst] (/ Ścieżka / do / image.jpg "tytuł opcjonalny")
[Link Tekst] (http://example.com "Opcjonalny tytuł")

Uwaga: Możesz także użyć powiązań referencyjnych i obrazów, ale to nie jest tutaj objęte.

Wyjście HTML:

 & LT; IMG SRC = "/ Ścieżka / do / image.jpg" Alt = "Alt Text" Title = "Opcjonalny tytuł" / & GT;
& lt; a href = "http://example.com" tytuł = "Opcjonalny tytuł" & GT; Link Tekst & LT; / A & GT;

08. Wykonaj listy

Istnieją dwa typy list HTML: zamówione ( & lt; ol & gt; ) i nieuporządkowany ( & lt; Ul & GT; ). Dzięki Markdown użyj numerów do zamówionych list i gwiazdek ( * ) lub myślniki ( - ) dla list nieuporządkowych.

Wejście Markdown:

 1. Przedmiot 1
2. Pozycja 2.
* Pierwszy przedmiot
* Drugi przedmiot
- Pierwszy przedmiot
- Drugi przedmiot

Wyjście HTML:

 OL & GT;
& LT; LI & GT; Pozycja 1 & LT; / LI & GT;
& LT; LI & GT; Pozycja 2

09. Dodaj kod Inline i bloków kodu

Kiedy pracujesz z kodem w HTML, możesz je umieścić jako element inline za pomocą & LT; Code & GT; znaczniki; lub jako wstępnie sformatowany blok tekstu za pomocą & LT; Code & GT; połączenie.

W Markdown elementy te są rozdzielane przy użyciu pojedynczego backtick po każdej stronie ( ` ); lub za pomocą ogrodzonego stylu, który zawiera trzy backticks powyżej i poniżej bloku kodu ( `` `. ).

Wejście Markdown:

 Zmienna `Numerofpoints` posiada wynik gracza.
jeśli gracz.Wins {
NumerofPoints + = 1
}

Wyjście HTML:

 Code; NumerofPoints & LT; / Code & GT; zmienna posiada wynik gracza.
& LT; Code & GT;
jeśli gracz.Wins {
NumerofPoints + = 1
}
& LT; / Code & GT;

10. Blockquotes Style

BlockQuotes są dodawane w HTML za pomocą & LT; BlockQuote & GT; etykietka. W Markdown użyj większego niż symbolu ( & gt; ) przed linią.

Wejście Markdown:

 & GT; To jest mój blokad.
& gt;
& gt; Jest to część tego samego blokady.
& gt; To jest nowy blokad.

Wyjście HTML:

 BlockQuote & GT;
& LT; P & GT; to jest mój blokad. ° C / P & GT;
& lt; br & gt;
& lt; P & GT; jest to część tego samego blokady. ° C / Lt; / P & GT;
& lt; / blockquote & gt;
& LT; BlockQuote & GT;
& LT; P & GT; jest to nowy blokad. ° C:
& lt; / blockquote & gt;

11. Embed Inline HTML

Są chwile, gdy trzeba utworzyć element HTML, który nie jest obsługiwany;Na przykład możesz potrzebować & LT; Table & GT; lub & lt; div & gt; etykietka.

Jeśli tak jest, możesz wymieszać Markdown i HTML, ale istnieją pewne ograniczenia.Na przykład nie można zawierać znaczników Markdown na poziomie bloków HTML.

Czytaj więcej:

20 modułów node.js musisz wiedzieć
12 Odpowiedzi na 12 pytań JavaScript
9 najlepszych zasobów do nauki HTML i CSS

Jak korzystać z Markdown w tworzeniu stron internetowych

01. Wybierz edytor Markdown

02. Skonfiguruj nagłówki

03. Zaznacz akapity

04. Styl przerwy liniowe

05. Znak nacisk

06. Utwórz reguły poziome

07. Dodaj obrazy i linki

08. Wykonaj listy

09. Dodaj kod Inline i bloków kodu

10. Blockquotes Style

11. Embed Inline HTML

Jak - Najpopularniejsze artykuły

Jak narysować ptaka

Jak zrobić zrzut ekranu na komputerze Mac

Jak KitBash w podróży z Shapr3D

Wszystko, co musisz wiedzieć o Kod JavaScript

Jak malować realistyczne fale w Photoshopie

Przygotuj deskę do malowania w 3 prostych krokach

5 rzeczy, których potrzebujesz do malowania olejnego

Jak tworzyć niestandardowe elementy sterujące w Majowie

Kategorie