Formato y Escritura en el Foro

Este post es una guía sobre cómo usar Markdown (para escribir lindo en el foro :wink:).

Tutorial Interactivo (Inglés)

Comandos Básicos (Inglés)

Con el tiempo el post se irá actualizando, hasta ser algo parecido al segundo link, pero en español. No todo lo que aparece en los links tiene por qué andar en este foro, aunque la gran mayoría debería.

  1. Formato de Texto
    1.1. Negrita
    1.2. Cursiva
    1.3. Tachar
    1.4. Subrayar
  2. Títulos
  3. Listas
    3.1. Listas sin orden
    3.2. Listas con orden
  4. Texto escondido / Spoiler
  5. Bloques de código
  6. Citar a un usuario
  7. Mencionar a un usuario
  8. Subir imágenes

1: Formato de Texto

1.1: Negrita

Para escribir en negrita debemos rodear el texto que queremos con “**

De esta forma, si queremos escribir Olimpíada Informática Argentina, deberíamos tipear:

*Olimpíada Informática Argentina*

1.2: Cursiva

Para escribir en cursiva debemos rodear el texto con “_

Si queremos escribir Nivel 3, deberíamos tipear:

_Nivel 3_

¿Qué ocurre si queremos usar ambos?

Para ello debemos rodear el texto con “***

Si queremos escribir Medalla de Plata, deberíamos tipear:

*Medalla de Plata*

1.3: Tachar texto

Si queremos tachar texto, debemos rodearlo de la siguiente forma [s] texto a tachar [/s]

De escribir ese ejemplo, obtendríamos:

texto a tachar

Ahora también existe funciona la opción de rodear al texto entre “~~”, escribiendo por ejemplo ~~existe~~

1.4: Subrayar texto

Para subrayar un texto, debemos encerrarlo de manera similar pero con la letra u.

Así, escribiendo: [u] texto subrayado [/u], obtenemos:

texto subrayado

Además pueden combinarse cualquiera de estas 4 opciones entre sí:

texto subrayado

Se escribe como:

***[s][u] texto subrayado [/u][/s]***

2: Títulos

Para escribir un título/encabezado, debemos tipear “#” seguido del texto a elección. Además según la cantidad de numerales que uno ponga, menor será el tamaño del texto (hasta 6).

Para escribir:

Palabra 1

Palabra 2

Palabra 3

Palabra 4

Palabra 5
Palabra 6

Deberíamos tipear:

# Palabra 1
## Palabra 2
### Palabra 3
#### Palabra 4
##### Palabra 5
###### Palabra 6


3: Listas

3.1: Listas sin orden

  • Empezar una lista
  • Seguir una lista
  • Terminar una lista

Se puede escribir tipeando un “*”, seguido de un espacio:

* Empezar una lista
* Seguir una lista
* Terminar una lista

Si quisiéramos tener una lista adentro de otra, deberíamos hacerlo de la misma forma, indentando correctamente usando al menos un espacio. Se pueden utilizar + y - para ganar claridad. Por ejemplo:

  • Empezar una lista
    • Ítem 1
    • Ítem 2
      • Ítem 2.1
    • Ítem 3
  • Seguir una lista
  • Terminar una lista

Se crea tipeando:

* Empezar una lista
   + Ítem 1
   + Ítem 2
      - Ítem 2.1
   + Ítem 3
* Seguir una lista
* Terminar una lista

3.2: Listas con Orden

Funcionan al igual que las listas sin orden, pero utilizando un número como ordinal. Por ejemplo, la siguiente lista:

  1. Leer bien el enunciado
  2. Pensar el problema en papel
  3. Leer otra vez el enunciado
  4. Diagramar los pasos importantes de la implementación
  5. Pensar casos bordes
    1. ¿n == 0 anda?
    2. ¿Y dividiendo por 0 en algún lado?
    3. ¿Puede haber overflow?
      1. ¿Seguro?
    4. ¿Los arreglos son suficientemente grandes?
  6. Crear ejemplos y sus respuestas
  7. Implementar en la computadora
  8. ¿PASA LOS EJEMPLOS?

Se crea tipeando lo siguiente:

1. **Leer bien el enunciado**
1. Pensar el problema en papel
1. Leer otra vez el enunciado
1. Diagramar los pasos importantes de la implementación
1. Pensar casos bordes
   1. ¿n == 0 anda?
   2. ¿Y dividiendo por 0 en algún lado?
   2. ¿Puede haber **overflow**?
      1. ¿Seguro?
   2. ¿Los arreglos son suficientemente grandes?
   2. ...
1. Crear ejemplos y sus respuestas  
1. Implementar en la computadora
1. ***¿PASA LOS EJEMPLOS?***

4: Texto escondido / Spoiler

Se puede escribir un texto, que despliegue otro al hacer click. Por ejemplo:

El Titanic

Se hunde

El Tiranic
También

Para ello, debemos tipear:

[details=El Titanic]
  Se hunde
[/details]

[details=El Tiranic]
    También
[/details]

La diferencia es que si se usan 4 espacios o más en la indentación el mensaje aparece en un bloque.

Se suele usar al escribir la solución a un problema, dado que muchas veces quien lo lee no quiere ver nada de la solución (incluso por error) antes de intentar resolver el problema.


5: Texto preformateado / Bloques de Código

Para rodear un texto de una línea podemos rodearlo con `.

Si queremos escribir (a+b)*(c+d) == N, deberíamos tipear:

`(a+b)*(c+d) == N`

Si quisiéramos escribir un bloque de texto preformateado, deberíamos encerrarlo con “```”

De esta forma, para escribir:

public class HelloWorld {
    public static void main(String[] args) {
        // Imprime "Hello, World" en la terminal.
        System.out.println("Hello, World");
    }
}

Podemos escribir:

```
 public class HelloWorld {
     public static void main(String[] args) {
         // Imprime "Hello, World" en la terminal.
         System.out.println("Hello, World");
     }
 }
```

Por defecto, elige unos ciertos colores (apropiados para C++), de todas formas, se puede especificar el lenguaje con el que se desea tener syntax highlighting, agregando el nombre del lenguaje a continuación de las primeras tres comillas.

public class HelloWorld {
    public static void main(String[] args) {
        // Imprime "Hello, World" en la terminal.
        System.out.println("Hello, World");
    }
}

Se escribe como:

``` java
public class HelloWorld {
     public static void main(String[] args) {
         // Imprime "Hello, World" en la terminal.
         System.out.println("Hello, World");
     }
}
```

6: Citar a un usuario

Se puede utilizar un formato especial para generar bloques de texto, que es mayoritariamente utilizado para citar las palabras de otras personas. Ejemplo:

Sancho Panza:

“¿Qué gigantes?”

Don Quijote:

“Aquellos que allí ves, de los brazos largos,
que los suelen tener algunos de casi dos leguas.”

Se crea con las siguientes líneas:

> Sancho Panza
>> "¿Qué gigantes?"
>
> Don Quijote:
>> "Aquellos que allí ves, de los brazos largos,
>> que los suelen tener algunos de casi dos leguas."

Para citar mensajes de otros usuarios en el foro, podemos seleccionar el texto que deseamos y hacer click en el cartel “Citar” que aparece. Haciendo esto, se ve así:

Y se hace con las siguientes líneas (que se escriben solas, si uno selecciona el texto y hace click en el cartel Citar):

[quote="Guty, post:1, topic:64"]
   > Para citar mensajes de otros usuarios en el foro...
[/quote]

7: Mencionar un usuario

Si se quiere capturar la atención de un usuario particular a un tema, se puede mencionarlo escribiendo un @ seguido del nombre del usuario. Al realizar esto, se le notificará al usuario que ha sido mencionado en un tema.

Al tipear @ debería desplegarse un menú donde aparecen sugerencias para autocompletar el nombre de usuario deseado.

Un ejemplo típico de uso, es citar a alguien y mencionarlo al mismo tiempo (para hacerle una pregunta sobre el texto citado, por ejemplo).


8: Subir imágenes

Hay dos formas de hacerlo. La primera es copiando la url de la imagen, y la segunda es subiendo un archivo de nuestra computadora.

Por ejemplo, para subir la imagen del logo de la Olimpíada, podemos hacerlo de la primera forma. (notar que la frase “Logo de OIA” aparece al dejar el mouse sobre la imagen)

Logo de la Olimpíada Informática Argentina

Para ello utilizamos el comando

![Logo de la Olimpíada Informática Argentina](http://www.oia.unsam.edu.ar/wp-content/themes/responsive/core/images/logo_oia.png "Logo de OIA" )

Primero que nada escribirmos !, luego, entre corchetes escribimos las palabras (opcionales) que aparecen reemplazando a la imagen cuando no puede ser cargada por algún motivo. Después, entre paréntesis ponemos la url de la imagen, y también de forma opcional, podemos agregar entre comillas un mensaje que se muestra al pasar el mouse por la imagen.

Para la segunda opción, la mejor forma es apretar el botón “Subir” que se encuentra en la barra de herramientas al escribir un tema, y seguir las instrucciones. En este caso, se puede regular el ancho y el alto de la imagen, cambiando los números que siguen a width y height (además del texto oculto al pasar el mouse).

En este caso, se genera con la línea:

<img src="/...png" width="196" height="196" title="Grafo de Ejemplo">

Los puntos suspensivos se llenan solos al cargar la imagen con el botón “Subir”.


4 Me gusta