Innhold
- 01. Velg en Markdown-editor
- 02. Sett opp overskrifter
- 03. Merk av avsnitt
- 04. Stil linjeskiftene
- 05. Merk vektlegging
- 06. Lag horisontale regler
- 07. Legg til bilder og lenker
- 08. Lag lister
- 09. Legg til innebygd kode og kodeblokker
- 10. Stil opp blockquotes
- 11. Bygg innebygd HTML
Som webutviklere og innholdsskapere bruker vi vanligvis mye tid på å skrive tekst som er pakket inn i HTML-kode. Hva om vi fortalte deg at det er en bedre måte å gjøre det med Markdown? En måte som du var i stand til å fokusere på å skrive og ikke koden?
Markdown er et lett tekstmarkeringsspråk utviklet i 2004 av John Gruber og Aaron Swartz. Opprinnelig opprettet for å gjøre skriving av XHTML / HTML enklere ved å konvertere vanlig tekstfiler til strukturelt gyldig HTML eller XHTML, kan Markdown brukes til nesten alle typer skrivinger: manuskripter, opplæringsprogrammer, notater, nettinnhold og mer.
Selv om det er relativt greit, kan Markdown være litt skremmende når du starter. Men når du først har fått tak i det, vil du raskt innse hvor mye tid det ble brukt på å formatere koden din i stedet for å skrive innholdet ditt.
01. Velg en Markdown-editor
Når du jobber med Markdown for nettet, er det viktig å forstå de grunnleggende syntaksen og begrensningene du kan møte. Før du begynner, trenger du en type redaktør og en tolk for nettstedet ditt. Alternativt kan du konvertere Markdown før du publiserer.
Det er flere redaktører du kan velge mellom. Byword er fantastisk fordi det tilbyr et bredt spekter av eksportalternativer, inkludert HTML og PDF. Et annet flott alternativ er StackEdit - en gratis, online Markdown-redaktør.Selvfølgelig vil enhver klarteksteditor fungere.
Hvis du ikke planlegger å konvertere Markdown til HTML, kan du få et plugin (eller avbryter) for nettstedet ditt. For WordPress har Jetpack utmerket støtte for Markdown, som lar deg bruke Markdown direkte i innlegg og kommentarer - så lenge du aktiverer det alternativet.
Som alle markup-språk har Markdown sin egen syntaks. Merk: Det finnes en rekke forskjellige smaker eller varianter av Markdown. I denne artikkelen vil vi bare dekke den vanlige delte syntaksen.
02. Sett opp overskrifter
I HTML er det seks overskriftsstiler: h1, h2, h3, h4, h5 og h6. For å gjenskape disse i Markdown, bruk en serie hashtag-symboler (#) - tilsvarende overskriftsnummeret - etterfulgt av overskriftsteksten. For eksempel å lage en h1> tag, bruk en hashtag #; for en h2> tag, bruk to hashtags ##; og så videre.
Markdown-inngang:
# Overskrift 1 ## Overskrift 2 ### Overskrift 3 #### Overskrift 4 ##### Overskrift 5 ###### Overskrift 6
HTML-utdata:
h1> Overskrift 1 / h1> h2> Overskrift 2 / h2> h3> Overskrift 3 / h3> h4> Overskrift 4 / h4> h5> Overskrift 5 / h5> h6> Overskrift 6 / h6>
03. Merk av avsnitt
Avsnitt er representert av p> tag i HTML. I Markdown er de atskilt med en eller flere blanke linjer. I likhet med HTML ignoreres mellomrom. Så hvis du legger til 20 blanke linjer, har du fortsatt bare ett avsnitt.
Markdown-inngang:
Den kjappe brunrevenen hopper over den late hunden. Den late hunden bryr seg ikke, fordi han er en lat hund.
HTML-utdata:
p> Den raske brunrevenen hopper over den late hunden. / p> p> Den late hunden bryr seg ikke, fordi han er en lat hund. / p>
04. Stil linjeskiftene
Linjeskift, som er representert i HTML med br> , legges til ved hjelp av en enkelt linjeskift, med to mellomrom på slutten av forrige linje.
Markdown-inngang:
Den kjappe brunrevenen hopper over den late hunden.
HTML-utdata:
p> Den raske brune ræven> hopper over den late hunden. / p>
05. Merk vektlegging
Det er to måter å legge vekt på teksten på: Kursiv (em> i HTML) eller fet (sterk> i HTML).
I Markdown oppnår du dette ved å bruke en eller to stjerner (*). Du kan også bruke understrekninger (_), men jeg holder meg med stjerner, fordi det er andre smaker av Markdown som bruker understrekninger til andre ting.
Markdown-inngang:
* Kursiv tekst * * * Fet tekst * *
HTML-utdata:
em> Kursiv tekst / em> sterk> Fet tekst / sterk>
Merk: Du kan også opprette fet kursiv tekst ved hjelp av tre stjerner: * * * Fet og kursiv tekst * * *.
06. Lag horisontale regler
For å lage en horisontal regel (eller hr> i HTML), bruk en serie med tre eller flere bindestrek (---), stjerner (***) eller likhetstegn (===). Det er ditt valg hvilken du foretrekker, men bare sørg for at du inkluderer en tom linje over og under.
Markdown-inngang:
Å lære noe nytt er alltid veldig gøy. --- Det er sikkert!
HTML-utdata:
p> Å lære noe nytt er alltid veldig morsomt. / p> hr> p> Det er det sikkert! / p>
07. Legg til bilder og lenker
I HTML legges et bilde til ved hjelp av img> tag og lenker legges til ved hjelp av a> stikkord.
I Markdown starter bilder med et utropstegn (!), etterfulgt av firkantede parenteser ([]) for 'alt-teksten', og parenteser (()) for stien til bildet. Du kan også inkludere en valgfri tittel i doble anførselstegn (’’).
Med lenker er det nesten det samme, bortsett fra at det ikke er noe utropstegn.
Markdown-inngang:
! [Alt Text] (/ sti / til / image.webp "Valgfri tittel") [Linktekst] (http://example.com "Valgfri tittel")
Merk: Du kan også bruke referanselinker og bilder, men det er ikke dekket her.
HTML-utgang:
img src = "/ path / to / image.webp" alt = "Alt Text" title = "Valgfri tittel" /> a href = "http://example.com" title = "Valgfri tittel"> Linktekst / a >
08. Lag lister
Det er to typer lister i HTML: bestilt (ol>) og uordnet (ul>). Bruk Markdown til å bruke tall for bestilte lister og stjerner (*) eller bindestreker (-) for uordnede lister.
Markdown-inngang:
1. Vare 1 2. Vare 2 * Første vare * Andre vare - Første vare - Andre vare
HTML-utdata:
ol> li> Item 1 / li> li> Item 2 / li> / ol> ul> li> First Item / li> li> Second Item / li> / ul> ul> li> First Item / li> li> Second Vare / li> / ul>
09. Legg til innebygd kode og kodeblokker
Når du jobber med kode i HTML, kan du enten inkludere den som et innebygd element ved hjelp av kode> koder; eller som en forhåndsformatert tekstblokk ved hjelp av pre> kode> kombinasjon.
I Markdown er disse elementene avgrenset ved hjelp av enten en enkelt backtick på hver side (`); eller ved å bruke en inngjerdet stil, som inkluderer tre backticks over og under kodeblokken (```).
Markdown-inngang:
Variabelen `numberOfPoints` holder spillerens poengsum. hvis player.wins {numberOfPoints + = 1}
HTML-utdata:
Koden> numberOfPoints / code> -variabelen holder spillerens poengsum. pre> code> if player.wins {numberOfPoints + = 1} / pre> / code>
10. Stil opp blockquotes
Blockquotes legges til i HTML ved hjelp av blockquote> stikkord. Bruk symbolet større enn i Markdown (>) før linjen.
Markdown-inngang:
> Dette er blockquoten min. >> Dette er en del av samme blockquote. > Dette er et nytt blockquote.
HTML-utgang:
blockquote> p> Dette er mitt blockquote./p> br> p> Dette er en del av samme blockquote./p> / blockquote> blockquote> p> Dette er et nytt blockquote. / p> / blockquote>
11. Bygg innebygd HTML
Det er tider når du trenger å lage et HTML-element som ikke støttes; for eksempel kan det hende du trenger en tabell> eller div> stikkord.
Hvis det er tilfelle, kan du blande Markdown og HTML, men det er noen begrensninger. For eksempel kan du ikke inkludere Markdown i HTML-koder på blokknivå.
