Kuinka käyttää Markdown Web Developmentissa

Sep 17, 2025
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

Web-ilmoituksen poistaminen käytöstä Windows, MacOS ja Android

Miten tehdään Sep 17, 2025

(Kuva luotto: tulevaisuus) Jos olet säännöllinen web-käyttäjä, et ole epäilemättä nähnyt ilmoituksia verkko..

Luo tekstuurit kuvion leima-työkalulla

Miten tehdään Sep 17, 2025

(Kuva luotto: Lino Drieghe) Jos olet juuttunut tuijottaen tyhjästä kankaalle tai vastapäätä lyhyesti, jossa on p..

Aloita Express.js

Miten tehdään Sep 17, 2025

Selaineen kohdistuvien sovellusten luominen solmu.js saa tylsiä. Express.js on JavaScript Framework ..

Kuinka skannataan henkilö alle viisi minuuttia

Miten tehdään Sep 17, 2025

Älä pääse käyttöön fotogrammetrian kameran array suorittamaan a 3D-skannaus ? Mitään ongelmaa, nämä vin..

Käännä kuvia 3D-animaatioiksi Photoshopilla

Miten tehdään Sep 17, 2025

Meillä kaikilla on suuri muistoja, jotka on otettu valokuvina ja on hienoa pystyä muistamaan. Mutta mitä jos voisit mennä ask..

Luo vuorovaikutteisia 3D-visuaaleja kolmella.js

Miten tehdään Sep 17, 2025

Tämä WebGL-opetusohjelma osoittaa, miten luodaan 3D-ympäristö simulointi, joka osoittaa, mitä tapahtuu maailmalle, koska hii..

Kaikki mitä sinun tarvitsee tietää uudesta solmu.js 8

Miten tehdään Sep 17, 2025

Node.jsin viimeisin suuri vapautuminen julkaisee monia merkittäviä parannuksia JavaScript-yhteisöön, mukaan lukien päivitett..

Pro-opas 3D-tekstuurien luomiseen

Miten tehdään Sep 17, 2025

Viisi erinomaista artistiä osoittaa kaupan temppuja, selittää, miten luodaan kaupunki, scifi, luonnollinen, tyylitelty ja fant..

Luokat