markdown

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


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


#####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


[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


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.


07/04/13 markdown


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


>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


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


Primertermino

:Primeradefinicin

:Segundadefinicin

Segundotermino

:Segundadefinicin

Primer trminoPrimera definicinSegunda 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


07/04/13 markdown


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


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 ~


07/04/13 markdown


Tecleas Obtienes

Estoesunprrafonormal

~~~


~~~

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

***

___


07/04/13 markdown


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


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


[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


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


csharp - C

css - Cascade Style Sheet (CSS)

diff udiff - Diff

#include

usingnamespacestd

intmain(){

cout

07/04/13 markdown


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


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


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


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


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


markdown

Documents