Le langage Markdown est intéressant pour faciliter la mise en forme de texte. Il a l'avantage d'être léger donc plus facile à manipuler par des personnes qui ne sont pas familières avec le HTML.
J'aime l'utiliser, par exemple, sur un site pour lequel plusieurs usagers doivent entrer du texte formatté. Si j'utilisais un éditeur wysiwyg pour permettre aux usagers de formatter le texte avec du HTML, j'aurais assurément plusieurs appels pour les aider à parvenir à leurs fins puisque tôt ou tard, il faudra ouvrir le code HTML pour remettre le tout en forme.
Avec Markdown, il y a moins de problèmes potentiels puisque les possibilités sont limitées à ce que l'usager aura à utiliser.
Le paquet andreasindal/laravel-markdown est un enrobage alentour du fameux Showdown, un outil qui permet de convertir les balises Markdown en balises HTML.
Pour l'installer :
composer require andreasindal/laravel-markdown
Cette instruction installera le paquet showdownjs/showdown dans le dossier vendor de votre projet, ajoutera la référence nécessaire dans le fichier composer.json puis ajoutera les instructions nécessaires pour qu'une nouvelle directive Blade soit disponible.
Vous aurez désormais accès à une nouvelle directive Blade :
<div id="instructions">
@markdown($appareil->instructions)
</div>
Si le champ instructions contient le texte suivant :
# Instructions
* Étape 1
* Étape 2
+ Étape 2.1
+ Étape 2.2
* Étape 3
Voici le code HTML qui sera généré :
<h3>Instructions</h3>
<ul>
<li>Étape 1</li>
<li>Étape 2
<ul>
<li>Étape 2.1</li>
<li>Étape 2.2</li>
</ul>
</li>
<li>Étape 3</li>
Pour une démonstration des balises Markdown gérées par Showdown : http://demo.showdownjs.com/.
Il est également possible d'utiliser Showdown côté client à l'aide d'une instruction JavaScript.
Vous aurez besoin pour celà d'installer le paquet showdownjs/twitter-extension :
npm install showdown-twitter
Puisque les deux installations que vous avez faites (Showdown et Twitter extension for Showdown) ont installé des fichiers dans le dossier node_modules de votre projet (disponible seulement côté serveur), vous devez copier certains fichiers ailleurs pour les rendre disponibles côté client.
Les fichiers à copier sont les suivants :
Ces fichiers seront copiés :
Intégrez ces fichiers à votre projet :
Prenons l'exemple d'un fichier Blade qui affiche une médiagraphie formattée avec du Markdown :
<div id="instuctions">
{{ $appareil->instructions }}
</div>
La conversion du Markdown en HTML se fera comme suit :
$(function() {
var converter = new showdown.Converter({ extensions: ['twitter'] });
var conversion = converter.makeHtml($('#instructions').html());
$('#instructions').html(conversion);
});
Il est également possible de traiter d'un coup toutes les balises Markdown.
Pour y arriver, commencez par marquer les balises qui contiennent du code Markdown. Par exemple, entourez-les par une division dont la classe est "markdown".
Ex :
<div id="instructions" class="markdown">
{{ $appareil->instructions }}
</div>
Une petite boucle permettra de tout convertir d'un coup :
$(function() {
var converter = new showdown.Converter({ extensions: ['twitter'] });
$('.markdown').each(function() {
var conversion = converter.makeHtml($(this).html());
$(this).html(conversion);
});
});
▼Publicité
