Kuinka käyttää Markdown Web Developmentissa

Feb 6, 2026
Miten tehdään

Web-kehittäjinä ja sisällön luojina me yleensä vietämme paljon aikaa kirjoittamalla tekstiä, joka on kääritty sisälle Html koodi. Entä jos kerroimme, että on parempi tapa tehdä se markdownilla? Tapa, jolla pystyt keskittymään kirjoitukseen eikä koodiin?

Markdown on Tavallinen teksti, kevyt merkintäkieli, jonka vuonna 2004 kehitetty John Gruber ja Aaron Swartz. Alun perin luotiin kirjoittamalla XHTML / HTML: n kirjoittaminen muuntamalla tavalliset tekstitiedostot rakenteellisesti kelvolliseksi HTML- tai XHTML-tiedostoiksi, Markdownia voidaan käyttää lähes kaikenlaiseen kirjoitukseen: käsikirjoitukset, opetusohjelmat, muistiinpanot, Web-sisältö ja paljon muuta.

Vaikka suhteellisen suoraviivainen markdown voi olla hieman pelottava, kun aloitat ensin. Mutta kun saat sen ripusta, huomaat nopeasti, kuinka paljon aikaa käytettiin koodin muotoilun sijaan kirjoittamalla sisältösi.

01. Valitse Markdown Editor

Kun työskentelet verkon markisoinnin kanssa, on tärkeää ymmärtää perus syntaksi ja rajoitukset, joita saatat kohdata. Ennen kuin aloitat, tarvitset jonkinlaista toimittajaa ja tulkkia sivustollesi. Vaihtoehtoisesti voit muuntaa merkinnän ennen julkaisemista.

You'll need some kind of editor to get started

Tarvitset jonkinlaisen toimittajan alkuun

On olemassa useita toimittajia, joista voit valita. Malliesimerkki On mahtava, koska se tarjoaa laajan valikoiman vientivaihtoehtoja, mukaan lukien HTML ja PDF. Toinen suuri vaihtoehto on Stackedit - Ilmainen, online-markdown editori. Tietenkin kaikki tavallinen tekstieditori toimii.

Jetpack is handy for use with WordPress

Jetpack on kätevä käytettäväksi WordPressin kanssa

Jos et aio muuntaa Markdownia HTML-palveluun, voit saada sivuston plugin (tai struktter). WordPress, Jetpack sillä on erinomainen tuki markdownille, jonka avulla voit käyttää Markdownia suoraan postitse ja kommentteja - niin kauan kuin mahdollista tämän vaihtoehdon käyttöön.

Kuten mikä tahansa merkintäkieli, Markdown on oma syntaksi. Huomaa: On olemassa useita erilaisia ​​makuja tai lajikkeita markdown. Tässä artikkelissa käsitellään vain yleisesti jaetun syntaksi.

02. Aseta otsikot

HTML: ssä on kuusi otsikkotyylejä: h1 , h2 , h3 , h4 , H5 ja h6 . Voit luoda nämä markdownissa käyttämällä sarjan hashtag-symboleja ( # ) - Vastaa otsikkonumeroa - seuraa otsikko teksti. Esimerkiksi luoda & lt; h1 & gt; Tag, käytä yhtä hashtagia # ; varten & lt; h2 & gt; Tag, käytä kahta hashtagia ## ; ja niin edelleen.

Markdown Input: 

 # Otsikko 1
## otsikko 2
### otsikko 3
#### Otsikko 4
##### Otsikko 5
###### otsikko 6

HTML-lähtö: 

 & lt; h1 & gt; otsikko 1 & lt; / h1 & gt;
& lt; h2 & gt; otsikko 2 & lt; / h2 & gt;
& lt; h3 & gt; otsikko 3 & lt; / h3 & gt;
& lt; h4 & gt; otsikko 4 & lt; / h4 & gt;
& lt; h5 & gt; otsikko 5 & lt; / h5 & gt;
& lt; h6 & gt; otsikko 6 & lt; / h6 & gt;

03. Merkitse kappaleita

Kohdat ovat edustaja & lt; p & gt; Tag HTML. Markdownissa ne erotetaan yhdellä tai useammalla tyhjällä rivillä. Kuten HTML, välilyönti jätetään huomiotta. Joten jos lisäät 20 tyhjää riviä, sinulla on vielä vain yksi kohta.

Markdown Input: 

 Nopea ruskea kettu hyppää laiskan koiran yli.
Laiska koira ei välitä, koska hän on laiska koira.

HTML-lähtö: 

 & lt; p & gt; nopea ruskea kettu hyppää laiskan koiran yli. & Lt; / p & gt;
& lt; p & gt; laiska koira ei välitä, koska hän on laiska koira. & lt; / p & gt;

04. Tyyli rivin taukoja

Line-taukoja, jotka on edustettuna HTML: ssä & lt; br & gt; Tag, lisätään yhdellä rivitaukolla, jossa on kaksi tilaa edellisen rivin lopussa.

Markdown Input: 

 Nopea ruskea kettu
Hyppää laiskan koiran yli.

HTML-lähtö: 

 & lt; p & gt; nopea ruskea kettu & lt; br & gt; hyppää laiskan koiran yli. & Lt; / p & gt;

05. Mark painotus

Tekstisi korostetaan kahdella tavalla: kursiivi ( & lt; em & gt; html) tai lihavoitu ( & lt; vahva & gt; HTML: ssä).

Malkdownissa saavutat tämän käyttämällä yhtä tai kahta asterisää ( * ). Voit myös käyttää alaviivoja (_), mutta tartun tähdellä, koska on olemassa muita makuja markdown, jotka käyttävät alaviivoja muille asioille.

Markdown Input: 

 * Kursiivinen teksti *
** Lihavoitu teksti **

HTML-lähtö: 

 & lt; em & gt; kursiivinen teksti & lt; / em & gt;
& lt; vahva & gt; lihavoitu teksti & lt; / strong & gt;

HUOMAUTUS: Voit myös luoda lihavoitu-kursiivista tekstiä kolmella asterisksillä: *** Lihavoitu ja kursiivi teksti *** .

06. Luo horisontaalisia sääntöjä

Voit luoda horisontaalisen säännön (tai & lt; hr & gt; HTML: ssä) käytä sarjaa kolme tai useampia väliviivoja ( --- ), tähdet ( *** ) tai yhtä suuret merkit ( === ). Se on valinta, jonka haluat, mutta varmista, että sisällytät tyhjän rivin ylä- ja alapuolella.

Markdown Input: 

 Oppiminen jotain uutta on aina hauskaa.

---

Se varmasti on!

HTML-lähtö: 

 & lt; p & gt; oppiminen jotain uutta on aina hauskaa. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; se varmasti! & lt; / p & gt;

07. Lisää kuvia ja linkkejä

HTML: ssä lisätään kuva käyttämällä & lt; img & gt; Tag ja linkit lisätään käyttämällä & lt; a & gt; tag.

Markdownissa kuvat alkavat huutomerkin ( ! ), jota seuraa neliökannattimet ( [] ) ALT-tekstiä ja sulkeista ( () ) Kuvan polku. Voit myös sisältää valinnaisen otsikon Double Quotes ( "" ).

Linkkien avulla se on melkein sama, paitsi huutomerkki.

Markdown Input: 

! [Alt Text] (/ polku / to / image.jpg "Valinnainen nimi")
[Linkin teksti] (http://example.com "Lisävarusteena")

Huomaa: Voit käyttää myös viiteyhteyksiä ja kuvia, mutta se ei ole täällä.

HTML-lähtö: 

 & lt; img src = "/ polku / to / image.jpg" Alt = "Alt Text" otsikko = "Valinnainen otsikko" / & gt;
& lt; a href = "http://example.com" otsikko = "valinnainen otsikko" & gt; linkki teksti & lt; / a & gt;

08. Tee listat

HTML: ssä on kaksi tyyppistä luetteloa: tilattu ( & lt; ol & gt; ) ja järjestämätön ( & lt; ul & gt; ). Kun Markdown, käytä numeroita tilatuille luetteloille ja tähdille ( * ) tai väliviivoja ( - ) Järjestelemättömille luetteloille.

Markdown Input: 

 1. Kohta 1
2. Kohta 2
* Ensimmäinen kohde
* Toinen kohde
- Ensimmäinen kohde
- Toinen kohta

HTML-lähtö: 

 & lt; ol & gt;
& lt; li & gt; tuote 1 & lt; li & gt;
& lt; li & gt; kohta 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; ensimmäinen tuote & lt; / li & gt;
& lt; li & gt; toinen kohde & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; ensimmäinen tuote & lt; / li & gt;
& lt; li & gt; toinen kohde & lt; / li & gt;
& lt; / ul & gt;

09. Lisää Inline-koodi ja koodilohkot

Kun työskentelet koodin kanssa HTML, voit joko sisällyttää sen inline-elementiksi & lt; koodi & gt; Tunnisteet; tai esiasennetun tekstiryhmänä käyttämällä & lt; pre & gt; & lt; koodi & gt; yhdistelmä.

Markdownissa nämä elementit ovat rajattuja joko yhdellä taaksepäin kummallakin puolella ( " ); tai käyttämällä aidattua tyyliä, johon kuuluu kolme backtickia koodin lohkon ylä- ja alapuolella ( `` ` ).

Markdown Input: 

 "Numberofpoints" -muuttuja pitää pelaajan pisteet.
Jos pelaaja.wins {
NumberOfpoints + = 1
}

HTML-lähtö: 

 LT-koodi & gt; numerot & lt; / code & gt; Muuttuja pitää pelaajan pisteet.
& lt; pre & gt; & lt; koodi & gt;
Jos pelaaja.wins {
NumberOfpoints + = 1
}
& lt; / pre & gt; & lt; / code & gt;

10. Style Up BlockQuotes

HTML: n lisäys lisätään & lt; blockque & gt; tag. Malkdownissa käytä suurempaa kuin symboli ( & gt; ) ennen linjaa.

Markdown Input: 

 & gt; Tämä on minun blocque.
& gt;
& gt; Tämä on osa samaa lohkoa.
& gt; Tämä on uusi blockquote.

HTML-lähtö: 

 & lt; blockedque & gt;
& lt; p & gt; tämä on minun blockquote. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; tämä on osa samaa lohkoa. & lt; / p & gt;
& lt; / blockque & gt;
& lt; blockque & gt;
& lt; p & gt; tämä on uusi blockquote. & lt; / p & gt;
& lt; / blockquote & gt;

11. Upota Inline HTML

On aikoja, jolloin sinun on luotava HTML-elementti, jota ei tueta;Esimerkiksi saatat tarvita a & lt; pöytä & gt; tai & lt; div & gt; tag.

Jos näin on, voit sekoittaa markdown ja HTML, mutta on olemassa joitakin rajoituksia.Esimerkiksi et voi sisällyttää Block-tason HTML-tunnisteita.

Lue lisää:

  • 20 solmu.js moduuleja sinun täytyy tietää
  • 12 Yhteinen JavaScript-kysymykset vastasivat
  • 9 parhaiden resurssien oppimiseen HTML ja CSS

Miten tehdään - Suosituimmat artikkelit

Kuinka perustaa ja optimoida Smugmug-myymälät

Miten tehdään Feb 6, 2026

(Kuva luotto: Andre Furtado Pexeleistä) Yksinkertainen verkkosivuston rakentaja toimii myös yhtenä Paras p..

4 vaiheet muuttuvien fonttien käyttämiseen

Miten tehdään Feb 6, 2026

(Kuva luotto: tulevaisuus) Muuttuvat fontit mahdollistavat fonttisi suunnittelijat määrittämään tyypin vaihtelut..

Kuinka luoda 3D ruoho

Miten tehdään Feb 6, 2026

3D-ruoho voidaan luoda erilaisilla eri tavoilla, ja se on olennainen voimavara kaikille luonnolliselle ympäristölle tai Arch-Vi..

Kuinka maalata linna sketchupilla

Miten tehdään Feb 6, 2026

On olemassa valikoima Taidetekniikat joka voi auttaa digitaalisessa maalauksessa, mutta ei ole kieltämistä ..

Nenän piirtäminen

Miten tehdään Feb 6, 2026

Mastering Miten piirtää nenä on yksi kasvojen parhaimmista osista. Ehkä se on monimuotoisuus muotoja, joita näemme joka päi..

Simuloida aave-ratsastajan muunnos

Miten tehdään Feb 6, 2026

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 ..

Luo karvainen 3D-merkki tyhjästä

Miten tehdään Feb 6, 2026

Turkin luonteen luominen voi olla helppoa, mutta jos haluat tehdä todella houkuttelevan karvan 3D-taide Sinun on ..

Miten saat Zbrush-mallin mayään

Miten tehdään Feb 6, 2026

Tätä varten Mayan opetusohjelma Aion näyttää, kuinka sain tämän Grumpy Link -mallin Zbrushista Mayään may..

Luokat