|
| 1 | +--- |
| 2 | +i18nReady: true |
| 3 | +title: "Markdown Remark" |
| 4 | +type: integration |
| 5 | +catalogEntry: studiocms-markdown-remark |
| 6 | +description: "Découvrez le paquet @studiocms/markdown-remark" |
| 7 | +tableOfContents: |
| 8 | + minHeadingLevel: 2 |
| 9 | + maxHeadingLevel: 4 |
| 10 | +--- |
| 11 | + |
| 12 | +import { Aside } from '@astrojs/starlight/components' |
| 13 | +import { PackageManagers } from 'starlight-package-managers' |
| 14 | +import Integration from '~/components/Integration.astro' |
| 15 | +import ReadMore from '~/components/ReadMore.astro' |
| 16 | + |
| 17 | +## L'intégration |
| 18 | + |
| 19 | +`@studiocms/markdown-remark` est un puissant analyseur et transformateur Markdown construit à l'aide de [remark](https://github.com/remarkjs/remark). Il s'intègre parfaitement à [Astro](https://astro.build/), vous permettant ainsi d'analyser et de transformer facilement le contenu Markdown au sein de vos projets Astro. |
| 20 | + |
| 21 | +Ce projet repose fortement sur le paquet intégré `@astrojs/markdown-remark` d'Astro et est compatible avec celui-ci, étendant ses capacités pour mieux répondre aux besoins des utilisateurs de StudioCMS. |
| 22 | + |
| 23 | +### Fonctionnalités |
| 24 | + |
| 25 | +- **Analyse Markdown** : Analyser le contenu Markdown en un arbre de syntaxe abstraite (AST) à l’aide de remark. |
| 26 | +- **Intégration Astro** : Facilement intégrer avec Astro pour transformer le contenu Markdown en HTML. |
| 27 | +- **Modules d'extension personnalisés** : Étendez les fonctionnalités grâce à des modules d'extension remark personnalisés. |
| 28 | +- **Configurable** : Hautement configurable pour répondre à vos besoins spécifiques. |
| 29 | + |
| 30 | +### Installation |
| 31 | + |
| 32 | +Pour installer `@studiocms/markdown-remark`, utilisez votre gestionnaire de paquets préféré : |
| 33 | + |
| 34 | +<PackageManagers pkg="astro" type='run' args='add @studiocms/markdown-remark' /> |
| 35 | + |
| 36 | +Ou installez-le **manuellement** : |
| 37 | + |
| 38 | +<PackageManagers type="add" pkg="@studiocms/markdown-remark" /> |
| 39 | + |
| 40 | +### Utilisation |
| 41 | + |
| 42 | +#### En tant qu'intégration Astro |
| 43 | + |
| 44 | +Avec l'intégration Astro activée, vous pouvez soit transmettre des composants personnalisés à votre configuration Astro, soit les définir manuellement pour le rendu spécifique que vous souhaitez effectuer, comme indiqué dans les méthodes suivantes. |
| 45 | + |
| 46 | +##### Configurer l'intégration |
| 47 | + |
| 48 | +**`astro.config.mjs`** |
| 49 | + |
| 50 | +```ts |
| 51 | +import markdownRemark from '@studiocms/markdown-remark'; |
| 52 | +import { defineConfig } from 'astro/config'; |
| 53 | + |
| 54 | +export default defineConfig({ |
| 55 | + markdown: { |
| 56 | + /* |
| 57 | + * Vos personnalisations ici basées sur : |
| 58 | + * https://docs.astro.build/fr/reference/configuration-reference/#options-de-markdown |
| 59 | + */ |
| 60 | + }, |
| 61 | + integrations: [markdownRemark({ |
| 62 | + // Utilisé pour injecter du CSS dans les titres et les encarts. |
| 63 | + injectCSS: true, |
| 64 | + // Composants définis par l'utilisateur qui seront utilisés lors du traitement de Markdown |
| 65 | + components: { |
| 66 | + // Exemple de composant personnalisé |
| 67 | + custom: "./src/components/Custom.astro", |
| 68 | + }, |
| 69 | + // Configuration Markdown personnalisée |
| 70 | + markdown: { |
| 71 | + // Configurer les thèmes d'encarts disponibles |
| 72 | + callouts: { |
| 73 | + theme: 'obsidian' // Peut également être `github` ou `vitepress`. |
| 74 | + }, |
| 75 | + autoLinkHeadings: true, |
| 76 | + sanitize: {} // consultez https://github.com/natemoo-re/ultrahtml?tab=readme-ov-file#sanitization pour connaître toutes les options |
| 77 | + } |
| 78 | + })], |
| 79 | +}); |
| 80 | +``` |
| 81 | + |
| 82 | +##### Utiliser l'intégration |
| 83 | + |
| 84 | +**`src/pages/index.astro`** |
| 85 | + |
| 86 | +```astro |
| 87 | +--- |
| 88 | +import { Markdown } from 'studiocms:markdown-remark'; |
| 89 | +import Custom from '../components/Custom.astro'; |
| 90 | +--- |
| 91 | +<html> |
| 92 | + <head> |
| 93 | + <meta charset="utf-8" /> |
| 94 | + <meta name="viewport" content="width=device-width" /> |
| 95 | + <title>Exemple</title> |
| 96 | + </head> |
| 97 | + <body> |
| 98 | + <Markdown content={`# Hello World! <custom></custom>`} components={{ custom: Custom }} /> |
| 99 | + </body> |
| 100 | +</html> |
| 101 | +``` |
| 102 | + |
| 103 | +OU |
| 104 | + |
| 105 | +```astro |
| 106 | +--- |
| 107 | +import { render } from 'studiocms:markdown-remark'; |
| 108 | +import Custom from '../components/Custom.astro'; |
| 109 | +
|
| 110 | +// @ts-ignore |
| 111 | +const { html } = await render('# Hello World! <custom></custom>', {}, { $$result, components: {custom: Custom} }) |
| 112 | +--- |
| 113 | +<html> |
| 114 | + <head> |
| 115 | + <meta charset="utf-8" /> |
| 116 | + <meta name="viewport" content="width=device-width" /> |
| 117 | + <title>Exemple</title> |
| 118 | + </head> |
| 119 | + <body> |
| 120 | + {html} |
| 121 | + </body> |
| 122 | +</html> |
| 123 | +``` |
| 124 | + |
| 125 | +#### Utilisation directe du composant Markdown sans l'intégration |
| 126 | + |
| 127 | +**`src/pages/index.astro`** |
| 128 | + |
| 129 | +```astro |
| 130 | +--- |
| 131 | +import { Markdown } from '@studiocms/markdown-remark/components'; |
| 132 | +import H1 from '../components/H1.astro'; |
| 133 | +--- |
| 134 | +<html> |
| 135 | + <head> |
| 136 | + <meta charset="utf-8" /> |
| 137 | + <meta name="viewport" content="width=device-width" /> |
| 138 | + <title>Exemple</title> |
| 139 | + </head> |
| 140 | + <body> |
| 141 | + <Markdown content={`# Hello world!`} components={{ h1: H1 }} /> |
| 142 | + </body> |
| 143 | +</html> |
| 144 | +``` |
| 145 | + |
| 146 | +## Le processeur |
| 147 | + |
| 148 | +<Integration title="@studiocms/markdown-remark-processor" githubURL='https://github.com/withstudiocms/markdown-remark/tree/main/packages/markdown-remark-processor/' /> |
| 149 | + |
| 150 | +`@studiocms/markdown-remark-processor` est un puissant analyseur et transformateur Markdown reposant sur [remark](https://github.com/remarkjs/remark). Il offre une intégration transparente avec [Astro](https://astro.build/), vous permettant d'analyser et de transformer facilement le contenu Markdown dans vos projets Astro. |
| 151 | + |
| 152 | +Ce projet est fortement basé sur et compatible avec le module intégré `@astrojs/markdown-remark` d'Astro. |
| 153 | + |
| 154 | +### Fonctionnalités |
| 155 | + |
| 156 | +- **Analyse Markdown** : Analyser le contenu Markdown en un arbre de syntaxe abstraite (AST) à l’aide de remark. |
| 157 | +- **Modules d'extension personnalisés** : Étendez les fonctionnalités grâce à des modules d'extension remark personnalisés. |
| 158 | +- **Configurable** : Hautement configurable pour répondre à vos besoins spécifiques. |
| 159 | + |
| 160 | +### Installation |
| 161 | + |
| 162 | +Pour installer `@studiocms/markdown-remark-processor`, utilisez votre gestionnaire de paquets préféré : |
| 163 | + |
| 164 | +<PackageManagers type="add" pkg="@studiocms/markdown-remark-processor" /> |
| 165 | + |
| 166 | +### Utilisation |
| 167 | + |
| 168 | +Commencez par configurer votre fonction de rendu. |
| 169 | + |
| 170 | +**`src/utils/render.ts`** |
| 171 | + |
| 172 | +```ts |
| 173 | +import { type MarkdownProcessorRenderOptions, createMarkdownProcessor } from '@studiocms/markdown-remark-processor'; |
| 174 | + |
| 175 | +const processor = await createMarkdownProcessor({ |
| 176 | + /* |
| 177 | + * Vos options ici |
| 178 | + * identique à https://docs.astro.build/fr/reference/configuration-reference/#options-de-markdown |
| 179 | + */ |
| 180 | +}); |
| 181 | + |
| 182 | +export async function render( |
| 183 | + content: string, |
| 184 | + options?: MarkdownProcessorRenderOptions |
| 185 | +) { |
| 186 | + const result = await processor.render(content, options); |
| 187 | + |
| 188 | + return { |
| 189 | + html: result.astroHTML, |
| 190 | + meta: result.metadata, |
| 191 | + }; |
| 192 | +} |
| 193 | +``` |
| 194 | + |
| 195 | +Puis utilisez-le ! |
| 196 | + |
| 197 | +**`/src/pages/index.astro`** |
| 198 | +```astro |
| 199 | +--- |
| 200 | +import { render } from '../utils/render'; |
| 201 | +
|
| 202 | +const content = `# Hello world!` |
| 203 | +
|
| 204 | +const { html } = await render(content) |
| 205 | +--- |
| 206 | +<html> |
| 207 | + <head> |
| 208 | + <meta charset="utf-8" /> |
| 209 | + <meta name="viewport" content="width=device-width" /> |
| 210 | + <title>Exemple</title> |
| 211 | + </head> |
| 212 | + <body> |
| 213 | + {html} |
| 214 | + </body> |
| 215 | +</html> |
| 216 | +``` |
0 commit comments