Markdowns enkla syntax gör det till ett utmärkt alternativ till HTML. Språket har alltid stött inbäddning av HTML, men nu kan du gå åt andra hållet och bädda in Markdown i HTML.

Med hjälp av ett enkelt bibliotek kan du vara värd för inbäddad Markdown på dina webbsidor och få den omvandlad till korrekt HTML i farten.

Vad gör md-block?

Din nuvarande process kan innebära att du skapar Markdown-filer för hand och sedan konverterar dem till HTML. Så här fungerar många moderna CMS-applikationer. Eller så kan du använda ett ramverk som Vinkel för att göra Markdown till sidor.

md-blockbiblioteket är inte strikt ett alternativ; istället uppfyller den ett lite annorlunda användningsfall. Den konverterar inline Markdown till motsvarande HTML. Du kan bädda in Markdown i dina HTML-filer och rendera den på klienten vid begäran.

Så här kan det se ut:

<html>
<huvud>...</head>
<kropp>
<md-block>
# Rubrik
Vissa *inbäddade* Markdown som 'md-block' kan konvertera åt dig!
</md-block>
</body>
</html>

Det är en bra idé att vänsterjustera din inbäddade Markdown-kod, utan några inledande indrag. Detta beror på att ledande blanksteg kan vara betydande i Markdown, till skillnad från HTML.

instagram viewer

Biblioteket introducerar sitt eget anpassade HTML-element, md-block. Även om detta element inte är det en del av HTML-standarden, detta är en giltig teknik. Webbkomponentstandarden (MDN) innehåller ett API som heter Custom Elements. Detta API stöder dynamisk registrering av anpassade element med JavaScript.

Innan du laddar md-block-biblioteket kommer den här sidan att återges på ett bekant sätt:

Naturligtvis kan du styla md-block-elementet så att det ser ut mer som det skulle göra i en textredigerare. Med förformaterat blanksteg och ett monospace-teckensnitt är det åtminstone lite lättare att läsa:

<stil>md-block { blanksteg: pre; font-family: monospace; }</style>

Du kanske vill ha den här typen av utdata om du skriver en handledning på Markdown. Det låter dig förklara Markdown-syntax samtidigt som du enkelt kan redigera ditt exempel på Markdown:

Men md-blocks partytrick är att konvertera den Markdown till slutlig HTML.

Även med standard webbläsarstilar visas innehållet nu precis som din vanliga HTML, även om du skickade det till webbläsaren som Markdown:

Hur man använder md-block

När du har lagt till md-block-biblioteket på din sida kan du skriva in din Markdown md-block element. Biblioteket formaterar sedan din Markdown automatiskt, och du kan fortsätta att bädda in Markdown efter behov.

Det finns dock några varianter på denna process.

Köp skriptet på distans eller installera det själv

Det enklaste sättet att komma igång är att referera till biblioteket från den officiella md-block-webbplatsen:

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

Detta kanske inte är det mest effektiva tillvägagångssättet, men det är definitivt det snabbaste. Lägg bara till den här koden till din huvud och din sida renderar automatiskt allt i ett md-block-element till HTML:

Du kan naturligtvis ladda ner den JavaScript-filen och vara värd för den på din egen webbplats. Eller så kan du installera den via npm:

npm Installera md-blockera

Markdown Blocks vs. Inline Markdown

Standardelementet, uppkallat efter själva biblioteket, är md-block. Men du kan också använda en md-span element för inline Markdown, till exempel text i mitten av en mening:

Användningsfallet för inline Markdown är förmodligen mindre vanligt, men du kan fortfarande använda det ändå:

<sid>Ett HTML-stycke som innehåller <md-span>*kursiv*</md-span> text.</s>

Hur man syntaxmarkerar Markdown-kodblock med prisma

Prisma är en syntax highlighter som Lea Verou, skapare av md-block, var med och skapade. Du kan använda den för att markera förformaterade kodblock på en webbsida, inklusive de som md-block genererar.

Så, med denna HTML:

<html>
<kropp>
<md-block>
```javascript
fungerafyrkant(siffra) {
lämna tillbaka nummer * nummer;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Du kommer att se snyggt formaterad kod med syntaktisk framhävning:

Dina möjligheter att skriva online har precis ökat

Hur du använder md-block är upp till dig, men det finns gott om potential för uppfinningsrika lösningar som använder det. Du kan använda det för att köra ett mycket lätt CMS för författare som är säkra på att använda Markdown, men inte HTML.

Markdown är ett perfekt språk för en allmän publik. Dess antagande av verktyg som Slack kommer sannolikt att öka användningen ytterligare.