1.Que es Markdown

Markdown es un lenguaje enfocado en sencillez y de marcado ligero para escribir documentos. Como bien sabes escribir una pagina en html es complicado, poco legible ya que vas encontrando simbolos propios del lenguaje, empiece y cierre de etiquetas, etc…

Markdown pretende ser un lenguaje mucho mas sencillo, con marcas para indicar los aspectos mas generales (titular, negrita, imagen, etc..).

La facilidad de manejo y escritura de documentos markdown ha hecho que se adopte rapidamente por muchisimos editores. Esto ha originado el crecimiento de parseadores de Markdown a otros lenguajes mas complejos, por ejemplo hay interpretes que a partir de un documento de Markdown son capaces de generar el codigo HTML resultante, o generar un archivo .doc, generar un epub, etc…

2. Ejemplos de bloques en markdown

Esta pagina muestra ejemplos de utilidades que se pueden utilizar:

Importante: La compatibilidad total es con el theme material

Incluyendo codigo javascript

Siempre puedes incluir tu codigo en el propio md y sera interpretado

<script>
  window.addEventListener('load', function () {
    alert("Estoy incluyendo codigo javascript")
  });
</script>

Editando tu codigo Mkdocs

Podemos hacer que puedas editar la pagina que estas viendo directamente.

Para esto es tan sencillo como asegurarte de :

• Tener la propiedad repo_url en tu mkdocs.yaml : Por ejemplo: repo_url: https://github.com/example/repository/
• Habilitar la theme.feature ( content.action.edit) theme: features: - content.action.edit

Esto no solo añadira el boton de edit si no que tambien mostrara el icono de github (o el SCM que se este usando)

La documentacion oficial esta aqui https://www.mkdocs.org/user-guide/configuration/#edit_uri

Creando enlaces

https://editormarkdown.com

O si son enlaces a esta misma pagina

Llevame a Dibujando flujos (Para esta opcion tiene que estar dado de alta la seccion nav en mkdocs.yaml)

Enviame un email me@email.com

Bloques de informacion

Siento dejar este mundo sin probar pipas Facundo

Blockquoted header

This is blockquoted text.

This is a second paragraph within the blockquoted text.

Y este es un subparrafo

Separadores horizontales (lineas)

Iconos

Hay varios iconos que vienen de serie y que estan en la carpeta .icons y sus subdirectorios.

Para usarlos basta con indicar la ruta de subdirectorios en vez de con slash usando hypens (guiones)

:fontawesome-solid-angry: estamos usando el icono en la ruta .icons/fontawesome/solid/angry.svg (como estamos usando la imagen docker no podemos explorar el directorio de iconos, pero se puede consultar descargando el codigo de mkdocs material)

(este icono pertenece a .icons/material/material-design.svg)

Este icono esta en .icons/octicons/key-16.svg

Incluye estilos en tu pagina para customizar tus iconos

– Medium

Listas ordenadas

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Listas desordenadas

• opcion A
• opcion B
• opcion C

Codigo resaltado

• ==This was marked==
• ^^This was inserted^^
• ~~This was deleted~~

Bloques colapsados

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

version: '3.7'
networks:
  local:
    external: true
services:
  postgres11:

volumes:
  postgresql:
  postgres11-data:
    driver: local

Dibujando Flujos

Usando mermaid https://mermaid.js.org/config/theming.html

Secuence diagram

Dibujando graficas

Usando Vegalite plugin (documentacion aqui https://vega.github.io/vega-lite/examples/) Para que esto funcione es necesario tener una pagina index.md en la raiz no se porque , pero es asi

{ "description": "A simple bar chart with embedded data.", "data": {"url" : "https://raw.githubusercontent.com/timvink/mkdocs-charts-plugin/main/docs/assets/charts/data/basic_bar_chart.json"}, "mark": {"type": "bar", "tooltip": true}, "encoding": { "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}}, "y": {"field": "b", "type": "quantitative"} } }

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "Google's stock price over time.", "data": {"url": "https://vega.github.io/vega-lite/data/stocks.csv"}, "transform": [{"filter": "datum.symbol==='GOOG'"}], "mark": "line", "encoding": { "x": {"field": "date", "type": "temporal"}, "y": {"field": "price", "type": "quantitative"} } }

Usando Tablas

Usando Tabs

Creando listas de checks

• Lorem ipsum dolor sit amet, consectetur adipiscing elit
• Vestibulum convallis sit amet nisi a tincidunt
  • In hac habitasse platea dictumst
  • In scelerisque nibh non dolor mollis congue sed et metus
  • Praesent sed risus massa
• Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Imagenes con texto al lado

Como podemos apreciar en la foto de al lado nuestro se muestra una imagen vacia del site http://dummyimage.com .

Otro parrafo tambien al lado de la foto.

Si queremos empezar a escribir ya debajo de la foto, debemos meter tantos ‘< br />’ como necesitemos hasta salirnos.

Ya estoy fuera en el siguiente parrafo, ves?.

Imagenes con titulo

Generando el site estatico

Si queremos generar el site estatico

docker run --rm -it -p 9999:8000 -v /home/dpena/Documentos/deadveloper/Guias:/docs danipenaperez/mkdocs  build

Despues desplegarlos en algun servidor de codigo estatico o en un gh-pages. Por ejemplo aqui usamos un nginx para probar a desplegar los estaticos generados

docker run -it --rm -d -p 8080:80 --name borrame -v /home/dpena/Documentos/deadveloper/Guias/site:/usr/share/nginx/html nginx
sensible-browser http://localhost:8080

Otros themes

Este pinta bien https://github.com/ppoffice/hexo-theme-icarus

Generando pies de pagina