Skip to content

Instantly share code, notes, and snippets.

@deyvicode
Last active May 2, 2024 23:32
Show Gist options
  • Save deyvicode/eceb842e636a0a86e715ab1576554e59 to your computer and use it in GitHub Desktop.
Save deyvicode/eceb842e636a0a86e715ab1576554e59 to your computer and use it in GitHub Desktop.
Resumen sobre cómo escribir markdown y algunas herramientas recomendadas.

Markdown

Texto

  • * text * italic
  • ** text ** bold
  • *** text *** italic bold
  • ~ text ~ texto subscrito
  • ^ text ^ texto superscrito
  • ~~ text ~~ tachado
  • > text blockquote (cita)

Titulos

Los titulos se definen con # y van incrementando segun el nivel del titulo.

  • # titulo 1
  • ## titulo 2
  • ### titulo 3
  • etc.

Listas

  • * o - listas no ordenadas
  • {numero}. listas ordenadas (ejem: 1. )
  • - [ ] y - [x] lista de tareas o checklist

Imagenes

Tienen la forma de:

![text alt](url) donde text alt es el texto alternativo cuando no carga la imagen.

Para imagenes que se repiden varias veces en el documento se pueden definir entre corchetes y al final indicar la url. Asi:

texto texto ![logo google][logo] texto texto ![logo google][logo] texto texto ![logo google][logo].

[logo]: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

Hipervinculo en imagen

Para que al clickear en una imagen esta nos envíe a alguna dirección web, lo que tenemos que hacer es "combinar" la sintaxis para añadir imagenes y para crear un hipervínculo en nuestro documento. Esto quedaría del tipo:

[![text alt](url_image)](url_web)

Enlaces

Tienen la forma de: [text](url)

Para textos grandes donde hay enlaces del mismo tipo se puede definir los textos entre corchetes y al final indicar la url. Asi:
texto texto [google] texto texto [google] texto texto [google].

[google]: https://www.google.com

Codigo

  • code (entre backtiks) codigo en linea.
  • language code (entre 3 backtiks) codigo de bloque

Ejems:

  • En JS con let declaro variables y con const las constantes.

  • Un codigo de bloque se ve asi:

const holaMundo = () => "Hola mundo"

Una libreria recomendada para colorear bloques de codigo en a web es: https://prismjs.com

Tablas

Para crear tablas se definir la siguiente estructura:

title | title | title
--- | --- | ---
text | text | text 

Teniendo en cuenta que la fila 2 es la sintaxis que define la estructura de la tabla.

Tambien tenemos variaciones o ajustes adicionales:

  • ---|---:|--- texto de la columna 2 alineado a la derecha.
  • ---|:---|--- texto de la columna 2 alineado a la izquierda.
  • ---|:---:|--- texto de la columna 2 alineado al centro.

Herramientas

Visual Studio Code

El siempre confiable vscode tiene soporte básico para escribir y previsualizar markdown, pero también puede ser potenciado por sus extensiones.

Una de las extensiones que uso es GistPad para administrar todos los gists que voy subiendo a github.

gistpad-preview

Typora (free)

Typora es un editor de markdown minimalista, su principal caracteristica es que previsualiza mientras vas escribiendo en el mismo documento, y no hace el clasico pantalla dividida. typora-preview

Cacher (freemium)

Uno de mis favoritos y con el que estoy haciendo este markdown.

Cacher es un gestor para escribir snipets de codigo y documentación markdown que puedes enlazar directamente a github gists como repositorio, pudes organizar tus snipets por labels y tipo de lenguaje.

cacher-preview

StackEdit (free)

StackEdit es un editor de markdown online que permite sincronizar con muchos repositorios de archivos modernos y trabajo colaborativo. Cuenta con controles WYSIWYG y permite graficos y emojis.

stackedit-preview

Dillinger (free)

Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible, AngularJS-powered HTML5 Markdown editor.

  • Type some Markdown on the left
  • See HTML in the right
  • ✨Magic ✨

Features

  • Import a HTML file and watch it magically convert to Markdown
  • Drag and drop images (requires your Dropbox account be linked)
  • Import and save files from GitHub, Dropbox, Google Drive and One Drive
  • Drag and drop markdown and HTML files into Dillinger
  • Export documents as Markdown, HTML and PDF

dillinger-preview

Inkdrop (pago)

Inkdrop tiene muchas herramientas de organización de markdown y está enfocado para ser fácil escribir, organizar y compartir tus documentos.

inkdrop-preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment