Fonctionnalités de Markdown

Docusaurus uses GitHub Flavored Markdown (GFM). En savoir plus sur les champs spécifiques de Docusaurus lors de l'écriture de Markdown.

En-têtes de Markdown

Documents

Documents use the following markdown header fields that are enclosed by a line --- on either side:

id: A unique document id. If this field is not present, the document's id will default to its file name (without the extension).
title: The title of your document. If this field is not present, the document's title will default to its id.
hide_title: Whether to hide the title at the top of the doc.
description: La description de votre document qui sera fournit dans <meta name="description" content="..."/> et <meta property="og:description" content="..."/> du <head>, utilisé par les moteurs de recherche. Si ce champ n'est pas présent, il sera par défaut à la première ligne du contenu.
sidebar_label: The text shown in the document sidebar and in the next/previous button for this document. If this field is not present, the document's sidebar_label will default to its title.

Par exemple :

---
id : doc1
titre : Mon Document
sidebar_label : Document
---

Versioned documents have their ids altered to include the version number when they get copied. The new id is version-${version}-${id} where ${version} is the version number of that document and ${id} is the original id. Additionally, versioned documents get an added original_id field with the original document id.

Par exemple :

---
id: version-1.0.0-doc1
title: Mon Document
sidebar_label: Document
original_id: doc1
---

custom_edit_url: L'url pour éditer le document. Si ce champ n'est pas présent, l'url du document va retournera editUrl depuis les champs optionnel de siteConfig.js. See siteConfig.js docs for more information.

Par exemple :

---
id: doc-markdown
title: Fonctionnalités de Markdown
custom_edit_url: https://github.com/facebook/docusaurus/edit/master/docs/api-doc-markdown.md
---

Publications de blog

Les articles du blog suivent les entêtes de markdown qui sont encadrées par une ligne --- de chaque coté:

title: The title of this blog post.

author: The author of this blog post. If this field is omitted, no author name will be shown.

authorURL: A page to link to when a site user clicks the author's name. If this field is omitted, the author's name will not link to anything.

authorFBID: The author's Facebook id, used only to get the author's profile picture to display with the blog post. If this field is omitted, no author picture will be shown for the blog post.

Par exemple :

---
title: Mon premier post
author: Frank Li
authorURL: http://twitter.com/franchementli
authorFBID: 100002976521003
---

Fonctionnalités supplémentaires

Docusaurus supports some extra features when writing documentation in markdown.

Lier d'autres documents

Vous pouvez utiliser des url relatives à d'autre fichiers de documentation qui seront automatiquement convertit en des liés correspondant quand ils seront rendus.

Exemple :

[Ce lien vers un autre document](other-document.md)

This markdown will automatically get converted into a link to /docs/other-document.html (or the appropriately translated/versioned link) once it gets rendered.

Ceci peut vous aider quand vous voudrez naviguer dans la documentation sur GitHub puisque les liens seront des liens fonctionnels vers d'autres document (toujours sur GitHub), mais les documents auront des liens HTML corrects lorsqu'ils seront rendus.

Lien vers les images et autres actifs

Des assets statiques peuvent être inclus de la même façon que le sont les documents, en utilisant des liens relatifs. Static assets used in documents and blogs should go into docs/assets and website/blog/assets, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.

Exemple :

![alt-text](assets/doc-image.png)

Génération d'une table des matières

Vous pouvez créer une liste auto-générée de liens, qui seront utiles pour une table des matières pour la documentation de l'API.

In your markdown file, insert a line with the text ``. Write your documentation using h3 headers for each function inside a code block. These will be found by Docusaurus and a list of links to these sections will be inserted at the text <AUTOGENERATED_TABLE_OF_CONTENTS>.

Exemple :

### `docusaurus.function(a, b)`

Texte décrivant ma fonction

### `docdoc(file)`

Texte décrivant ma fonction

will lead to a table of contents of the functions:

- `docusaurus.function(a, b)`
- `docdoc(file)`

and each function will link to their corresponding sections in the page.

Language-specific Code Tabs

Display code in multiple programming languages using code tabs. First, mark the start and end of a code tabs group, by using  and  respectively in your markdown. Then start each tab with .

Adding the following code to your Markdown file:

produces this:

JavaScript

Python

Pascal

console.log('Hello, world!');

print('Hello, world!')

#include <stdio.h>

int main() {
  printf("Hello World!");
  return 0;
}

program HelloWorld;
begin
  WriteLn('Hello, world!');
end.

Coloration syntaxique

Syntax highlighting is enabled by default on fenced code blocks. The language should be detected automatically, but you can sometimes get better results by specifying the language. You can do so using an info string, following the three opening backticks. The following JavaScript example...

```js
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
```

...would be rendered with syntax highlighting like so:

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

Highlighting is provided by Highlight.js using the theme specified in your siteConfig.js file as part of the highlight key:

{
  ...
  highlight: {
    theme: 'default'
  }
  ...
}

You can find the full list of supported themes in the Highlight.js styles directory.

Ajout de langues supplémentaires

While Highlight.js provides support for many popular languages out of the box, you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the hljs constant as part of the highlight config key. This in turn allows you to call registerLanguage:

{
  ...
  highlight: {
    theme: 'default',
    hljs: function(hljs) {
      hljs.registerLanguage('galacticbasic', function(hljs) {
        // ...
      });
    }
  }
}

Utilisation de Prism comme coloration syntaxique supplémentaire

Vous pouvez également opter pour utiliser Prism de façon à surligner certains langages présent dans la liste ici. Indiquez ces langages dans le champ usePrism dans votre siteConfig.js

Exemple :

// siteConfig.js
usePrism: ['jsx']

Remarquez que le bloc de code au dessous utilise la syntaxe JSX formater avec Prism.

class Example extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Docusaurus</Text>
        <Button
          title="Click me"
          onPress={() => this.props.navigation.push('Docusaurus')}
        />
      </View>
    );
  }
}

Adding Copy Code Buttons

Docusaurus allows for adding buttons to copy the code within fenced code blocks. Please follow the instructions here to add "Copy" buttons to your code blocks.