Lo que sigue es un fichero en formato markdown que utilice para practicar y como chuleta, esta aqui para verificar como interpreta Feather Wiki el markdown.
Markdown Chuletario #
En su web https://daringfireball.net/projects/markdown/ el creador de Markdown lo define como "una herramienta de conversión de texto a HTML para escritores web. Descuento Le permite escribir usando un texto plano fácil de leer y escribir y, a continuación, conviértalo a XHTML (o HTML) estructuralmente válido... La idea de Markdown es facilitar la lectura, la escritura y la Edita la prosa. HTML es un formato de publicación; Markdown es un formato de escritura. Por lo tanto, la sintaxis de formato de Markdown solo aborda problemas que se puede transmitir en texto sin formato."
Es una manera de escribir páginas web de forma rápida y sencilla, es mucho mas rápido de escribir importante que "< strong> importante < /strong>". No trata de sustituir el HTML, solo representa una mínima parte de todas las posibilidades que ofrece HTML. Pero si que recoge lo mas habitual a la hora de escribir.
¿Que sucede con lo que no cubre? No hay problema, tan solo tienes que escribir la parte de HTML separado una línea del siguiente párrafo en Markdown. Véase: https://atareao.es/como/markdown-o-camino-hacia-la-productividad/
Iniciación e información basica
En https://es.markdown.net.br/introduccion/ hay buena información general y enlaces a editores web y programas.
Sintaxis Básica #
En algunos interpretes para indicar el fin de párrafo hace falta una linea en blanco, en otros es suficiente el fin de linea normal, y en otros interpretan varios espacios en blanco al final de la linea como fin de párrafo (Marked.js toma 2 blancos así).
Se marca una linea como Titulo 1 inciciandola con un '#' o con "==" en la linea siguiente, osea
# Titulo 1 =
Titulo 1 #
"Titulo 1" seguido de una linea con 2 signos "="
Titulo 1 #
Titulo 2 #
La linea anterior comienza con 2 # y la que sigue tiene otra linea con 2 guiones después.
T2 #
Este seria un T3 #
Hay disponible hasta el T6 #
Es bueno dejar un espacio en blanco depues del #.
El fin de párrafo lo indica una linea en blanco y al iniciarlo no debe de tener tabulación o sangrado.
Las negritas se indican con doble asteriso o subrallado
La letras itálicas con simple
Con un triple tendrás Negrita + Itálica
Recomiendan mejor el "*" porque algunos editores pueden hacerse lio con el subrayado.
Una cita textual (blockquote) va precedida de un "mayor que"
...y parece que afecta a todo el párrafo
(puede anidarse si hay un ">" doble)
Aquí otro párrafo (linea en blanco antes) para romper el indicativo de cita textual.
Listas. #
Hay varios tipo de listas
Ordenada. #
Se pone un número seguido de un punto y el texto del elemento, el primer elemento debe de tener el nro 1.
- Primer elemento
- Los siguientes nros no tienen por que ser consecutivos.
- Con tabulador o 3 blancos puede hacerse una sublista con sangrado
- Pero mejor con el TAB (sobre todo en el primer elemento)
- Ultimo de la lista
Desordenada. #
Para crear listas desordenadas es el signo más "+", el menos/guion "-", o el asterisco "*".
- el menos
- el mas (con TAB puedes sangrarlo)
Código aislado #
Para marcar una parte del contenido como código
se usan la comilla/apostrofe invertido ` (la barra invertida antes hace que se pierda el significado especial de un signo y no se visualiza)
Bloque de código #
Para insertar un bloque de código hay que iniciar cada linea con una sangría de al menos 4 espacios o un tabulador. Algunos editores necesitan que se preceda de una linea en blanco.
<html>
<head>
<title>El título de mi sitio web</title>
</head>
Hay otro método que seria delimitandolo pero ya no esta dentro de la sintaxis básica, verlo mas adelante.
Lineas horizontales #
Para crear una linea se utilizan tres o mas asteriscos seguidos ***
, o guiones bajos ___
, o guiones ---
(los asteriscos y guiones bajos pueden separarse con blancos, los guiones no)
A veces si se utilizan guiones pueden interpretarse mal si no hay una linea en blanco antes y/o después
Enlaces/Hipervínculos (links) e Imágenes #
Se indican básicamente con una combinación de corchetes y paréntesis.
Los enlaces serian: texto-anclaje/descriptor entre corchetes y dirección/enlace/URL entre paréntesis, sin blancos entre corchete y paréntesis, opcionalmente puedes agregar la etiqueta que sale al pasar el ratón después de la dirección del enlace entre comillas y separada con un blanco, osea:
[texto](dirección/URL "titulo/etiqueta")
por ejemplo: Una web de Markdown
Puede resaltarse el texto del enlace marcándolo como código (metiendolo entre apostrofes invertidos): Una web de Markdown
Las imágenes son enlaces precedidos por un signo de admiración. Por ejemplo: ![Logo Markdown](https://markdown.net.br/assets/img/basic-syntax/markdown-logo-small.png "logo")
haria que apareciera:
Se puede poner un enlace a palo seco:
https://es.markdown.net.br
email@host.com
Enlaces por referencia
Los enlaces por referencia utilizan un segundo conjunto de corchetes, dentro del que colocas una etiqueta/referencia a tu elección para identificar el enlace:
[Texto del enlace][Referencia]
Luego se define en otra parte del documento en una línea por sí misma con el formato:
[Referencia]: https://pagina.web "titulo opcional"
Osea la referencia entre corchetes seguida de dos punto, un espacio como mínimo y la dirección pertinente, si se quiere se puede añadir un titulo entre comillas.
OJO que NO se tienen en cuenta Mayúsculas/Minúsculas en el texto de la referencia.
Por ejemplo: La gente busca mucho mas con [Gugle][Ref1] que en [Yaju][Ref2] o [Moco$oft][Ref3].
Se puede omitir el texto de los segundos corchetes (algunos editores incluso permiten omitir incluso los mismos corchetes) y la referencia seria el mismo texto del enlace, osea: [Texto del enlace][]
Mas ejemplos en lista:
- [AngularJS][] - HTML mejorado para aplicaciones web.
- [markdown-it][] - Analizador Markdown.
- [Ace Editor] - Buen editos de texto basado en la web.
Como las imágenes no dejan de ser enlaces, se puede utilizar también estas referencias:
![Ref-a-Imagen][]
Aquí están los enlaces de las referencias de ejemplo, como se ve no tienen por que tener ningún orden:
[Ref1]: https://google.com/ "Google"
[Ref2]: https://search.yahoo.com/ "Yahoo Search"
[Ref3]: https://search.msn.com/ "MSN Search"
[markdown-it]: https://github.com/markdown-it/markdown-it
[Ace Editor]: http://ace.ajax.org
[AngularJS]: http://angularjs.org
[Ref-a-Imagen]: https://daringfireball.net/martini/images/coversutra-solid.png "imagen de la pagina del creador de Markdown"
[Refer1]: https://atareao.es/como/markdown-o-camino-hacia-la-productividad/
Como existe la opción de combinar Markdown con HTML, la cosa se puede complicar un poco si se utilizan caracteres con significado HTML. El analizador comprende cuándo son caracteres simples y cuando se está utilizando el código HTML pero es recomendable tenerlo en cuenta. Se puede utilizar el enmascaramiento (escape) antecediendolos con la barra invertida, Markdown lo contempla para los siguientes caracteres:
Asterisco: *
Guion: -
Guion bajo: _
Paréntesis: ()
Corchetes: []
Llaves: {}
Punto: .
Signo de exclamación: !
Almohadilla: #
Apostrofe invertido (Acento grave): `
Barra invertida:
Esto es un *ejemplo con asteriscos*.
Sintaxis Extendida #
Estas opciones pueden no funcionar en algunos editores, hay que tenerlo en cuenta.
Tablas #
Para crear una tabla en Markdown usamos guiones '-' y barras verticales '|'.
La primera línea de la tabla es donde construimos el encabezado, separando esa línea por tres o más guiones '---' para que el procesador Markdown entienda el formato. La separación de las columnas se realiza mediante la barra vertical '|', también llamada pipe por los programadores. Algunos editores necesitan una linea en blanco para indicar el inicio y fin de la tabla.
Col.a |
Col.b |
Fila1.a |
Fila1.b |
Fila2.a |
Fila2.b |
Las barras verticales | utilizados en los extremos de la tabla son para fines puramente cosméticos, se puede crear una tabla sin las barras laterales y la anchura de las columnas se ajusta automáticamente a pesar de que en el texto estén descuadradas, aunque lo lógico es que se dejen lo mejor posible para mejorar la legibilidad.
Para alinear el contenido de las tablas se utilizan los guiones '---' que separan la línea del encabezado:
- a la izquierda: pon dos puntos antes ':---'
- a la derecha: pon dos puntos después '---:'
- al centro: pon dos puntos a ambos lados ':---:'
Bloque de código Delimitado #
Para crearlo coloca 3 apostrofes invertidos ``` o 3 ~~~ antes y después del contenido. Si especificas el lenguaje de programación del código después del los primeros 3 caracteres de la marca puede que se destaque la sintaxis si están instaladas las librerías pertinentes.
a = 1
b = a*2 - 1
if a == b:
print(a + 'es igual que' + b)
Nota al pie #
Al igual que en los libros, se puede crear una referencia a algún concepto mencionado en el documento, por lo general, estas notas al pie se colocan al final del documento, pero en Markdown puedes definirlas en cualquier parte del texto.
Se pone entre corchetes el identificador (solo números y/o letras) precedido del signo ^ por ej. [^Pie0]
Realmente el identificador[^Pie] no se visualiza tal cual, solo el nro de orden de la [^1] nota al pie, que markdown colocara y ordenara automáticamente en el HTML final ignorando los posibles números del identificador original.
[^Pie]: Nota al pie
[^1]: Otra nota a pie de página.
Listas de tareas en Markdown #
Es una lista con casillas de verificación a su izquierda usando corchetes []. Para marcar una casilla hay que colocar una x dentro de los corchetes [x].
Tachado en Markdown #
El tachado se usa para corregir un error comparativamente, generalmente seguido de una corrección en la misma línea, para marcarlo usa dos '~' antes y después del texto a tachar.
"Aquí un error tachado."
Otras opciones sin mirar #
Agregar Titulo ID o Class a los elementos Markdown
Al crear tags en HTML, podemos asignarles una identificación única y una identificación genérica a través de los parámetros id y class.
Lista de definiciones
Una lista de definiciones en HTML está representada por tags dl y dt. Esta lista representa términos y sus explicaciones de manera conceptual.
Insertar Emojis en el documento Markdown
Se puede insertar emoticonos directamente con Markdown de su documento.
----- Utilidades Y Notas varias: #
-
https://es.markdown.net.br/editor/ es un editor web
-
https://dillinger.io/ es un editor web de código abierto que permite importar y exportar a HTML...
-
https://stackedit.io/app# Otro editor web
-
http://markdown.pioul.fr/ Editor web minimalista con opción de ver el código fuente html directamente.
-
Para hojas de estilo puede verse: https://jblevins.org/log/custom-css
-
el programa de toma de notas abierto "Zettlr" https://www.zettlr.com/ tiene un excelente lector de Markdown que exporta maravillosamente. Literalmente, solo selecciona el texto que quieres mover a LibreOffice y luego haz clic derecho y elige "Copiar como HTML". Es un poco voluminoso para un editor de texto, pero las funciones de Markdown son muy buenas.
Zettlr también funciona a la inversa, lo que significa que si pegas tu documento de LibreOffice en el programa, conservará todos los enlaces, cursivas, encabezados, etc., pero en formato Markdown.