Markdowns enkle syntaks gør det til et glimrende alternativ til HTML. Sproget har altid understøttet indlejring af HTML, men nu kan du gå den anden vej og indlejre Markdown i HTML.

Ved hjælp af et simpelt bibliotek kan du hoste indlejret Markdown på dine websider og få det konverteret til korrekt HTML i farten.

Hvad gør md-block?

Din nuværende proces kan involvere at oprette Markdown-filer i hånden og derefter konvertere dem til HTML. Sådan fungerer mange moderne CMS-applikationer. Eller du kan bruge en ramme som f.eks Kantet for at gøre Markdown til sider.

md-blok-biblioteket er strengt taget ikke et alternativ; i stedet opfylder den en lidt anden use case. Det konverterer inline Markdown til dets tilsvarende HTML. Du kan indlejre Markdown i dine HTML-filer og gengive den på klienten på anmodningstidspunktet.

Sådan kan det se ud:

<html>
<hoved>...</head>
<legeme>
<md-blok>
# Overskrift
Nogle *indlejrede* Markdown, som 'md-blok' kan konvertere for dig!
</md-block>
</body>
</html>

Det er en god idé at venstrejustere din indlejrede Markdown-kode uden nogen førende indrykning. Dette skyldes, at førende blanktegn kan være betydelige i Markdown, i modsætning til HTML.

instagram viewer

Biblioteket introducerer sit eget tilpassede HTML-element, md-blok. Selvom dette element ikke er det del af HTML-standarden, dette er en gyldig teknik. Web Components-standarden (MDN) inkluderer en API kaldet Custom Elements. Denne API understøtter dynamisk registrering af brugerdefinerede elementer ved hjælp af JavaScript.

Før indlæsning af md-blok-biblioteket, vil denne side gengives på en velkendt måde:

Selvfølgelig kan du style md-block-elementet, så det ser mere ud, som det ville i en teksteditor. Med forudformateret mellemrum og en monospace-skrifttype er det i det mindste en smule nemmere at læse:

<stil>md-blok { white-space: pre; font-family: monospace; }</style>

Du vil måske have denne form for output, hvis du skriver en tutorial på Markdown. Det giver dig mulighed for at forklare Markdown-syntaks, mens du nemt kan redigere dit eksempel på Markdown:

Men md-blocks festtrick er at konvertere den Markdown til endelig HTML.

Selv med standardbrowserstile vises indholdet nu ligesom din almindelige HTML, selvom du sendte det til browseren som Markdown:

Sådan bruges md-block

Når du har tilføjet md-blok-biblioteket til din side, kan du skrive din Markdown ind md-blok elementer. Biblioteket formaterer derefter din Markdown automatisk, og du kan fortsætte med at indlejre Markdown efter behov.

Der er dog et par variationer af denne proces.

Få scriptet eksternt eller installer det selv

Den nemmeste måde at komme i gang på er at henvise til biblioteket fra den officielle md-block hjemmeside:

<script type="modul" src="https://md-block.verou.me/md-block.js"></script>

Dette er måske ikke den mest effektive tilgang, men det er absolut den hurtigste. Bare tilføj denne kode til din hoved og din side vil automatisk gengive alt i et md-blok-element til HTML:

Du kan selvfølgelig downloade den JavaScript-fil og hoste den på dit eget websted. Eller du kan installere det via npm:

npm installere md-blok

Markdown Blocks vs. Inline Markdown

Standardelementet, opkaldt efter selve biblioteket, er md-blok. Men du kan også bruge en md-span element til inline Markdown, såsom tekst i midten af ​​en sætning:

Brugstilfældet for inline Markdown er sandsynligvis mindre almindeligt, men du kan stadig bruge det alligevel:

<s>Et HTML-afsnit, der indeholder <md-span>*kursiv*</md-span> tekst.</s>

Sådan syntakser du fremhæve Markdown-kodeblokke med prisme

Prisme er en syntaks highlighter, som Lea Verou, skaberen af ​​md-block, var med til at skabe. Du kan bruge den til at fremhæve præformaterede kodeblokke på en webside, inklusive dem, som md-block genererer.

Så med denne HTML:

<html>
<legeme>
<md-blok>
```javascript
fungerefirkant(nummer) {
Vend tilbage nummer * nummer;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Du vil se pænt formateret kode med syntaktisk bevidst fremhævning:

Dine muligheder for at skrive online er lige blevet større

Hvordan du bruger md-block er op til dig, men der er masser af potentiale for opfindsomme løsninger, der bruger det. Du kan bruge det til at køre et meget let CMS for forfattere, der er sikre på at bruge Markdown, men ikke HTML.

Markdown er et perfekt sprog for et generelt publikum. Dets vedtagelse af værktøjer som Slack vil højst sandsynligt øge brugen yderligere.