Componentes personalizados

Componentes que exitenden las funcionalidades por defecto de los archivos markdown, modificándo los que existen por defecto o agregando nuevos.

Componente File Tree

El componente File Tree (<FileTree>) permite representar una lista de archivos. Los íconos se asignan automáticamente en función de la extensión del archivo. También es posible añadir comentarios simplemente dejando un espacio al lado del nombre del archivo y resaltarlos, como se haría normalmente en archivos Markdown utilizando **[contenido]**. Además, es posible representar un archivo vacío con el texto ....

Dentro de FileTree se escribe una lista de contenido en formato Markdown que luego será renderizada.

<FileTree>
 
- public/ Comentarios
  - robots.txt
- src/
  - components/
    - **TreeFile.astro** Fichero resaltado
    - Button.astro
    - ...
  - pages/
    - ...
    - index.ts
 
</FileTree>

Syntax Higlight

La funcionalidad de resaltar partes del código permite explicar mejor o desglozar partes un bloque de código, se configura mediante meta datos en el encabezado del bloque de código.

Lineas

Agrega un número o rango numérico dentro de {}.

const baseValue = prompt("Enter the base of a triangle: ");
const heightValue = prompt("Enter the height of a triangle: ");
 
// calculate the area
const areaValue = (baseValue * heightValue) / 2;
 
console.log(`The area of the triangle is ${areaValue}`);

'''javascript {1-2,5}
const baseValue = prompt("Enter the base of a triangle: ");
const heightValue = prompt("Enter the height of a triangle: ");
 
// calculate the area
const areaValue = (baseValue \* heightValue) / 2;
 
console.log('The area of the triangle is ${areaValue}');
'''

Palabras

Una serie de carácteres, como un regex literal.

const baseValue = prompt("Enter the base of a triangle: ");
const heightValue = prompt("Enter the height of a triangle: ");
 
// calculate the area
const areaValue = (baseValue * heightValue) / 2;
 
console.log(`The area of the triangle is ${areaValue}`);

'''javascript /baseValue/ /heightValue/
const baseValue = prompt("Enter the base of a triangle: ");
const heightValue = prompt("Enter the height of a triangle: ");
 
// calculate the area
const areaValue = (baseValue \* heightValue) / 2;
 
console.log(`The area of the triangle is ${areaValue}`);
'''

Componente Tab y TabItem

El componente Tab (<Tab>) permite organizar contenido en pestañas tituladas. Cada TabItem está asosciada a un contenido específco que se muestra cuando esta es seleccionada, estas deben tener un label que indique el título de la pestaña.

<Tabs>
 
<TabItem label="Pestaña 1">
 
Conenido...
 
</TabItem>
 
<TabItem label="Pestaña 2">
 
'''ts
const world = "world";
console.log("Hello " + world + "!");
'''
 
</TabItem>
 
</Tabs>

El código de arriba genera la siguente Tab:

const world = "world";
console.log("Hello " + world + "!");

Componente Aside

El componente Aside (<Aside>) es similar a los componentes utilizados en otras aplicaciones (callbacks), proporciona información adicional al margen del contenido principal. Por defecto, los elementos <Aside> son de tipo note, pero también pueden ser de tipo tip, caution, danger y success.

Es importante completar el campo title con un título para el contenido, este es requerido y se utiliza para el título del contenedor.

El contenido del <Aside> puede ser texto markdown.

<Aside type="note" title="Note:">
  Esto es una nota
</Aside>