¿Cómo darle formato a mis publicaciones utilizando Markdown o HTML?

Cuando publicas en Stack Overflow en español, puedes utilizar el editor visual (para preguntas y respuestas pero no para comentarios), Markdown, y un poco de HTML. Si no conoces de Markdown tal vez quieras visitar la página de referencia oficial de sintaxis Markdown .

Aquí algunos consejos para casos de formato común; puedes encontrar más detalles en nuestra página de ayuda para edición avanzada.

Bloques de código

Inserta cuatro espacios al inicio de cada línea del párrafo para crear un bloque <pre> <code>:

    printf("%d\n", 42);  /* ¿Cuál era
                        la pregunta? */

El texto será rodeado por etiquetas HTML y se mostrará con un tipo de letra de espacio fijo. Los primeros cuatro espacios serán omitidos pero cualquier otro espacio en blanco será preservado. Puedes seleccionar un bloque de código y presionar ctrl + K para agregar los cuatro espacios al inicio de cada línea seleccionada.

Anotaciones de Markdown y HTML serán ignoradas dentro del bloque de código:

    <blink>
      Odiarías esto si no estuviera
      dentro de un bloque de código.
    </blink>

Sección de código

Utiliza acentos abiertos para crear una sección de <code> dentro de la misma línea:

Puedes usar un `<div>` con esta regla `display: inline-block;` activa.

Esto será mostrado como:

Puedes usar un `<div>` agregando esta regla: `display: inline-block;`.

Al igual que los bloques de código, las secciones de código serán mostrados con un tipo de letra de espacio fijo. Anotaciones de Markdown y HTML no funcionarán dentro de ellas. Tenga en cuenta que a diferencia de los bloques de código, en las secciones de código debe convertir manualmente cualquier HTML dentro de ellas.

Resaltador de sintaxis para código

Los bloques de código pueden ser resaltados utilizando Google Prettify. En muchos casos el lenguaje a resaltar será inferido a partir de las etiquetas de la pregunta.

Para especificar manualmente el lenguaje de un bloque de código, inserta un comentario HTML como este antes del bloque:

<!-- language: lang-js -->

    setTimeout(function () { alert("JavaScript"); }, 1000);
    

Puedes utilizar uno de los códigos de lenguaje soportados, como lang-cpp o lang-sql, o puedes especificar una etiqueta y el lenguaje asociado a esta etiqueta será utilizado:

<!-- language: c# -->

    public static bool IsAwesome { get { return true; } }
    

Para especificar un lenguaje a ser usado no solo por el siguiente sino para todos los bloques de código utiliza:

<!-- language-all: lang-html -->

Para especificar que no deseas utilizar resaltador de sintaxis utiliza:

<!-- language-all: lang-none -->

Saltos de línea

Agrega dos espacios al final de una línea para incluir un <br/> salto de línea:

¿De cuantas maneras te he querido?  
Déjame contarlas todas

Cursiva y negrita

*Esto es cursiva* y _esto_ también.
**Esto es negrita** y __esto__ también.
Usa ***cursiva y negrita a la misma vez*** si ___tienes que hacerlo___.

Enlaces

Existen tres formas de escribir enlaces. Cada una es más fácil de leer que la anterior:

Un enlace en la misma linea hacia [Google](http://www.google.com)
Un enlace estilo referencia hacia [Google][1]
Un enlace bastante legible hacia [Yahoo!][yahoo]

  [1]: http://www.google.com/
  [yahoo]: http://www.yahoo.com/

Las definiciones de los enlaces pueden ocurrir en cualquier parte del documento, antes o después del lugar en que son usados. Los nombres de los enlaces [1] y [yahoo] pueden ser cualquier cadena de caracteres única y no distingue entre mayúsculas y minúsculas; [yahoo] es lo mismo que [YAHOO].

Enlaces avanzados

Los enlaces pueden tener un atributo de título, que se mostrará al colocar el cursor sobre el enlace. Los atributos de título también pueden ser añadidos; son de ayuda si el enlace mismo no es lo suficientemente descriptivo para que el usuario sepa a donde lo lleva.

Un enlace con un [nombre poco claro](http://www.google.com/ "Google").
Nunca escribas "[haz clic aquí][^2]".
Visita [nuestra página][web]

  [^2]: http://www.w3.org/QA/Tips/noClickHere
        (Recomendación de no usar la frase "haz clic aquí")
  [web]: http://programmers.stackexchange.com/ "Programmers Stack Exchange"

También puedes utilizar sintaxis de HTML estándar:

<a href="http://example.com" title="example">example</a>

Listas simples

Lista de viñetas <ul>:

- Usa un signo "menos"
+ O un signo "más"
* O un asterisco

Lista numerada <ol>:

1. Las listas numeradas son fáciles
2. Markdown lleva la cuenta de los números por ti
7. De tal manera que este debería ser el número 3

Lista a doble espacio:

- Esta lista será rodeada por etiquetas `<p>` 

- Así que habrá espacio extra entre cada punto de ella

Citas en bloque simple

Agrega > al inicio de cualquier línea para crear un <blockquote>.

> Esta sintaxis está basada en los programas de correo
> que normalmente marcan las citas así.  No es necesario poner los cambios de línea
> a los párrafos de la cita, pero se ve mejor si lo haces.  Depende de cuanta pereza tengas

Etiquetas

Para referirte a una etiqueta del sitio, , utiliza:

Vea las preguntas con la etiqueta [tag:elefantes] para saber más.

La etiqueta será enlazada automáticamente a la página de información de la etiqueta correspondiente.

Formato para comentarios

Los comentarios solo soportan negrita, cursiva, código y enlaces; además están disponibles unas cuantas formas abreviadas para enlaces.

texto en _cursiva_ y **negrita**,
secciones de `código con acentos abiertos`,
y [enlaces básicos](http://example.com).

Enlaces abreviados:

  • [meta] – enlace al sitio Meta actual; el texto del enlace es el nombre del sitio (ej. "Stack Overflow Meta"). No será un enlace si el sitio no tiene (o ya te encuentras en) el sitio Meta.
  • [edit] – enlace a la página de edición de la publicación en donde está el comentario, es decir /posts/{id}/edit. El texto del enlace es "editar" (respetando mayúsculas y minúsculas).
  • [tag:nombre-de-etiqueta] y [meta-tag:nombre-de-etiqueta] – enlace a la página de la etiqueta en mención. El texto del enlace es el nombre de la etiqueta. meta-tag solo funciona en los sitios meta.
  • [about] – enlace a la página "Acerca de". El texto del enlace es "acerca de" (respetando mayúsculas y minúsculas).
  • [help] – enlace al Centro de Ayuda.
  • [chat] – enlace al chat del sitio actual, el texto del link es "Chat de {Stack Overflow}".

Para más enlaces abreviados, ver la guía expandida de formato.

Imágenes

Las imágenes pueden ser añadidas principalmente utilizando el botón en la barra del editor. Esto hace aparecer una interfaz especial que te permite subir una imagen en línea (al servicio de alojamiento de Imgur) a través de nosotros, aun desde tu portapapeles. Opcionalmente pueden ser agregadas de manera similar a un enlace:

  • HTML <img src="http://example.com/img.jpg">
  • Markdown ![sample image](http://example.com/img.jpg)