Aller au contenu principal

Page Markdown

Ceci est une page générée à partir de markdown pour illustrer la fonctionnalité de la page Markdown.

Il prend en charge toutes les fonctionnalités MDX normales, comme vous pouvez le voir :

info

Informations utiles.

Éditeur en ligne
RĂ©sultat
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Utiliser le chemin absolu#

Importer des fichiers Mdx et Md#

// fichier *.mdimport Chapter1 from './_chapter1.md';
<Chapter1 />;
// fichier *.mdximport Chapter2 from './_chapter2.mdx';
<Chapter2 />;

Chapitre 1

Lorem ipsum chapitre 1

Chapitre 2

Lorem ipsum chapitre 2

Commentaires#

Les commentaires MDX peuvent ĂȘtre utilisĂ©s avec


Mon commentaire
-->```
Vous voyez, rien n'est affiché :
<!--
My comment
-->
## Importer un bloc de code depuis le fichier de code source
import MyComponent from "@site/src/pages/examples/\_myComponent"
import BrowserWindow from '@site/src/components/BrowserWindow';
Disons que vous avez un composant React.
Vous pouvez l'importer et l'utiliser dans MDX :
```jsx title="myMarkdownFile.mdx"import MyComponent from './myComponent';
<MyComponent />;

Mais vous pouvez Ă©galement afficher son code source directement dans MDX, grĂące Ă  Webpack raw-loader

myMarkdownFile.mdx
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */
import React from 'react';
export default function MyComponent() {  const [bool, setBool] = React.useState(false);  return (    <div>      <p>MyComponent rendered !</p>      <p>bool={bool ? 'true' : 'false'}</p>      <p>        <button onClick={() => setBool((b) => !b)}>toggle bool</button>      </p>    </div>  );}

Test#

Éditeur en ligne
RĂ©sultat
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Test du bloc de code#

Title
function Clock(props) {  const [date, setDate] = useState(new Date());  useEffect(() => {    var timerID = setInterval(() => tick(), 1000);
    return function cleanup() {      clearInterval(timerID);    };  });
  function tick() {    setDate(new Date());  }
  return (    <div>      <h2>It is {date.toLocaleTimeString()}.</h2>      {/* prettier-ignore */}      long long long long long long long long long long long long line      {/* prettier-ignore */}    </div>  );}
Éditeur en ligne
RĂ©sultat
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
test
test
test

directement en utilisant pre#

test
1 2 3

Id de l'entĂȘte personnalisĂ©#

ÉlĂ©ments enfants Ă  l'intĂ©rieur des Ă©lĂ©ments de pre/code#

Voir https://github.com/facebook/docusaurus/pull/1584

Lol bro
Lol bro

Pipe#

Balise code + double pipe : ||

Balise code + double pipe : ||

Cas particuliers des images#