Blocs de code

Le DSML intègre un composant de rendu de code source avec coloration syntaxique, copie en un clic et support multi-langages.

Présentation

Le composant bloc de code est conçu pour afficher des extraits de code de manière lisible et accessible. Il propose automatiquement la coloration syntaxique (via Shiki), un bouton de copie et un indicateur de langage.

Utilisation (Astro)

Dans les pages Astro du site de documentation, importez et utilisez le composant CodeBlock :

    
ma-page.astroASTRO

---
import CodeBlock from '../../components/CodeBlock.astro';
---

<CodeBlock
  code='<button class="ml-btn ml-btn-primary">Valider</button>'
  lang="html"
/>

<!-- With displayed filename -->
<CodeBlock
  code='<link rel="stylesheet" href="/dsml/css/dsml.css">'
  lang="html"
  filename="index.html"
/>

Propriétés

Prop	Type	Défaut	Description
`code`	string	`—`	Le code source à afficher (obligatoire)
`lang`	string	`"html"`	Langage pour la coloration syntaxique
`filename`	string	`""`	Nom de fichier affiché dans l'en-tête (optionnel)

Langages supportés

Le composant supporte tous les langages de Shiki. Les plus courants pour le DSML :

html

css

javascript

typescript

astro

json

bash

text

Exemples par langage

HTML

    
HTML

<div class="ml-card ml-card-hover">
  <div class="ml-card-body">
    <h3 class="ml-title-3">Titre de la carte</h3>
    <p class="ml-body-compact">Description courte du contenu.</p>
    <a href="/detail" class="ml-btn ml-btn-primary ml-btn-sm">Lire la suite</a>
  </div>
</div>

CSS

CSS

.mon-section {
  padding: var(--ml-space-8) var(--ml-space-4);
  background: var(--ml-color-green-50);
  border-radius: var(--ml-radius-l);
  font-family: var(--ml-font-body);
}

JavaScript

    
JAVASCRIPT

// Ouvrir un accordéon programmatiquement
const btn = document.querySelector('.ml-accordion-btn');
btn.setAttribute('aria-expanded', 'true');
btn.nextElementSibling.hidden = false;

Bash (installation)

    
BASH

# Via CDN — aucune installation requise
<link rel="stylesheet" href="https://cdn.mali.gov.ml/dsml/css/dsml.css">

# Ou en copiant le dossier core/ dans votre projet
cp -r dsml/core/ mon-projet/vendor/dsml/

Usage en HTML pur (sans Astro)

En dehors du site de documentation, le DSML propose une classe CSS .ml-code-block pour styliser des balises <pre><code> nativement. Aucun JavaScript n'est requis.

    
HTML

<pre class="ml-code-block">
<code class="language-html">&lt;button class="ml-btn ml-btn-primary"&gt;
  Valider
&lt;/button&gt;</code>
</pre>

La coloration syntaxique dans le HTML pur n'est pas incluse dans le DSML de base. Pour l'activer, intégrez une bibliothèque légère comme Highlight.js ou Prism.js en parallèle.