Extension : rendu de Markdown

Django-DSFR inclut une extension Markdown qui permet de réaliser le rendu de Markdown en HTML spécialisé pour le DSFR, incluant par exemple les tableaux, des mises en exergue, etc.

Ce rendu de Markdown s’effectue à l’aide du template filter dsfr_md.

Pré-requis

Installation d’un groupe de dépendances spécifique à cette extension via l’instruction d’installation suivante dans le pyproject.toml : 

"django-dsfr[markdown]",

Utilisation

Dans un template Django :

{% load dsfr_md_tags %}
{{ mon_contenu_markdown|dsfr_md }}

Exemples

Classe personnalisée

Le document Markdown suivant :

#### Titre 4 affiché comme titre 6 {: .fr-h6 }

Sera rendu :

Titre 4 affiché comme titre 6


          
            <h4 class="fr-h6">Titre 4 affiché comme titre 6</h4>

Lien externe

Le document Markdown suivant :

Texte contenant [un lien vers un autre site](https://www.systeme-de-design.gouv.fr/)

Sera rendu :

Texte contenant un lien vers un autre site


          
            <p>Texte contenant <a href="https://www.systeme-de-design.gouv.fr/" rel="noopener external" target="_blank" title="un lien vers un autre site - nouvelle fenêtre">un lien vers un autre site</a></p>

Mise en exergue

Le document Markdown suivant :

!! note ""
    Texte de la mise en exergue.

Sera rendu :

Texte de la mise en exergue.


          
            <div class="fr-highlight note">
<p>Texte de la mise en exergue.</p>
</div>

Mise en avant minimale

Le document Markdown suivant :

!!! note ""
    Texte de la mise en avant.

Sera rendu :

Texte de la mise en avant.


          
            <div class="fr-callout note">
<p class="fr-callout__text">Texte de la mise en avant.</p>
</div>

Mise en avant avec titre

Le document Markdown suivant :

!!! note "Attention !"
    Texte de la mise en avant.

Sera rendu :

Attention !

Texte de la mise en avant.


          
            <div class="fr-callout note">
<p class="fr-callout__title">Attention !</p>
<p class="fr-callout__text">Texte de la mise en avant.</p>
</div>

Mise en avant avec titre et icône

Le document Markdown suivant :

!!! warning-line "Attention !"
    Texte de la mise en avant.

Sera rendu :

Attention !

Texte de la mise en avant.


          
            <div class="fr-callout fr-icon-warning-line">
<p class="fr-callout__title">Attention !</p>
<p class="fr-callout__text">Texte de la mise en avant.</p>
</div>

Citation

Le document Markdown suivant :

> Texte d’une citation…
qui peut être sur plusieurs lignes.

Jusqu’à la prochaine ligne vide.

Sera rendu :

Texte d’une citation…
qui peut être sur plusieurs lignes.

Jusqu’à la prochaine ligne vide.


          
            <figure class="fr-quote">
<blockquote>
<p>Texte d’une citation…<br />
qui peut être sur plusieurs lignes.</p>
</blockquote>
</figure>
<p>Jusqu’à la prochaine ligne vide.</p>

Tableau simple

Le document Markdown suivant :


    | Colonne 1          | Colonne 2          |
    |--------------------|--------------------|
    | Ligne 1, colonne 1 | Ligne 1, colonne 2 |
    | Ligne 2, colonne 1 | Ligne 2, colonne 2 |

Sera rendu :

Colonne 1 Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2 

          
            <div class="fr-table">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne 1, colonne 1</td>
<td>Ligne 1, colonne 2</td>
</tr>
<tr>
<td>Ligne 2, colonne 1</td>
<td>Ligne 2, colonne 2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Document complet avec table des matières

Le document Markdown suivant :

[TOC]
# Titre de niveau 1

Contenu *avec* de la **mise en forme** et même un lien vers [la doc de django-dsfr](https://numerique-gouv.github.io/django-dsfr/).

## Titre de niveau 2 affiché comme niveau 6 {: .fr-h6 }

Liste à puces :

- Premier élément ;
- Second élément.

# Titre de niveau 1 à nouveau

## Démo de mise en avant

!!! warning-line "Attention !"
    Contenu de la mise en avant

## Démo de mise en exergue

!! note
    Contenu de la mise en exergue

## Démo de citation

> Texte d’une citation…
qui peut être sur plusieurs lignes.

Jusqu’à la prochaine ligne vide.

## Démo de tableau

| Colonne 1          | Colonne 2          |
|--------------------|--------------------|
| Ligne 1, colonne 1 | Ligne 1, colonne 2 |
| Ligne 2, colonne 1 | Ligne 2, colonne 2 |

Sera rendu :

Titre de niveau 1

Contenu avec de la mise en forme et même un lien vers la doc de django-dsfr.

Titre de niveau 2 affiché comme niveau 6

Liste à puces :

  • Premier élément ;
  • Second élément.

Titre de niveau 1 à nouveau

Démo de mise en avant

Attention !

Contenu de la mise en avant

Démo de mise en exergue

Contenu de la mise en exergue

Démo de citation

Texte d’une citation…
qui peut être sur plusieurs lignes.

Jusqu’à la prochaine ligne vide.

Démo de tableau

Colonne 1 Colonne 2
Ligne 1, colonne 1 Ligne 1, colonne 2
Ligne 2, colonne 1 Ligne 2, colonne 2 

          
            <nav aria-labelledby="fr-summary-title" class="fr-summary" role="navigation"><h2 class="fr-summary__title" id="fr-summary-title">Sommaire</h2><ol>
<li><a class="fr-summary__link" href="#titre-de-niveau-1">Titre de niveau 1</a><ol>
<li><a class="fr-summary__link" href="#titre-de-niveau-2-affiche-comme-niveau-6">Titre de niveau 2 affiché comme niveau 6</a></li>
</ol>
</li>
<li><a class="fr-summary__link" href="#titre-de-niveau-1-a-nouveau">Titre de niveau 1 à nouveau</a><ol>
<li><a class="fr-summary__link" href="#demo-de-mise-en-avant">Démo de mise en avant</a></li>
<li><a class="fr-summary__link" href="#demo-de-mise-en-exergue">Démo de mise en exergue</a></li>
<li><a class="fr-summary__link" href="#demo-de-citation">Démo de citation</a></li>
<li><a class="fr-summary__link" href="#demo-de-tableau">Démo de tableau</a></li>
</ol>
</li>
</ol>
</nav>
<h1 id="titre-de-niveau-1">Titre de niveau 1</h1>
<p>Contenu <em>avec</em> de la <strong>mise en forme</strong> et même un lien vers <a href="https://numerique-gouv.github.io/django-dsfr/" rel="noopener external" target="_blank" title="la doc de django-dsfr - nouvelle fenêtre">la doc de django-dsfr</a>.</p>
<h2 class="fr-h6" id="titre-de-niveau-2-affiche-comme-niveau-6">Titre de niveau 2 affiché comme niveau 6</h2>
<p>Liste à puces :</p>
<ul>
<li>Premier élément ;</li>
<li>Second élément.</li>
</ul>
<h1 id="titre-de-niveau-1-a-nouveau">Titre de niveau 1 à nouveau</h1>
<h2 id="demo-de-mise-en-avant">Démo de mise en avant</h2>
<div class="fr-callout fr-icon-warning-line">
<p class="fr-callout__title">Attention !</p>
<p class="fr-callout__text">Contenu de la mise en avant</p>
</div>
<h2 id="demo-de-mise-en-exergue">Démo de mise en exergue</h2>
<div class="fr-highlight note">
<p>Contenu de la mise en exergue</p>
</div>
<h2 id="demo-de-citation">Démo de citation</h2>
<figure class="fr-quote">
<blockquote>
<p>Texte d’une citation…<br />
qui peut être sur plusieurs lignes.</p>
</blockquote>
</figure>
<p>Jusqu’à la prochaine ligne vide.</p>
<h2 id="demo-de-tableau">Démo de tableau</h2>
<div class="fr-table">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne 1, colonne 1</td>
<td>Ligne 1, colonne 2</td>
</tr>
<tr>
<td>Ligne 2, colonne 1</td>
<td>Ligne 2, colonne 2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>