# Quelques trucs et astuces pour écrire des articles Docusaurus > Boostez vos articles Docusaurus avec quelques astuces essentielles. Apprenez à ajouter des Admonitions, à appliquer du style inline et à mettre en évidence des lignes de code. ---  **TL;DR** Cet article est un pense-bête des fonctionnalités d'écriture essentielles de Docusaurus : le marqueur `truncate` pour les aperçus d'articles de blog, les admonitions pour les encadrés, le style inline avec ``, un composant `Highlight` personnalisé pour du texte coloré, et `// highlight-next-line` pour attirer l'attention sur les lignes modifiées dans un bloc de code. Si vous écrivez pour Docusaurus, il y a quelques astuces à connaître. Cet article est loin d'être exhaustif mais, pour moi, c'est un rappel des fonctionnalités vraiment essentielles à ne pas oublier. *Deux autres habitudes d'écriture à adopter tôt : garder vos [tags sous contrôle](/blog/docusaurus-tags) et [afficher les articles liés](/blog/docusaurus-relatedposts) sous chaque article.* ## Lire la suite {#read-more} [Documentation officielle](https://docusaurus.io/docs/blog#blog-list) En mode blog, votre article est divisé en deux parties : l'introduction avec un lien *Lire la suite*, puis le corps de l'article. Pour activer cette fonctionnalité, il suffit d'ajouter la ligne `` (précédée et suivie d'une ligne vide) là où vous souhaitez séparer l'introduction du corps. Si vous allez sur ma page [blog](/blog), chaque article a une introduction suivie d'une ligne `` dans ma source Markdown. ## Admonitions {#admonitions} [Documentation officielle](https://docusaurus.io/docs/markdown-features/admonitions) Sert à mettre en évidence un paragraphe de votre document, par exemple un encadré *Attention à...* ou *Astuce : saviez-vous que...*. ```markdown Never give your bank card code to a stranger. ``` Sera affiché par Docusaurus comme ceci : > **Attention à...:** > > Ne donnez jamais le code de votre carte bancaire à un inconnu. ## Style inline {#inline-style} Docusaurus supporte le style inline grâce à la notation ` ... `. La notation `I'm written in blue` donnera je suis écrit en bleu. Utilisé de temps en temps, c'est une manière très simple de changer le style d'un contenu sur votre page. ### Le composant Highlight {#highlight-component} Si votre ambition est de surligner du texte, il y a une meilleure solution : le **composant Highlight**. Créez le fichier `src/components/Highlight/index.tsx` : **src/components/Highlight/index.tsx** ```typescript /** * Highlight Component * * A simple React component used to emphasize inline content with a custom background color. * Typically used in blog posts or documentation pages within a Docusaurus site. * * Example usage: * Important note */ import type { JSX, ReactNode } from "react"; interface Props { children: ReactNode; color: string; } export default function Highlight({ children, color }: Props): JSX.Element { return ( {children} ); } ``` Éditez ensuite (ou créez) le fichier `src/theme/MDXComponents.js`. Si le fichier existe déjà, ajoutez simplement les lignes surlignées ci-dessous. S'il n'existe pas encore, créez-le avec le contenu ci-dessous : **src/theme/MDXComponents.js** ```javascript import React from "react"; import MDXComponents from "@theme-original/MDXComponents"; // [...] // highlight-next-line import Highlight from "@src/components/Highlight"; export default { // Reusing the default mapping ...MDXComponents, // [...] // highlight-next-line Highlight }; ``` Le **vert Docusaurus** et le **bleu Facebook** sont mes couleurs préférées. Source : [MDX and React](https://docusaurus.io/docs/markdown-features/react#exporting-components) ## Mettre des lignes en évidence {#highlight-lines} [Documentation officielle](https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting) `// highlight-next-line` est **vraiment** utile quand vous voulez mettre en évidence les modifications que vous avez faites dans un bloc de code. *Quand le code vit dans un vrai fichier plutôt qu'en inline, j'utilise mon propre [composant de snippets de code](/blog/docusaurus-snippets), qui lit le fichier au moment du build : l'article ne peut donc jamais être désynchronisé.* Imaginez que vous avez déjà écrit quelque chose comme *Cher lecteur, créez un fichier sur votre disque avec ce contenu...* et que vous fournissez un bloc de code avec ce contenu. Plus loin dans votre article, vous demandez *éditez le fichier et faites ceci, ajoutez telle et telle ligne, ici et là*. Avec `// highlight-next-line`, il est très facile de mettre les changements en évidence, par exemple : **compose.yaml** ```yaml name: kingsbridge services: joomla: image: joomla restart: always ports: - 8080:80 environment: - JOOMLA_DB_HOST=joomladb - JOOMLA_DB_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./site_joomla:/var/www/html joomladb: image: mysql:8.0.13 restart: always environment: - MYSQL_ROOT_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./db:/var/lib/mysql ``` Vous voyez immédiatement où j'ai fait des modifications dans le contenu du fichier.