Astro et la coloration syntaxique

  Astro

Introduction

En tant que développeur, la coloration syntaxique des blocs de code est essentielle pour une meilleure lisibilité. Astro est un framework de développement web moderne, qui intègre nativement cette fonctionnalité. Je vais vous guider pour afficher des blocs de code avancés dans vos fichiers markdown et vos composants, avec un minimum de configuration.

Markdown : Exemples de base

Voici comment afficher un bloc de code markdown, il faut utiliser 4 caractères backticks, suivi du language markdown (````markdown) :

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

Vous pouvez constater qu’il n’y a pas de coloration syntaxique vu que le contenu est au format markdown.

Pour afficher un bloc de code HTML, il faut utiliser 3 caractères backticks, suivi du language (```html) :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Astro supporte une vaste gamme de langages pour les blocs de code et permet des modifications de thème via le fichier astro.config.mjs. Nous aborderons ces configurations sous peu.

Intégration avec Shiki et Astro Config

Astro utilise Shiki pour la coloration syntaxique, une bibliothèque développée par Anthony Fu. Elle permet une personnalisation poussée dans le fichier astro.config.mjs, comme changer de thème de coloration pour le mode clair ou sombre, ou ajuster la prise en charge de langages spécifiques.

Voici comment configurer Shiki dans Astro :

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import { transformerNotationDiff } from "@shikijs/transformers";

export default defineConfig({
  site: "https://example.com",
  integrations: [mdx(), sitemap()],
  markdown: {
    shikiConfig: {
      theme: "github-dark", // plusieurs thèmes sont disponibles 
      transformers: [transformerNotationDiff()], // utilisé pour mettre en valeur les lignes supprimés ou ajoutées
    },
  },
});

Transformation avec Shiki

Pour mettre en valeur des lignes ajoutées ou supprimées dans vos codes, Astro permet l’utilisation de transformers Shiki. Après avoir installé la libibrairie @shikijs/transformers, vous pouvez configurer votre projet pour marquer visuellement ces changements :

```javascript
const example = "Hello, Astro!";

function foo() {

  console.log(example); 
} 

foo(); 
```

En utilisant le commentaire [!code ++] et [!code --], dans le code, Astro affichera des classes css additionnels add et remove dans les blocs de code.

Ensuite, il suffira d’ajouter quelques instructions CSS pour mettre en valeur ces changements :

article code .diff.add {
  background-color: rgba(16, 185, 129, 0.16);
}

article code .diff.remove {
  background-color: rgba(244, 63, 94, 0.16);
  opacity: 0.7;
}

article code .diff.remove:before {
  content: "-";
  color: #cb7676;
}

article code .diff.add:before {
  content: "+";
  color: #3dd68c;
}

Numérotation des lignes

Si vous souhaitez afficher le numéro des lignes dans les blocs de code, vous pouvez ajouter les instructions CSS suivantes :

article code {
  counter-reset: step;
}

article code .line {
  counter-increment: step;
}

.line::before {
  content: counter(step);
  width: 1rem;
  margin-right: 1.5rem;
  display: inline-block;
  text-align: right;
  color: rgba(115, 138, 148, 0.4);
}

Toutefois, il faudra bien penser à passer l’option wrap à false si vous l’avez activer dans le fichier astro.config.mjs :

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import { transformerNotationDiff } from "@shikijs/transformers";

export default defineConfig({
  site: "https://example.com",
  integrations: [mdx(), sitemap()],
  markdown: {
    shikiConfig: {
      theme: "github-dark",
      transformers: [transformerNotationDiff()],
      wrap: false, 
    },
  },
});

Exemples avec des composants Astro

Astro permet également d’afficher des blocs de code dans les composants. Par exemple, en important le composant <Code> et en lui passant les props nécessaires :

<Code code={`const example = "Hello, Astro!";`} lang="javascript" theme="dark" />

Cela produira le bloc de code suivant dans votre composant Astro :

const example = "Hello, Astro!";