Consejos para editar y formatear texto

Esta es una guía de todas las posibilidades que puede emplear para editar y formatear texto en este sitio para enriquecer sus comentarios.


Ejemplo

Esto es un ejemplo de como empleando una manera muy sencilla de marcar el texto, se pueden conseguir los mismos resultados espectaculares que con un editor de texto visual.

Teclea Obtiene
Documento de ejemplo
====================
 
Lorem ipsum [dolor sit amet](#header0), consectetur adipiscing elit. Curabitur eget ante nunc. Pellentesque a tortor ipsum, id rhoncus orci. Quisque leo sapien, rutrum id convallis id, rutrum in ligula. Vestibulum **semper adipiscing leo** et blandit.
 
Sed nibh quam, hendrerit _sit amet aliquam_ vel, pulvinar molestie augue.
 
> Integer cursus, nunc eu ultrices pellentesque, eros leo malesuada turpis, vel convallis neque dolor a nunc. Sed lacus risus, condimentum vitae posuere quis, ultrices pharetra nunc.
 
Lista numerada (ordenada)
 
1. Este es el primer elemento
2. Este es el segundo elemento
  * Una lista de puntos anidada
  * Se llama también desordenada
     * Tercer nivel de anidamiento
3. Este es el tercer elemento
 
![avatar](/files/imagenes/avatar.png)
 
### Cabecera ###
 
- - -
 
Morbi erat augue, feugiat eu pellentesque eget, hendrerit quis lectus. Fusce dignissim pretium nibh sed dignissim. Pellentesque lobortis ante eu dui fermentum vitae blandit risus aliquet.
 
|   | solo texto | HTML Limpio  |
| -------------- | -- | ------- |
| Markdown       | Si | Si      |
| Editor WYSISWG | X  | A veces |
 
<python>
import lifetime
 
for each_day in lifetime.days():
    carpe_diem()
</python>
 
Suspendisse posuere velit et velit vehicula at scelerisque orci suscipit. Nulla facilisis lorem eu sem viverra varius nec ut felis.
 
Esto es un texto con nota al pie [^ejemplo] y esta es otra nota [^segunda]
 
*[vehicula]: automobila
[^ejemplo]: Esto es una nota al pie.
[^segunda]: Esto es la segunda nota.

Documento de ejemplo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante nunc. Pellentesque a tortor ipsum, id rhoncus orci. Quisque leo sapien, rutrum id convallis id, rutrum in ligula. Vestibulum semper adipiscing leo et blandit.

Sed nibh quam, hendrerit sit amet aliquam vel, pulvinar molestie augue.

Integer cursus, nunc eu ultrices pellentesque, eros leo malesuada turpis, vel convallis neque dolor a nunc. Sed lacus risus, condimentum vitae posuere quis, ultrices pharetra nunc.

Lista numerada (ordenada)

  1. Este es el primer elemento
  2. Este es el segundo elemento
    • Una lista de puntos anidada
    • Se llama también desordenada
      • Tercer nivel de anidamiento
  3. Este es el tercer elemento

avatar

Cabecera


Morbi erat augue, feugiat eu pellentesque eget, hendrerit quis lectus. Fusce dignissim pretium nibh sed dignissim. Pellentesque lobortis ante eu dui fermentum vitae blandit risus aliquet.

solo texto HTML Limpio
Markdown Si Si
Editor WYSISWG X A veces
import lifetime

for each_day in lifetime.days():
    carpe_diem()

Suspendisse posuere velit et velit vehicula at scelerisque orci suscipit. Nulla facilisis lorem eu sem viverra varius nec ut felis.

Esto es un texto con nota al pie 1 y esta es otra nota 2


  1. Esto es una nota al pie.

  2. Esto es la segunda nota.

Lo que sigue a continuación es una lista detallada de todas las características que se pueden emplear en este sitio para crear comentarios, empleando únicamente un marcado ligero como este empleando Markdown


Markdown

Este es el lenguaje de marcado empleado en los comentarios en este sitio, que le permite formatear el texto fácilmente sin la necesidad de emplear el más 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 y basado 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 XHTML correctamente formateado. Los artículos de este sitio están elaborados empleando markdown, sin utilizar ningún tipo de editor visual WYSIWYG, lo que facilita el crear documentos XHTML limpios y fácilmente editables en el futuro. Son un buen ejemplo de las capacidades de Markdown. Aunque no es muy conocido, empieza a ser muy popular y utilizado entre los programadores.

Cabeceras

Los encabezamientos HTML se producen colocando un número determinado de almohadillas # antes del texto correspondiente al nivel de encabezamiento deseado (HTML ofrece hasta seis niveles). Los encabezamientos posibles se pueden ver en la siguiente tabla:

Teclea Obtiene
# Esto es un H1

Esto es un H1

## Esto es un H2

Esto es un H2

### Esto es un H3

Esto es un H3

#### Esto es un H4

Esto es un H4

##### Esto es un H5
Esto es un H5
###### Esto es un H6
Esto es un H6

Se puede encerrar cada encabezado entre almohadillas, por motivos puramente estéticos, porque no es necesario en absoluto, es decir, se puede hacer esto:

Teclea Obtiene
### Esto es un H3 ###

Esto es un H3

Para los encabezamientos de los dos primeros niveles existe también otra manera de hacer lo mismo, que sería la siguiente:

Teclea Obtiene
Esto es un H1
=============

Esto es un H1

Esto es un H2
-------------

Esto es un H2

Es decir para los encabezamientos principales subraye el texto con el signo igual. Para los encabezamientos de segundo nivel utilice guiones para subrayar. Es indiferente el número de signos iguales o guiones que emplee, con uno es suficiente.

Enlaces

Existen también dos maneras de crear enlaces, se pueden ver en la siguiente tabla:

Teclea Obtiene
[Con titulo](http://joedicastro.com "titulo")
Con titulo
[Sin titulo](http://joedicastro.com)
Sin titulo
[Enlace 1][1], [Enlace 2][2], [Enlace 3][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 automáticos para direcciones URL, simplemente encerrarla entre los caracteres menor < que y mayor que >:

Teclea Obtiene
<http://joedicastro.com> http://joedicastro.com

Pero aún existe otro método, que no emplea markdown que se puede emplear en este sitio para crear enlaces automáticos, simplemente escriba la dirección URL y automáticamente se convertirá en un enlace.

Párrafos

Para crear párrafos se deja una línea en blanco. De este modo.

Teclea Obtiene
Este es el primer párrafo.
 
Este es el segundo párrafo.

Este es el primer párrafo.

Este es el segundo párrafo

Para crear un salto de línea dentro de un párrafo, simplemente deje dos espacios al final de la última palabra de esa línea, de este modo:

Teclea Obtiene
Esta es la primera línea
y este es el salto de línea.
Esta es la primera línea
y este es el salto de línea.

Formato

El formato básico del texto, es decir negritas y cursiva, se pueden realizar de varias maneras:

Teclea Obtiene
**Esto es negrita**
Esto es negrita
__Esto también es negrita__
Esto también es negrita
*Esto es cursiva*
Esto es cursiva
_Esto también es cursiva_
Esto también es cursiva

Se pueden emplear indistintamente tanto el asterisco * como el guión bajo _ siempre y cuando no se mezclen y lo que determina el formato es el número de ellos antes y después del bloque de texto a formatear. Uno es cursiva, dos es negrita, así de sencillo.

Citas

Para crear bloques de cita, se emplea el carácter mayor que > antes del bloque de texto. En la siguiente tabla se pueden ver las opciones para crearlos.

Teclea Obtiene
Esto es una línea normal
 
> Esto es parte de un bloque de cita.
> Esto es parte del mismo bloque de cita.

Esto es una línea normal

Esto es parte de un bloque de cita. Esto es parte del mismo bloque de cita.

> Esto es parte de un bloque de cita.
Esto continúa el bloque incluso aunque no hay símbolo 'mayor que'.
 
La línea en blanco finaliza el bloque.

Esto es parte de un bloque de cita. Esto continúa el bloque incluso aunque no hay símbolo 'mayor que'.

La línea en blanco finaliza el bloque.

Esto es una línea normal
 
> Esto es parte de un bloque de cita.
> Esto es parte 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 primer nivel.

Esto es una línea normal

Esto es parte de un bloque de cita. Esto es parte 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 primer nivel.

Listas

Markdown permite crear dos tipos de listas, ordenadas y desordenadas, es decir numeradas o listas de puntos. Para distinguir los tipos y como se crean, nada mejor que verlo con ejemplos:

Teclea Obtiene
Lista numerada (ordenada)
 
1. Este es el primer elemento
2. Este es el segundo elemento
3. Este es el tercer elemento

Lista numerada (ordenada)

  1. Este es el primer elemento
  2. Este es el segundo elemento
  3. Este es el tercer elemento
Lista de puntos (desordenada)
 
* Un elemento de la lista
* Otro elemento de la lista
* El tercer elemento de la lista

Lista de puntos (desordenada)

  • Un elemento de la lista
  • Otro elemento de la lista
  • El tercer elemento de la lista
Se pueden emplear también + y - en vez de *
 
* Un elemento de la lista
+ Otro elemento de la lista
- El tercer elemento de la lista

Se pueden emplear también + y - en vez de *

  • Un elemento de la lista
  • Otro elemento de la lista
  • El tercer elemento de la lista
Se pueden mezclar distintos tipos de listas y anidar unas dentro de otras.
 
1. Esto es una lista ordenada
2. Segundo elemento de la lista ordenada
  1. Esta es una lista ordenada anidada dentro de otra
  2. Este es el segundo elemento de la lista anidada
    * Lista desordenada anidada al mismo nivel
      1. Lista ordenada anidada a tercer nivel
      2. Segundo elemento de esta lista
    * Segundo elemento de la desordenada
3. Tercer elemento de la lista de primer nivel

Se pueden mezclar distintos tipos de listas y anidar unas dentro de otras.

  1. Esto es una lista ordenada
  2. Segundo elemento de la lista ordenada
    1. Esta es una lista ordenada anidada dentro de otra
    2. Este es el segundo elemento de la lista anidada
    • Lista desordenada anidada al mismo nivel
      1. Lista ordenada anidada a tercer nivel
      2. Segundo elemento de esta lista
    • Segundo elemento de la desordenada
  3. Tercer elemento de la lista de primer nivel

Listas de definiciones

Se pueden crear lista de definiciones, que están compuestas de términos y las definiciones de los mismos, como si fuera un diccionario. Su creación es muy sencilla:

Teclea Obtiene
Primer termino
 : Primera definición
 
Segundo termino
 : Segunda definición
Primer término
Primera definición
Segundo término
Segunda definición
Se pueden aplicar más de una definición a un termino
 
Primer termino
 : Primera definición
 : Segunda definición
 
Segundo termino
 : Segunda definición

Se pueden aplicar más de una definición a un termino

Primer término
Primera definición
Segunda definición
Segundo término
Segunda definición
Se pueden aplicar más de un termino a una definición
 
Primer termino
Segundo termino
 : Primera definición
 
Tercer termino
 : Segunda definición

Se pueden aplicar más de una definición a un termino

Primer término
Segundo término
Primera definición
Tercer término
Segunda definición
Si dejamos una línea en blanco entre el termino y la definición, se creara una párrafo para la definición.
 
Primer termino
 
 : Primera definición
 
Segundo termino
 : Segunda definición

Si dejamos una línea en blanco entre el termino y la definición, se creara una párrafo para la definición.

Primer termino

Primera definición

Segundo termino
Segunda definición
Una definición puede constar de varios párrafos.
 
Primer termino
 : Primera definición
 
 Segundo párrafo de la primera definición
 
Segundo termino
 : Segunda definición

Una definición puede constar de varios párrafos.

Primer término

Primera definición

Segundo párrafo de la primera definición

Segundo término
Segunda definición

Imágenes

La manera de enlazar imágenes es básicamente la misma de crear enlaces, con un única diferencia, se añade el carácter exclamación ! al principio de la pareja de corchetes que definen el nombre del enlace. Ejemplos:

Teclea Obtiene
![Con titulo](/files/imagenes/avatar.png "titulo")
avatar
![Sin titulo](/files/imagenes/avatar.png)
![Imagen 1][1]  ![Imagen 2][2]
 
 [1]: /files/imagenes/avatar.png
 [2]: /files/imagenes/scaphandre.png "scaphandre"

Tablas

Crear tablas es sumamente sencillo, simplemente debemos indicar cuales son los elementos de la cabecera y separar los campos con el símbolo |

Teclea Obtiene
Cabecera A | Cabecera B
-- | --
Campo A0 | Campo B0
Campo A1 | Campo B1
 
Cabecera A Cabecera B
Campo A0 Campo B0
Campo A1 Campo B1

Si se desea, por estética, se pueden alinear las columnas e incluso comenzar y finalizar las filas con el símbolo |, pero no es en absoluto necesario.

Teclea Obtiene
| Cabecera A | Cabecera B |
| ---------- | ---------- |
| Campo A0   | Campo B0   |
| Campo A1   | Campo B1   |
Cabecera A Cabecera B
Campo A0 Campo B0
Campo A1 Campo B1

Se puede especificar la alineación de cada columna mediante la adición de dos puntos a las líneas de separación. Dos puntos a la izquierda de la línea de separación hará que la columna esté alineada a la izquierda, dos puntos a la derecha de la línea hará que la columna esté alineada a la derecha, dos puntos en ambos lados significa que la columna se alinea al centro.

Teclea Obtiene
| Elemento | Cantidad | Precio |
| :------- | :------: | -----: |
| Item 1   | 15       | 150€   |
| Item 2   | 3250     | 23,65€ |
Elemento Cantidad Precio
Item 1 15 150€
Item 2 3250 23,65€

Código

Se pueden crear bloques de código para albergar extractos de código fuente de un lenguaje de programación o para reproducir literalmente cualquier tipo de texto sin que sea interpretado por markdown. Lo único necesario es que cada línea de este bloque empiece por al menos 4 espacios o 1 tabulado.

De todos modos, es mucho más recomendable para estas tareas emplear el resaltado de código que se especifica en esta sección.

Teclea Obtiene
Esto es un párrafo normal.
 
   Esto es un párrafo de código.

Esto es un párrafo normal.

Esto es un párrafo de código.

Existe otro modo de crear un bloque de código, encerrándolo entre dos líneas formadas por tres o más caracteres tilde ~

Teclea Obtiene
Esto es un párrafo normal
 
~~~
Esto es un párrafo de código.
~~~

Esto es un párrafo normal.

Esto es un párrafo de código.

Por último existe una opción para resaltar pequeños trozos de código dentro de párrafos de texto normal. Para lograr esto debemos encerrar el código entre dos acentos graves `

Teclea Obtiene
Esto es un párrafo normal, con un trozo de código, `import this` insertado en el medio del mismo.

Esto es un párrafo normal, con un trozo de código, import this insertado en el medio del mismo.

Líneas Horizontales

Para crear líneas horizontales se debe crear una línea rodeada de líneas en blanco y compuesta por 3 o más símbolos, que pueden ser guiones, asteriscos o guiones bajos. Pueden crearse espacios entre estos caracteres si así se desea por estética.

Teclea Obtiene
***

- - -

___

Escapar carácteres

¿Que ocurre cuando queremos mostrar un carácter que markdown emplea para el marcado? Es posible que dependiendo de donde y como se emplee este símbolo, sea interpretado por markdown y nos estropee el formato del texto. En este caso lo que se necesita es escapar el carácter con el símbolo backslash \ En esta tabla se muestran los símbolos que pueden ser escapados por markdown.

Teclea Obtiene
\\ \` \* \_  \{\} \[\] \(\) \# \+ \- \. \! \: \|

\ ` * _ {} [] () # + - . ! : |

Notas a pie de página

Las notas de página se crean de una manera muy sencilla en Markdown. Cada nota de pie de página se compone de dos elementos: un marcador al lado del texto que se convierte en un superíndice y de una definición que se puede colocar en una lista de notas al pie al final de documento. Ejemplo:

Teclea Obtiene
Esto es un texto con nota al pie [^1]
 
[^1]: Esto es una nota al pie de página.

Esto es un texto con nota al pie 1


  1. Esto es una nota al pie de página.

Las definiciones de la nota al pie se pueden encontrar en cualquier parte del documento, pero las notas siempre se mostrarán en el orden en que están vinculados en el texto. Tenga en cuenta que no puede hacer dos enlaces a la misma nota al pie: si lo intenta, la referencia de la nota segunda quedará como texto sin formato.

Cada marcador de nota debe tener un nombre distinto. Ese nombre se utiliza para vincular la nota hace referencia a las definiciones de la nota, pero no tiene ningún efecto sobre la numeración de las notas al pie. Los nombres pueden contener cualquier carácter válido dentro de una Identificación del atributo HTML, no tienen porque ser necesariamente números. Ejemplo:

Teclea Obtiene
Esto es un texto con nota al pie [^nota1] y esta es otra nota [^nota2]
 
[^nota1]: Esto es una nota al pie de página.
[^nota2]: Esto es la segunda nota al pie.

Esto es un texto con nota al pie 1 y esta es otra nota 2


  1. Esto es una nota al pie de página.

  2. Esto es la segunda nota al pie.

Abreviaturas

Para crear abreviaturas HTML lo único necesario es crear una lista de ellas (normalmente al final del texto) y en cualquier lugar del texto que aparezca la abreviatura se aplicará automáticamente. Las listas de abreviaturas se crean como las listas de enlaces, pero precedidas por un asterisco.

Teclea Obtiene
La especificación HTML es mantenida por el W3C.
 
 *[HTML]: Hyper Text Markup Language
 *[W3C]:  World Wide Web Consortium

La especificación HTML es mantenida por el W3C.

Las abreviaturas son sensibles a mayúsculas, por lo que hay que tenerlo en cuenta. Se pueden crear abreviaturas de más de una palabra.


Resaltado de Sintaxis para Código Fuente

Si quiere introducir ejemplos de código fuente en el sitio, puede habilitar el resaltado de sintaxis para mejorar la presentación y legibilidad de los mismos. Solo tiene que encerrar el código a resaltar entre las etiquetas permitidas. A continuación se muestran las etiquetas que se pueden emplear con ejemplos de uso.

Lenguajes con etiqueta para resaltado de sintaxis

<code>

código genérico
package main
 
import "fmt"
 
func main() {
        fmt.Println("Hola mundo")
}

<blockcode>

código genérico
MODULE Hola;
FROM InOut IMPORT WriteString;
BEGIN
  WriteString ("Hola Mundo");
END Hola.

<apache>

configuración Apache
<VirtualHost *:80>
DocumentRoot /www/example1
ServerName www.example1.com
 
# Other directives here
 
</VirtualHost>

<bash>

Bash
 #!/bin/bash
 echo "Hola mundo"

<c>

C
#include <stdio.h>
 
int main()
{
    printf("¡Hola, mundo!\n");
    return 0;
}

<cpp>

C++
#include <iostream.h>
using namespace std;
 
int main() {
  cout << "¡Hola, mundo!" << endl;
  return 0;
}

<csharp>

C#
 using System;
 
 class MainClass
 {
     public static void Main()
     {
         System.Console.WriteLine("¡Hola, mundo!");
     }
 }

<css>

Cascade Style Sheet (CSS)
</text>
   </td>
   <td class="get">
<css>
body {
    font: 75% georgia, sans-serif;
    color: #555753;
    background: #fff;
    margin: 0;
    padding: 5px;
}

<diff>

Diff
# diff -w name_list.txt name_list_new.txt
2c2,3
< John Doe --- > John M Doe
> Jason Bourne

<dos>

DOS línea de comandos
@echo ¡Hola, Mundo!

<email>

email o mbox

<erlang>

Erlang
-module (hola).
-export([hola_mundo/0]).
 
hola_mundo() -> io:fwrite("Hola mundo!\n").

<generic>

genérico, para ningún lenguaje en concreto
 PROGRAM HOLA
   PRINT *, '¡Hola, mundo!'
 END

<groovy>

Groovy
 println "Hola Mundo!"

<haskell>

Haskell
holaMundo :: IO ()
holaMundo = putStrLn "Hola mundo!"

<html>

HTML
 <html>
   <head>
     <title>Hola Mundo</title>
   </head>
   <body>
 
¡Hola Mundo!
   </body>
</html>

<java>

Java
 public class HolaMundo {
        public static void main(String[] args) {
           System.out.println("¡Hola, mundo!");
        }
 }

<javascript>

JavasCript
 <script type="text/javascript">
   document.write("¡Hola, mundo!");
 </script>

<latex>

Latex
\documentclass[12pt]{article}
\usepackage{lingmacros}
\usepackage{tree-dvips}
\begin{document}
 
\section*{Notes for My Paper}

<lisp>

Lisp
 (format t "¡Hola, mundo!")

<lua>

Lua
print("¡Hola, Mundo!\n")

<mysql>

MySQL
 SELECT 'HOLA MUNDO';

<pascal>

Pascal
 Program HolaMundo;
 Begin
     Write('¡Hola, Mundo!');
 End.

<perl>

Perl
print "Hola, mundo\n"

<php>

PHP
 <?php print "Hola Mundo!"; ?>

<python>

Python
print "¡Hola Mundo!"

<ruby>

Ruby
 puts "Hola Mundo"

<smalltalk>

Smalltalk
 Transcript show: '¡Hola, mundo!'

<sql>

SQL
 SELECT 'HOLA MUNDO'
 FROM DUAL;

<text>

Texto simple monoespaciado
Hola Mundo

<vb> o <vbasic>

Visual Basic
Private Sub Form_Load()
   Msgbox "Hola Mundo"
 End Sub

<vim>

Vim Script
function! ToggleSyntax()
   if exists("g:syntax_on")
      syntax off
   else
      syntax enable
   endif
endfunction
 
nmap <silent>  ;s  :call ToggleSyntax()<CR>

<xml>

XML
<?xml version="1.0" encoding="ISO-8859-1"?>
 - <note>
       <to>Tove</to>
       <from>Jani</from>
       <heading>Reminder</heading>
       <body>Don't forget me this weekend!</body>
   </note>

Opciones

Si el código fuente entre las etiquetas contiene una linea en blanco (e.g. después de la etiqueta de apertura), el código fuente resaltado se mostrará como un bloque de código. De otro modo se visualizara en una sola línea.

Se puede añadir un titulo a un bloque de código con el atributo title. Por ejemplo: Esto

<python title="ejemplo">
  import this
</python>

se visualiza así:

ejemplo
import this

Para las etiquetas genéricas <code> y <blockquote> el lenguaje de resaltado por defecto es Python que es el más empleado en este sitio.

© 2010-2011 joe di castro.