La syntaxe simple de Markdown en fait une excellente alternative au HTML. Le langage a toujours pris en charge l'intégration de HTML, mais maintenant vous pouvez aller dans l'autre sens et intégrer Markdown dans HTML.

À l'aide d'une bibliothèque simple, vous pouvez héberger Markdown intégré dans vos pages Web et le convertir en HTML approprié à la volée.

Que fait md-block ?

Votre processus actuel peut impliquer la création manuelle de fichiers Markdown, puis leur conversion en HTML. C'est ainsi que fonctionnent de nombreuses applications CMS modernes. Ou vous pouvez utiliser un cadre comme Angular pour rendre Markdown dans les pages.

La bibliothèque md-block n'est pas strictement une alternative; au lieu de cela, il remplit un cas d'utilisation légèrement différent. Il convertit Markdown en ligne en son équivalent HTML. Vous pouvez intégrer Markdown dans vos fichiers HTML et le rendre sur le client, au moment de la demande.

Voici à quoi cela pourrait ressembler :

<html>
<tête>...</head>
<corps





instagram viewer


>
<bloc md>
# En-tête
Certains Markdown *intégrés* que `md-block` peut convertir pour vous !
</md-block>
</body>
</html>

C'est une bonne idée d'aligner à gauche votre code Markdown intégré, sans aucune indentation de début. En effet, les espaces blancs de tête peuvent être importants dans Markdown, contrairement à HTML.

La bibliothèque introduit son propre élément HTML personnalisé, bloc md. Bien que cet élément ne soit pas partie de la norme HTML, c'est une technique valide. La norme des composants Web (MDN) inclut une API appelée Custom Elements. Cette API prend en charge l'enregistrement dynamique des éléments personnalisés à l'aide de JavaScript.

Avant de charger la bibliothèque md-block, cette page s'affichera de manière familière :

Bien sûr, vous pouvez styliser l'élément md-block afin qu'il ressemble davantage à celui d'un éditeur de texte. Avec des espaces blancs préformatés et une police à espacement fixe, c'est au moins un peu plus facile à lire :

<style>md-block { espace blanc: pré; famille de polices: monospace; }</style>

Vous voudrez peut-être ce type de sortie si vous écrivez un tutoriel sur Markdown. Il vous permet d'expliquer la syntaxe de Markdown tout en vous permettant de modifier facilement votre exemple de Markdown :

Mais l'astuce de md-block consiste à convertir ce Markdown en HTML final.

Même avec les styles de navigateur par défaut, le contenu s'affiche désormais comme votre HTML habituel, même si vous l'avez envoyé au navigateur en tant que Markdown :

Comment utiliser md-block

Une fois que vous avez ajouté la bibliothèque md-block à votre page, vous pouvez écrire votre Markdown dans bloc md éléments. La bibliothèque formatera alors automatiquement votre Markdown et vous pourrez continuer à intégrer Markdown selon vos besoins.

Il existe cependant quelques variantes de ce processus.

Sourcez le script à distance ou installez-le vous-même

Le moyen le plus simple de commencer est de référencer la bibliothèque à partir du site Web officiel de md-block :

<type de script="module" source="https://md-block.verou.me/md-block.js"></script>

Ce n'est peut-être pas l'approche la plus efficace, mais c'est certainement la plus rapide. Ajoutez simplement ce code à votre tête et votre page affichera automatiquement tout ce qui se trouve dans un élément md-block en HTML :

Vous pouvez, bien sûr, télécharger ce fichier JavaScript et l'héberger sur votre propre site. Ou vous pouvez l'installer via npm :

npm installer Maryland-bloquer

Blocs Markdown vs. Markdown en ligne

L'élément par défaut, nommé d'après la bibliothèque elle-même, est bloc md. Mais vous pouvez aussi utiliser un md-span élément pour Markdown en ligne, tel que du texte au milieu d'une phrase :

Le cas d'utilisation du Markdown en ligne est probablement moins courant, mais vous pouvez néanmoins l'utiliser :

<p>Un paragraphe HTML contenant <md-span>*italique*</md-span> texte.</p>

Comment mettre en évidence la syntaxe des blocs de code Markdown avec Prism

Prisme est un surligneur de syntaxe que Léa Verou, créatrice de md-block, a co-créé. Vous pouvez l'utiliser pour mettre en évidence des blocs de code préformatés dans une page Web, y compris ceux générés par md-block.

Donc, avec ce HTML :

<html>
<corps>
<bloc md>
```javascript
fonctioncarré(Numéro) {
revenir nombre * nombre ;
}
```
</md-block>
<script src="prisme.js"></script>
</body>
</html>

Vous verrez un code bien formaté avec une mise en évidence syntaxique :

Vos options pour écrire en ligne viennent d'augmenter

La façon dont vous utilisez md-block dépend de vous, mais il y a beaucoup de potentiel pour des solutions inventives qui l'utilisent. Vous pouvez l'utiliser pour exécuter un CMS très léger pour les rédacteurs qui utilisent à l'aise Markdown, mais pas HTML.

Markdown est un langage parfait pour un public général. Son adoption par des outils comme Slack augmentera probablement encore plus l'utilisation.