PrevNext

Show cases en Gatsly

Author: Oscar Julián Tinjacá y Luis Miguel Báez

Latex en Gatsly

Edit This Page

Ejemplo de Latex

$$\int _{\:0}^{\infty \:}\int _y^{\infty \:}e^{-x^2}dxdy$$
∫ 0∞ ∫y∞ e−x2dxdy\int _{\:0}^{\infty \:}\int _y^{\infty \:}e^{-x^2}dxdy
Esta es una formula $\int _{\:0}^{\infty \:}\int _y^{\infty \:}e^{-x^2}dxdy$ inline

Esta es una formula ∫ 0∞ ∫y∞ e−x2dxdy\int _{\:0}^{\infty \:}\int _y^{\infty \:}e^{-x^2}dxdy inline

Insertar Codigo en una formato legible

Escribir el siguiente codigo sin las \\

  \```java
  public class Main {
    int x = 5;
  }
  \```

Y obtendrá el siguiente resultado

public class Main {
  int x = 5;
}

Componentes globales de React

Algunos componentes están disponibles globalmente en cada módulo (sin tener que importarlos):

  • <Spoiler>
  • <Info>
  • <Warning>
  • <Optional>
  • <Problems>
  • <FocusProblem>
  • <Resources>
  • <Resource>
  • <TextTooltip>
  • <LanguageSection>
  • <CPPSection>
  • <JavaSection>
  • <PySection>
  • <IncompleteSection>
  • <Asterisk>
  • <Quiz>

Ejemplo de Uso en cualquier archivo .mdx

Componente Info

<Info title="Algun Titulo">
Alguna descripción Importante
</Info>

Algun Titulo

Alguna descripción Importante

Componente Resources

<Resources title="References">
	<Resource source="Research Gate" url="https://www.researchgate.net/publication/326626897_Smartphone_Based_Image_Color_Correction_for_Color_Blindness" title="Smartphone Based Image Color Correction for Color Blindness">
		Lamiaa A. Elrefaei
	</Resource>
</Resources>
Resources: References
Research Gate
Smartphone Based Image Color Correction for Color Blindness

Lamiaa A. Elrefaei

Embeber animación de p5.js en Gatsly

  • Crear un archivo NombreComponente.tsx en src/components/markdown/
import React from 'react';
import { P5Instance, ReactP5Wrapper } from 'react-p5-wrapper';


function sketch(p5: P5Instance) {


  p5.setup = () => {
	p5.createCanvas(710, 400, p5.WEBGL);
  }


  p5.draw = () => {

En el archivo src/components/markdown/MDXComponents.tsx debe importar el componente y lo exportas de la siguiente manera

import Example3DComponent from './Example3DComponent'


export const components = {
  Spoiler,
  ...
  Example3DComponent,
};

Y luego de esto ya puedes importar el componente en cualquier archivo .mdx de la siguiente manera

Ejemplo de Componente 3D

<div id="Example3D"></div>
<ScriptTag type="text/javascript" src="https://visual-computing-1.github.io/visual-site/js/showcases/example3d.js" />

Ejemplo de p5.js en 2D

<div id="Example2D"></div>
<ScriptTag type="text/javascript" src="https://visual-computing-1.github.io/visual-site/js/showcases/example2d.js" />

Ejemplo de Articulo usando Markdown x

---
id: showcase-about-template
title: 'About Template'
author: Oscar Julián Tinjacá y Luis Miguel Báez
description:
  'Información sobre el Template'
---


# Gatsby Framework

Module Progress:

PrevNext