Saltar al contenido principal

Características de Markdown

Docusaurus es compatible con Markdown y algunas características adicionales.

Front Matter​

Los documentos Markdown tienen metadatos en la parte superior llamados Front Matter:

my-doc.md
---
id: my-doc-id
title: Título de mi documento
description: Descripción de mi documento
slug: /my-custom-url
---

## Encabezado Markdown

Texto Markdown con [enlaces](./hello.md)

Enlaces​

Se admiten enlaces Markdown normales, utilizando rutas URL o rutas de archivo relativas.

Veamos cómo [crear una página](/create-a-page).
Veamos cómo [crear una página](./create-a-page.md).

Resultado: Veamos cómo crear una página.

Imágenes​

Se admiten imágenes Markdown normales.

Puedes utilizar rutas absolutas para hacer referencia a imágenes en el directorio estático (static/img/docusaurus.png):

![Logotipo de Docusaurus](/img/docusaurus.png)

Logotipo de Docusaurus

También puedes hacer referencia a imágenes relativas al archivo actual. Esto resulta especialmente útil para colocar imágenes cerca de los archivos Markdown que las utilizan:

![Logotipo de Docusaurus](./img/docusaurus.png)

Bloques de código​

Los bloques de código Markdown son compatibles con el resaltado de sintaxis.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Advertencias​

Docusaurus tiene una sintaxis especial para crear advertencias y llamadas:

:::tip[Mi consejo]

Utiliza esta fantástica opción

:::

:::danger[Ten cuidado]

Esta acción es peligrosa

:::
Mi consejo

Utiliza esta fantástica opción

:::peligro Ten cuidado.

Esta acción es peligrosa.

:::

MDX y componentes React​

MDX puede hacer que tu documentación sea más interactiva y permite utilizar cualquier componente React dentro de Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: "20px",
      color: "#fff",
      padding: "10px",
      cursor: "pointer",
    }}
    onClick={() => {
      alert(`Has hecho clic en el color ${color} con la etiqueta ${children}`)
    }}>
    {children}
  </span>
);

Esto es <Highlight color="#25c2a0">verde Docusaurus</Highlight> !

Esto es <Highlight color="#1877F2">azul Facebook</Highlight> !

¡Este es el verde Docusaurus !

¡Este es el azul Facebook !