Sådan bruger du markdown i webudvikling

Feb 1, 2026
hvordan

Som webudviklere og indholdsskabere bruger vi generelt meget tid på at skrive tekst, der er pakket ind Html. kode. Hvad hvis vi fortalte dig, at der er en bedre måde at gøre det med markdown? En måde, hvorpå du var i stand til at fokusere på skrivningen og ikke koden?

Markdown er et almindeligt tekst, letvægtsmarkupsprog udviklet i 2004 af John Gruber og Aaron Swartz. Oprindeligt oprettet for at gøre skrivning XHTML / HTML lettere ved at konvertere almindelige tekstfiler til strukturelt gyldig HTML- eller XHTML, kan markdown bruges til næsten enhver form for skrivning: manuskripter, tutorials, noter, webindhold og meget mere.

Selvom det er relativt ligetil, kan markdown være lidt skræmmende, når du først starter ud. Men når du får fat i det, vil du hurtigt indse, hvor meget tid der blev brugt formatering af din kode i stedet for at skrive dit indhold.

01. Vælg en markdown editor

Når du arbejder med Markdown til internettet, er det vigtigt at forstå de grundlæggende syntaks og begrænsninger, du kan stå over for. Før du begynder, har du brug for en form for editor og en tolk til dit websted. Alternativt kan du konvertere markdown før udgivelse.

You'll need some kind of editor to get started

Du skal bruge en slags redaktør for at komme i gang

Der er flere redaktører, hvorfra du kan vælge. Byword. er fantastisk, fordi det tilbyder en bred vifte af eksportmuligheder, herunder HTML og PDF. Et andet godt alternativ er Stackedit. - En gratis online markdown editor. Selvfølgelig vil enhver almindelig teksteditor arbejde.

Jetpack is handy for use with WordPress

Jetpack er praktisk til brug med WordPress

Hvis du ikke planlægger at konvertere din markering til HTML, kan du få et plugin (eller interrupter) til dit websted. Til WordPress, Jet pakke Har fremragende støtte til markdown, som giver dig mulighed for at bruge markdown direkte indenfor indlæg og kommentarer - så længe du aktiverer denne mulighed.

Ligesom ethvert Markup-sprog har Markdown sin egen syntaks. Bemærk: Der er en række forskellige smagsstoffer eller markeringer. I denne artikel vil vi kun dække den almindeligt delte syntaks.

02. Indstil overskrifter

I HTML er der seks overskriftsformater: H1. Vi H2. Vi H3. Vi H4. Vi H5. og H6. . For at genskabe disse i markdown skal du bruge en række hashtag symboler ( # ) - Svarende til overskriftsnummeret - efterfulgt af overskriften Tekst. For eksempel at skabe en & lt; h1 & gt; tag, brug en hashtag # ; til en & lt; h2 & gt; tag, brug to hashtags ## ; og så videre og så videre.

Markdown input: 

 # overskrift 1
## overskrift 2.
### PUNKTION 3.
#### overskrift 4.
##### PUNKT 5.
###### PUNKT 6

HTML-udgang: 

 & lt; H1 & GT; overskrift 1 & lt; / h1 & gt;
& lt; H2 & GT; overskrift 2 & lt; / h2 & gt;
& lt; H3 & GT; overskrift 3 & lt; / h3 & gt;
& lt; H4 & GT; overskrift 4 & lt; / h4 & gt;
& lt; H5 & GT; overskrift 5 & lt; / H5 & GT;
& lt; H6 & GT; overskrift 6 & lt; / h6 & gt;

03. Markér afsnit

Afsnit er repræsenteret af & lt; p & gt; Tag i HTML. I markdown er de adskilt af en eller flere tomme linjer. Ligesom HTML ignoreres Whitespace. Så hvis du tilføjer 20 tomme linjer, vil du stadig kun have et afsnit.

Markdown input: 

 Den hurtige brune ræv hopper over den dovne hund.
Den dovne hund er ligeglad, fordi han er en doven hund.

HTML-udgang: 

 & lt; P & GT; Den hurtige brune ræv hopper over den dovne hund. & Lt; / p & gt;
& lt; p & gt; den dovne hund er ligeglad, fordi han er en doven hund. & lt; / p & gt;

04. Stil linjen pauser

Line pauser, som er repræsenteret i HTML med & lt; BR & GT; Tag, tilføjes ved hjælp af en enkelt linjeafbrydelse, med to mellemrum i slutningen af ​​den foregående linje.

Markdown input: 

 Den hurtige brune ræv
hopper over den dovne hund.

HTML-udgang: 

 & lt; p & gt; den hurtige brune ræv & lt; br it; hopper over den dovne hund. & Lt; / p & gt;

05. Mark vægt

Der er to måder at lægge vægt på din tekst: kursiv ( & lt; em & gt; i HTML) eller fed ( & lt; stærk & gt; i HTML).

I Markdown udfører du dette ved hjælp af en eller to asterisker ( * ). Du kan også bruge understregninger (_), men jeg holder fast i asterisker, fordi der er andre smag af markdown, der bruger understreger til andre ting.

Markdown input: 

 * kursiv tekst *
** Fed tekst **

HTML-udgang: 

 & lt; em & gt; kursivt tekst & lt; / em & gt;
& lt; stærk & gt; fed tekst & lt; / stærk & gt;

Bemærk: Du kan også oprette fed-kursiv tekst ved hjælp af tre stjerner: *** Fed og kursiv tekst *** .

06. Opret horisontale regler

At skabe en vandret regel (eller & lt; hr & gt; I HTML) skal du bruge en serie på tre eller flere bindestreger ( --- ), Asterisks ( *** ) eller lige tegn ( === ). Det er dit valg, hvilken du foretrækker, men bare sørg for at du indeholder en tom linje over og under.

Markdown input: 

 At lære noget nyt er altid meget sjovt.

---

Det er sikkert!

HTML-udgang: 

 & lt; P & GT; Læring noget nyt er altid meget sjovt. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; det er sikkert! & lt; / p & gt;

07. Tilføj billeder og links

I HTML tilføjes et billede ved hjælp af & lt; img & gt; Tag og links tilføjes ved hjælp af & lt; a & gt; tag.

I Markdown starter billeder med et udråbstegn ( ! ), efterfulgt af firkantede parenteser ( [] ) til 'Alt-teksten' og parentes ( () ) til stien til billedet. Du kan også inkludere en valgfri titel inden for dobbelt citater ( "" ).

Med links er det næsten det samme, medmindre der ikke er noget udråbstegn.

Markdown input: 

! [ALT TEXT] (/ PATH / To / Image.jpg "Valgfri titel")
[LINK TEXT] (http://example.com "Valgfri titel")

Bemærk: Du kan også bruge referencelinks og billeder, men det er ikke dækket her.

HTML-udgang: 

 & lt; img src = "/ sti / til / image.jpg" alt = "alt tekst" titel = "valgfri titel" / & gt;
& lt; en href = "http://example.com" titel = "Valgfri titel" & gt; link tekst & lt; / a & gt;

08. Lav lister

Der er to typer lister i HTML: bestilt ( & lt; ol & gt; ) og uordnede ( & lt; ul & gt; ). Med markdown, brug numre for bestilte lister og asterisker ( * ) eller bindestreger ( - ) for uordnede lister.

Markdown input: 

 1. Punkt 1.
2. Punkt 2.
* Første vare
* Andet punkt
- Første punkt.
- Andet punkt

HTML-udgang: 

 & lt; ol & gt;
& lt; li & gt; vare 1 & lt; / li & gt;
& lt; li & gt; vare 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; første vare & lt; / li & gt;
& lt; li & gt; andet emne & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; første vare & lt; / li & gt;
& lt; li & gt; andet emne & lt; / li & gt;
& lt; / ul & gt;

09. Tilføj inline kode og kodeblokke

Når du arbejder med kode i HTML, kan du enten inkludere det som et inline-element ved hjælp af & lt; Kode & GT; tags; eller som en forudformateret tekstblok ved hjælp af & lt; pre & gt; lt; kode & gt; kombination.

I markdown er disse elementer afgrænset ved hjælp af enten en enkelt backtick på hver side ( ` ); eller ved at bruge en indhegnet stil, som indeholder tre backticks over og under kodeblokken ( `` ` ).

Markdown input: 

 Variablen "NumberOfpoints" holder spillerens score.
hvis spiller.wins {
nummerofpoints + = 1
}

HTML-udgang: 

 The & Lt; Code & GT; Numberofpoints & LT; / Code & GT; Variabel holder spillerens score.
& lt; pre & gt; lt; kode & gt;
hvis spiller.wins {
nummerofpoints + = 1
}
& lt; / pre & gt; / lt; / kode & gt;

10. Style up blockquotes

Blockquotes tilføjes i HTML ved hjælp af & lt; blockquote & gt; tag. I markdown skal du bruge det større end symbol ( & gt; ) før linjen.

Markdown input: 

 & GT; Dette er min blockquote.
& gt;
& gt; Dette er en del af den samme Blockquote.
& gt; Dette er en ny blokquote.

HTML-udgang: 

 & lt; blockquote & gt;
& lt; p & gt; dette er min blockquote. & lt; / p & gt;
& lt; BR & GT;
& lt; P & GT; Dette er en del af den samme Blockquote. & lt; / P & GT;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; dette er en ny blokquote. & lt; / p & gt;
& lt; / blockquote & gt;

11. Embed inline HTML

Der er tidspunkter, hvor du skal oprette et HTML-element, der ikke understøttes;For eksempel kan du have brug for en & lt; bord & gt; eller & lt; div & gt; tag.

Hvis det er tilfældet, kan du blande Markdown og HTML, men der er nogle begrænsninger.For eksempel kan du ikke inkludere markdown inden for blokeringsniveau HTML-tags.

Læs mere:

  • 20 node.js moduler, du har brug for at vide
  • 12 Fælles JavaScript spørgsmål besvaret
  • 9 af de bedste ressourcer til at lære HTML og CSS

hvordan - Mest populære artikler

Opret collageeffekter i browseren med CSS

hvordan Feb 1, 2026

Hvis du nogensinde har ønsket at du kunne replikere virkningerne af en traditionel collage maker. i din W..

10 regler for at lave brugervenlige webformularer

hvordan Feb 1, 2026

På trods af udviklingen af ​​human-computer interaktion forbliver formularer stadig en af ​​de vigtigste typer interakti..

Byg en animeret split-skærm landingsside

hvordan Feb 1, 2026

Din destinationsside er et afgørende element i din Website Layout. . Det er den første rigtige mulighed, du skal..

Sådan master Creature Anatomy

hvordan Feb 1, 2026

Når det kommer til Tegning troværdige væsner , skal du fokusere på skelet-, muskulære og vaskulære systemer...

Gør realistiske planter i Cinema 4D

hvordan Feb 1, 2026

Uanset din endelige brug vil de fleste scener centreret på en menneskeskabt struktur drage fordel af et strejf af økologisk lø..

Opret en meteor brusebad i 3ds max

hvordan Feb 1, 2026

Hvis du vil lave et 3D meteorbruser til en scene eller et projekt, kan du nemt gøre et fotorealistisk meteorbruser i ethvert 3D-..

Sådan oprettes et vintermiljø

hvordan Feb 1, 2026

Før jeg begynder at arbejde på et personligt billede, begynder jeg normalt at tænke på, hvad jeg vil se i det færdige arbejd..

Sådan får du din Zbrush-model til Maya

hvordan Feb 1, 2026

For det Maya tutorial. Jeg skal vise dig, hvordan jeg fik denne Grumpy Link-model fra Zbrush til Maya til gengivel..

Kategorier