Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 63 additions & 1 deletion es/create/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -457,4 +457,66 @@ La sintaxis del comentario debe coincidir con tu lenguaje de programación (por
sayHello();
```
````
</CodeGroup>
</CodeGroup>

<div id="codeblock-component">
## Componente CodeBlock
</div>

Usa el componente `<CodeBlock>` en componentes personalizados de React para renderizar de forma programática bloques de código con el mismo estilo y las mismas funcionalidades que los bloques de código de Markdown.

<div id="props">
### Props
</div>

<ResponseField name="language" type="string">
El lenguaje de programación para el resaltado de sintaxis.
</ResponseField>

<ResponseField name="filename" type="string">
El nombre del archivo que se mostrará en el encabezado del bloque de código.
</ResponseField>

<ResponseField name="icon" type="string">
El icon que se mostrará en el encabezado del bloque de código. Consulta [Icons](/es/components/icons) para ver las opciones disponibles.
</ResponseField>

<ResponseField name="lines" type="boolean">
Si mostrar números de línea.
</ResponseField>

<ResponseField name="wrap" type="boolean">
Si ajustar el bloque de código.
</ResponseField>

<ResponseField name="expandable" type="boolean">
Si expandir el bloque de código.
</ResponseField>

<ResponseField name="highlight" type="string">
Las líneas que se deben resaltar. Proporciona un arreglo de números en formato de cadena. Ejemplo: `"[1,3,4,5]"`.
</ResponseField>

<ResponseField name="focus" type="string">
Las líneas en las que enfocarse. Proporciona un arreglo de números en formato de cadena. Ejemplo: `"[1,3,4,5]"`.
</ResponseField>

<div id="example">
### Ejemplo
</div>

```jsx
export const CustomCodeBlock = ({ filename, icon, language, highlight, children }) => {
return (
<CodeBlock
filename={filename}
icon={icon}
language={language}
lines
highlight={highlight}
>
{children}
</CodeBlock>
);
};
```
60 changes: 59 additions & 1 deletion fr/create/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -455,4 +455,62 @@ La syntaxe des commentaires doit correspondre à votre langage de programmation
sayHello();
```
````
</CodeGroup>
</CodeGroup>

## Composant CodeBlock

Utilisez le composant `<CodeBlock>` dans des composants React personnalisés pour générer des code blocks de manière programmatique, avec le même style et les mêmes fonctionnalités que les code blocks en Markdown.

### Props

<ResponseField name="language" type="string">
Le langage de programmation pour la coloration syntaxique.
</ResponseField>

<ResponseField name="filename" type="string">
Le nom de fichier à afficher dans l’en-tête du code block.
</ResponseField>

<ResponseField name="icon" type="string">
L’icon à afficher dans l’en-tête du code block. Voir [Icônes](/fr/components/icons) pour les options disponibles.
</ResponseField>

<ResponseField name="lines" type="boolean">
Indique s’il faut afficher les numéros de ligne.
</ResponseField>

<ResponseField name="wrap" type="boolean">
Indique s’il faut effectuer un retour à la ligne dans le code block.
</ResponseField>

<ResponseField name="expandable" type="boolean">
Indique s’il faut développer le code block.
</ResponseField>

<ResponseField name="highlight" type="string">
Les lignes à mettre en évidence. Fournissez un tableau de nombres sous forme de chaîne. Exemple : `"[1,3,4,5]"`.
</ResponseField>

<ResponseField name="focus" type="string">
Les lignes sur lesquelles focaliser. Fournissez un tableau de nombres sous forme de chaîne. Exemple : `"[1,3,4,5]"`.
</ResponseField>

<div id="props">
### Exemple
</div>

```jsx
export const CustomCodeBlock = ({ filename, icon, language, highlight, children }) => {
return (
<CodeBlock
filename={filename}
icon={icon}
language={language}
lines
highlight={highlight}
>
{children}
</CodeBlock>
);
};
```
Loading