07/04/13 markdown
joedicastro.com/pages/markdown.html 1/22
blog archivo etiquetas code markdown rss
Markdown & Pygments Lexers CheatSheetEsta es una gua que me sirve para recordar todas las posibilidades que ofrecen markdown yPygments para editar y formatear texto y que empleo para crear los artculos de este blog. Estredactada de forma que no solo me sirva de gua a m, si no a cualquiera que se acerque porprimera vez a markdown o Pygments.
Lo que sigue a continuacin es una lista detallada de todas las caractersticas que se puedenemplear en Markdown y Markdown Extra (empleando Python Markdown) y los lexers mscomunes de Pygments para resaltar el cdigo fuente.
MarkdownQue es Markdown?
Sintaxis MarkdownCabecerasEnlacesParrafosFormatoCitasListasListas de definicionesImgenesTablasCdigoLineas HorizontalesEscapar caracteresNotas a pie de pginaAbreviaturasIndentificadores de cabecera
PygmentsLexers de Pygments ms comunes para resaltado de sintaxis
07/04/13 markdown
joedicastro.com/pages/markdown.html 2/22
Markdown
Este es el lenguaje de marcado empleado para crear este sitio, que permite formatear el textofcilmente sin la necesidad de emplear el ms engorroso HTML o emplear un editor visual.
Que es Markdown?Markdown es un lenguaje de marcado ligero parecido al que se emplea en muchas wikis ybasado originalmente en convenciones existentes en el marcado de los los correos electronicos.Emplea texto plano, procurando que sea legible pero consiguiendo que se convierta en XHTMLcorrectamente formateado. Los artculos de este sitio estn elaborados empleando markdown,sin utilizar ningn tipo de editor visual WYSIWYG, lo que facilita el crear documentos XHTMLlimpios y fcilmente editables en el futuro. Son un buen ejemplo de las capacidades deMarkdown. Aunque no es muy conocido, empieza a ser muy popular y utilizado entre losprogramadores.
Para conocer ms sobre markdown, se pueden leer los artculos en los que explico porque es elms adecuado para crear un blog y porque lo he elegido para este sitio, artculos markdown
Sintaxis Markdown
CabecerasLos encabezamientos HTML se producen colocando un nmero determinado de almohadillas #antes del texto correspondiente al nivel de encabezamiento deseado (HTML ofrece hasta seisniveles). Los encabezamientos posibles se pueden ver en la siguiente tabla:
Tecleas Obtienes
#EstoesunH1 Esto es un H1
##EstoesunH2 Esto es un H2
###EstoesunH3 Esto es un H3
####EstoesunH4 Esto es un H4
07/04/13 markdown
joedicastro.com/pages/markdown.html 3/22
#####EstoesunH5 Esto es un H5
######EstoesunH6 Es to es un H6
Se puede encerrar cada encabezado entre almohadillas, por motivos puramente estticos,porque no es necesario en absoluto, es decir, se puede hacer esto:
Tecleas Obtienes
###EstoesunH3### Esto es un H3
Para los encabezamientos de los dos primeros niveles existe tambin otra manera de hacer lomismo, que sera la siguiente:
Tecleas Obtienes
EstoesunH1
=============Esto es un H1
EstoesunH2
Esto es un H2
Es decir para los encabezamientos principales se subraya el texto con el signo igual. Para losencabezamientos de segundo nivel se utilizan guiones para subrayar. Es indiferente el nmerode signos iguales o guiones que se empleen, con uno es suficiente.
EnlacesExisten tambin dos maneras de crear enlaces, se pueden ver en la siguiente tabla:
Tecleas Obtienes
[Contitulo](http://joedicastro.com"titulo") Con titulo
[Sintitulo](http://joedicastro.com) Sin titulo
07/04/13 markdown
joedicastro.com/pages/markdown.html 4/22
[Enlace1][1],[Enlace2][2],[Enlace3][3]
[1]:http://joedicastro.com/consejos
[2]:http://joedicastro.com/consejos
"Consejos"
[3]:http://joedicastro.com/
Enlace 1 , Enlace 2, Enlace 3
Existe una manera adicional de crear enlaces automticos para direcciones URL, simplementeencerrarla entre los caracteres menor < que y mayor que >:
Tecleas Obtienes
http://joedicastro.com
PrrafosPara crear prrafos se deja una lnea en blanco. De este modo.
Tecleas Obtienes
Esteeselprimerprrafo.
Esteeselsegundoprrafo.
Este es el primer prrafo.
Este es el segundo prrafo
Para crear un salto de lnea dentro de un prrafo, simplemente se dejan dos espacios al final dela ltima palabra de esa lnea, de este modo:
Tecleas Obtienes
Estaeslaprimeralnea
yesteeselsaltodelnea.Esta es la primera lneay este es el salto de lnea.
Formato
07/04/13 markdown
joedicastro.com/pages/markdown.html 5/22
El formato bsico del texto, es decir negritas y cursiva, se pueden realizar de varias maneras:
Tecleas Obtienes
**Estoesnegrita** Esto es negrita
__Estotambinesnegrita__ Esto tambin es negrita
*Estoescursiva* Esto es cursiva
_Estotambinescursiva_ Esto tambin es cursiva
***Estoesnegritaycursiva*** Esto es negrita y cursiva
___Estotambinesnegritay
cursiva___Esto tambin es negrita y cursiva
Se pueden emplear indistintamente tanto el asterisco * como el guin bajo _ siempre y cuandono se mezclen y lo que determina el formato es el nmero de ellos antes y despus del bloque detexto a formatear. Uno es cursiva, dos es negrita, y tres ambas a la vez, as de sencillo.
CitasPara crear bloques de cita, se emplea el carcter mayor que > antes del bloque de texto. En lasiguiente tabla se pueden ver las opciones para crearlos.
Tecleas Obtienes
Estoesunalneanormal
>Estoespartedeunbloquedecita.
>Estoespartedelmismobloquede
cita.
Esto es una lnea normal
Esto es parte de un bloque de cita. Esto esparte del mismo bloque de cita.
>Estoespartedeunbloquedecita.
07/04/13 markdown
joedicastro.com/pages/markdown.html 6/22
Estocontinaelbloqueinclusoaunque
nohaysmbolo'mayorque'.
Lalneaenblancofinalizaelbloque.
Esto es parte de un bloque de cita. Estocontina el bloque incluso aunque no haysmbolo 'mayor que'.
La lnea en blanco finaliza el bloque.
Estoesunalneanormal
>Estoespartedeunbloquedecita.
>Estoespartedelmismobloquede
cita.
>
>>Estoesotrobloquedecita
anidado.
>>Estoespartedelbloqueanidado.
>
>Estoespartedelbloquedecitade
primernivel.
Esto es una lnea normal
Esto es parte de un bloque de cita. Esto esparte del mismo bloque de cita.
Esto es otro bloque de cita anidado.Esto es parte del bloque anidado.
Esto es parte del bloque de cita de primernivel.
ListasMarkdown permite crear dos tipos de listas, ordenadas y desordenadas, es decir numeradas olistas de puntos. Para distinguir los tipos y como se crean, nada mejor que verlo con ejemplos:
Tecleas Obtienes
Listanumerada(ordenada)
1.Esteeselprimerelemento
2.Esteeselsegundoelemento
3.Esteeseltercerelemento
Lista numerada (ordenada)
1. Este es el primer elemento2. Este es el segundo elemento3. Este es el tercer elemento
Listadepuntos(desordenada)
*Unelementodelalista
*Otroelementodelalista
*Eltercerelementodelalista
Lista de puntos (desordenada)
Un elemento de la listaOtro elemento de la listaEl tercer elemento de la lista
07/04/13 markdown
joedicastro.com/pages/markdown.html 7/22
Sepuedenempleartambin+yen
vezde*
*Unelementodelalista
+Otroelementodelalista
Eltercerelementodelalista
Se pueden emplear tambin + y en vez de *
Un elemento de la listaOtro elemento de la listaEl tercer elemento de la lista
Sepuedenmezclardistintostipos
delistasyanidarunasdentrode
otras.
1.Estoesunalistaordenada
2.Segundoelementodelalista
ordenada
1.Estaesunalistaordenada
anidadadentrodeotra
*Listadesordenada
anidadaatercernivel
*Segundoelementodeesta
lista
2.Esteeselsegundoelemento
delalistaordenadaanidada
Se pueden mezclar distintos tipos de listas y anidarunas dentro de otras.
1. Esto es una lista ordenada2. Segundo elemento de la lista ordenada
1. Esta es una lista ordenada anidada dentro deotra
Lista desordenada anidada a tercer nivelSegundo elemento de esta lista
2. Este es el segundo elemento de la listaordenada anidada
Listas de definicionesSe pueden crear lista de definiciones, que estn compuestas de trminos y las definiciones delos mismos, como si fuera un diccionario. Su creacin es muy sencilla:
Tecleas Obtienes
Primertermino
:Primeradefinicin
Segundotermino
:Segundadefinicin
Primer trminoPrimera definicin
Segundo trminoSegunda definicin
Sepuedenaplicarmsdeuna
definicinaunterminoSe pueden aplicar ms de una definicin a un termino
07/04/13 markdown
joedicastro.com/pages/markdown.html 8/22
Primertermino
:Primeradefinicin
:Segundadefinicin
Segundotermino
:Segundadefinicin
Primer trminoPrimera definicinSegunda definicin
Segundo trminoSegunda definicin
Sepuedenaplicarmsdeun
terminoaunadefinicin
Primertermino
Segundotermino
:Primeradefinicin
Tercertermino
:Segundadefinicin
Se pueden aplicar ms de una definicin a un termino
Primer trminoSegundo trmino
Primera definicinTercer trmino
Segunda definicin
Sidejamosunalneaenblanco
entreelterminoyladefinicin,
secrearaunprrafoparala
definicin.
Primertermino
:Primeradefinicin
Segundotermino:Segundadefinicin
Si dejamos una lnea en blanco entre el termino y ladefinicin, se creara un prrafo para la definicin.
Primer terminoPrimera definicin
Segundo terminoSegunda definicin
Unadefinicinpuedeconstarde
variosprrafos.
Primertermino
:Primeradefinicin
Segundoprrafodelaprimera
definicin
Segundotermino
:Segundadefinicin
Una definicin puede constar de varios prrafos.
Primer trminoPrimera definicin
Segundo prrafo de la primera definicin
Segundo trminoSegunda definicin
07/04/13 markdown
joedicastro.com/pages/markdown.html 9/22
ImgenesLa manera de enlazar imgenes es bsicamente la misma de crear enlaces, con un nicadiferencia, se aade el carcter exclamacin ! al principio de la pareja de corchetes que definenel nombre del enlace. Ejemplos:
Tecleas Obtienes
![Contitulo](pictures/avatar.png
"titulo")
![Sintitulo](pictures/avatar.png)
![Imagen1][1]![Imagen2][2]
[1]:pictures/avatar.png
[2]:pictures/scaphandre.png
"scaphandre"
TablasCrear tablas es sumamente sencillo, simplemente debemos indicar cuales son los elementos dela cabecera y separar los campos con el smbolo |
Tecleas Obtienes
CabeceraA|CabeceraB
|
CampoA0|CampoB0
CampoA1|CampoB1
Cabecera A Cabecera BCampo A0 Campo B0
Campo A1 Campo B1
Si se desea, por esttica, se pueden alinear las columnas e incluso comenzar y finalizar las filascon el smbolo |, pero no es en absoluto necesario.
07/04/13 markdown
joedicastro.com/pages/markdown.html 10/22
Tecleas Obtienes
|CabeceraA|CabeceraB|
|||
|CampoA0|CampoB0|
|CampoA1|CampoB1|
Cabecera A Cabecera BCampo A0 Campo B0
Campo A1 Campo B1
Se puede especificar la alineacin de cada columna mediante la adicin de dos puntos a laslneas de separacin. Dos puntos a la izquierda de la lnea de separacin har que la columnaest alineada a la izquierda, dos puntos a la derecha de la lnea har que la columna estalineada a la derecha, dos puntos en ambos lados significa que la columna se alinea al centro.
Tecleas Obtienes
|Elemento|Cantidad|Precio|
|:|::|:|
|Item1|15|150|
|Item2|3250|23,65|
Elemento Cantidad PrecioItem 1 15 150
Item 2 3250 23,65
CdigoSe pueden crear bloques de cdigo para albergar extractos de cdigo fuente de un lenguaje deprogramacin o para reproducir literalmente cualquier tipo de texto sin que sea interpretado pormarkdown. Lo nico necesario es que cada lnea de este bloque empiece por al menos 4espacios o 1 tabulado.
De todos modos, es mucho ms recomendable para estas tareas emplear elresaltado de cdigo que se especifica en esta seccin.
Tecleas Obtienes
Estoesunprrafonormal.
Estoesunprrafodecdigo.
Esto es un prrafo normal.
Existe otro modo de crear un bloque de cdigo, encerrndolo entre dos lneas formadas por treso ms caracteres tilde ~
Estoesunprrafodecdigo.
07/04/13 markdown
joedicastro.com/pages/markdown.html 11/22
Tecleas Obtienes
Estoesunprrafonormal
~~~
Estoesunprrafodecdigo.
~~~
Esto es un prrafo normal.
Por ltimo existe una opcin para resaltar pequeos trozos de cdigo dentro de prrafos detexto normal. Para lograr esto debemos encerrar el cdigo entre dos acentos graves `
Tecleas Obtienes
Estoesunprrafonormal,conun
trozodecdigo,`importthis`
insertadoenelmediodelmismo.
Esto es un prrafo normal, con un trozo de cdigo,importthis insertado en el medio del mismo.
Lneas HorizontalesPara crear lneas horizontales se debe crear una lnea rodeada de lneas en blanco y compuestapor 3 o ms smbolos, que pueden ser guiones, asteriscos o guiones bajos. Pueden crearseespacios entre estos caracteres si as se desea por esttica.
Tecleas Obtienes
***
___
Estoesunprrafodecdigo.
07/04/13 markdown
joedicastro.com/pages/markdown.html 12/22
Escapar carcteresQue ocurre cuando queremos mostrar un carcter que markdown emplea para el marcado? Esposible que dependiendo de donde y como se emplee este smbolo, sea interpretado pormarkdown y nos estropee el formato del texto. En este caso lo que se necesita es escapar elcarcter con el smbolo backslash \ En esta tabla se muestran los smbolos que pueden serescapados por markdown.
Tecleas Obtienes
\\\`\*\_\{\}\[\]\(\)\#\+\\.\!
\:\| \ ` * _ {} [] () # + - . ! : |
Notas a pie de pginaLas notas de pgina se crean de una manera muy sencilla en Markdown. Cada nota de pie depgina se compone de dos elementos: un marcador al lado del texto que se convierte en unsuperndice y de una definicin que se puede colocar en una lista de notas al pie al final dedocumento. Ejemplo:
Tecleas Obtienes
Estoesuntextoconnotaalpie
[^1]
[^1]:Estoesunanotaalpiede
pgina.
Esto es un texto con nota al pie 1
1. Esto es una nota al pie de pgina.
Las definiciones de la nota al pie se pueden encontrar en cualquier parte del documento, perolas notas siempre se mostrarn en el orden en que estn vinculados en el texto. Hay que teneren cuenta que no puede hacer dos enlaces a la misma nota al pie: si se intenta, la referencia de lanota segunda quedar como texto sin formato.
Cada marcador de nota debe tener un nombre distinto. Ese nombre se utiliza para vincular lanota a la que hace referencia a las definiciones de la nota, pero no tiene ningn efecto sobre lanumeracin de las notas al pie. Los nombres pueden contener cualquier carcter vlido quesirva para la una Identificacin de un atributo HTML (es decir, que cumpla con la expresinregular [AZaz][AZaz09_:.]*), no tienen porque ser necesariamente nmeros. Ejemplo:
07/04/13 markdown
joedicastro.com/pages/markdown.html 13/22
Tecleas Obtienes
Estoesuntextoconnotaalpie
[^nota1]yestaesotranota[^nota2]
[^nota1]:Estoesunanotaalpiede
pgina.
[^nota2]:Estoeslasegundanotaal
pie.
Esto es un texto con nota al pie 1 y esta es otranota 2
1. Esto es una nota al pie de pgina.
2. Esto es la segunda nota al pie.
AbreviaturasPara crear abreviaturas HTML lo nico necesario es crear una lista de ellas (normalmente alfinal del texto) y en cualquier lugar del texto que aparezca la abreviatura se aplicarautomticamente. Las listas de abreviaturas se crean como las listas de enlaces, pero precedidaspor un asterisco.
Tecleas Obtienes
LaespecificacinHTMLesmantenidaporel
W3C.
*[HTML]:HyperTextMarkupLanguage
*[W3C]:WorldWideWebConsortium
La especificacin HTML es mantenida porel W3C.
Las abreviaturas son sensibles a maysculas, por lo que hay que tenerlo en cuenta. Se puedencrear abreviaturas de ms de una palabra.
Identificadores de CabeceraLos identificadores de cabecera nos permiten establecer un Identificador a las cabeceras paraluego poder enlazarlas en cualquier otro lugar del texto. Es lo que empleo para crear el ndice deesta pgina. Funcionara como un anchor HTML (ancla) pero que solo se puede aplicar en lascabeceras.
Tecleas Obtienes
###EstoesunacabeceraconunId
{#cabecera1}Esto es una cabecera conun Id
07/04/13 markdown
joedicastro.com/pages/markdown.html 14/22
[Enlaceaesacabecera](#cabecera1)Enlace a esa cabecera
En Markdown Python todas las cabeceras llevan por defecto asociado un Id que depende deltexto de la misma, aunque siempre prevalece la que nosotros establezcamos.
Pygments: Resaltado de Sintaxis para Cdigo Fuente
Para introducir ejemplos de cdigo fuente en el sitio, habilitar el resaltado (o coloreado) desintaxis mejora la presentacin y legibilidad de los mismos. Existen diversos motores que nospermiten realizar esta funcin y Pygments es uno de los mejores. Est realizado en Python, porlo que se integra perfectamente con el software que genera este sitio y con python markdown.
Resaltar cdigo con markdown y Pygments es realmente sencillo, solamente hay que hacer losmismo que haramos com markdown, pero aadiendo un lexer de Pygments en la primeralnea. Un lexer es un identificador del lenguaje que queremos resaltar para que el coloreado sehaga correctamente. Los lexer se construyen empleando 2 caracteres : seguidos del nombre dellexer, por ejemplo, :::python sera el lexer empleado para identificar un fragmento de cdigo enlenguaje Python.
Lo podemos ver mejor con un ejemplo:
Tecleas Obtienes
:::python
importlifetime
foreach_dayin
lifetime.days():
carpe_diem()
Lexers de Pygments ms comunes para resaltado desintaxis
A continuacin muestro una relacin de los lexers ms comunes empleados para el resaltado decdigo fuente.
importlifetime
foreach_dayinlifetime.days():
carpe_diem()
07/04/13 markdown
joedicastro.com/pages/markdown.html 15/22
apache - configuracin Apache
bash y console - Bash y Shell
bat - Fichero Batch DOS/Windows
boo - Boo
c - C
cpp - C++
DocumentRoot/www/example1
ServerNamewww.example1.com
#Otherdirectiveshere
#!/bin/bash
echo"Holamundo"
@echoHola,Mundo!
print"Hello,world!"
#include
intmain()
{
printf("Hola,mundo!\n")
return0
}
07/04/13 markdown
joedicastro.com/pages/markdown.html 16/22
csharp - C
css - Cascade Style Sheet (CSS)
diff udiff - Diff
#include
usingnamespacestd
intmain(){
cout
07/04/13 markdown
joedicastro.com/pages/markdown.html 17/22
erlang - Erlang
go - Go
haskell - Haskell
html - HTML
@@1,3+1,9@@
+Thisisanimportant
+notice!Itshould
+thereforebelocatedat
+thebeginningofthis
+document!
+
Thispartofthe
documenthasstayedthe
samefromversionto
module(hola).
export([hola_mundo/0]).
hola_mundo()>io:fwrite("Holamundo!\n").
packagemain
import"fmt"
funcmain(){
fmt.Println("HelloWorld!")
}
holaMundo::IO()
holaMundo=putStrLn"Holamundo!"
07/04/13 markdown
joedicastro.com/pages/markdown.html 18/22
java - Java
js - javascript
latex - LaTeX
cl - Common Lisp
lua - Lua
HolaMundo
HolaMundo!
publicclassHolaMundo{
publicstaticvoidmain(String[]args){
System.out.println("Hola,mundo!")
}
}
document.write("Hola,mundo!")
\documentclass[12pt]{article}
\usepackage{lingmacros}
\usepackage{treedvips}
\begin{document}
\section*{NotesforMyPaper}
(formatt"Hola,mundo!")
07/04/13 markdown
joedicastro.com/pages/markdown.html 19/22
mysql - MySQL
pascal y delphi - Pascal y Delphi
perl - Perl
php - PHP
python py pycon pytb python3 cython - Python
ruby - Ruby
scala - Scala
print("Hola,Mundo!\n")
SELECT'HOLAMUNDO'
ProgramHolaMundo
Begin
Write('Hola,Mundo!')
End.
print"Hola,mundo\n"
print"HolaMundo!"
puts"HolaMundo"
07/04/13 markdown
joedicastro.com/pages/markdown.html 20/22
scheme - Scheme
smalltalk - Smalltalk
sql - SQL
sqlite3 - sqlite3
text - Texto simple monoespaciado
vala - Vala
objectHelloWorldextendsApplication{
println("Helloworld!")
}
(display"HelloWorld")
Transcriptshow:'Hola,mundo!'
SELECT'HOLAMUNDO'
FROMDUAL
sqlite>CREATETABLEtbl2(
...>f1varchar(30)primarykey,
...>f2text,
...>f3real
...>)
sqlite>
HolaMundo
classDemo.HelloWorld:GLib.Object{
07/04/13 markdown
joedicastro.com/pages/markdown.html 21/22
El contenido est bajo licencia Creative Commons
vbnet - Visual Basic .NET
vim - Vim Script
xml - XML
201 0-201 3 joe di castro - correo| twitter | bitbucket | github
publicstaticintmain(string[]args){
stdout.printf("Hello,World\n")
return0
}
}
PrivateSubForm_Load()
Msgbox"HolaMundo"
EndSub
function!ToggleSyntax()
ifexists("g:syntax_on")
syntaxoff
else
syntaxenable
endif
endfunction
nmaps:callToggleSyntax()
Tove
Jani
Reminder
Don'tforgetmethisweekend!
07/04/13 markdown
joedicastro.com/pages/markdown.html 22/22