/ Blogging

La guía definitiva para editar tus textos en Ghost

Si te haz iniciado con Ghost, te habrás dado cuenta que no tienes una caja de herramientas para editar tus textos. Y OMG: ¿Cómo creo un h2?, ¿Cómo resalto un texto en negrita? ¿Cómo inserto una imagen? y etc, etc…

Y quizá este sea un detalle que pueda ser desalentador para muchas personas, pues estamos mal acostumbrados a usar editores de texto de tipo WISYWYG (What you see is what you get), sabiendo aún que no son eficientes y que comprometen en parte el performance de la página.

Pero con Ghost es distinto, está basado en un método llamado Markdown, una potente herramienta de escritura que te hará editar tus textos para la web como casi cualquier método. Sin embargo, tiene una breve curva de aprendizaje y suele ser confuso al principio, pero fresco. Aquí yo te ayudo.

En sí, ¿Qué es Markdown?

Markdown es una sintaxis para la escritura de texto la cual permite estructurar eficientemente los contenidos para la web y presentarlos de forma limpia y bien estructurada en HTML.

Surgió en el 2004 a manos de John Gruber, quien tuvo la maravillosa idea después de sentirse frustrado al intentar estructurar bien sus contenidos para la web.

¿Cuál es la ventaja de usar el método Markdown?

Créeme, escribes de manera más eficiente. Si, muy bonitos los botones de herramientas y todo, pero aunque no lo creas, usando Markdown ganas tiempo.

Cuando escribes un texto en Wordpress por ejemplo, la acción de resaltar un texto en negrita te interrumpe el flujo de escritura y pierdes segundos valiosos para tu concentración y redacción. En cambio con Markdown, tus dedos permanecen en el teclado y tu cabeza permanece conectada con el texto.

¿Ahora dónde está el mal detalle?

Etiquetas básicas para editar tus textos en Ghost.

Encabezados

# Encabezado 1
## Encabezado 2
### Encabezado 3

Encabezado 1

Encabezado 2

Encabezado 3

Las almohadillas insertadas al inicio de una frase o palabra indican que el texto siguiente se trata de un encabezado, el número de estas determina el nivel de encabezado deseado.

Para el Texto

Resaltar textos

**Negrita**
*Cursiva*
***Negrita y Cursiva***

Si deseas resaltar el texto en Negrita, cursiva, o ambas, tendrás que usar el asterisco.

Agregar vínculos

[Texto del vínculo](URL)
Resultado:

Texto del vínculo

Imágenes

![Texto alt](URL de la imagen)

Subir imagen

Se debe insertar el símbolo de admiración antes del texto alternativo porque sino lo hacemos lo interpretaría como un vínculo. Al insertar este Markdown, de inmediato en el asistente se muestra una caja para seleccionar nuestra foto y subirla a nuestro foro.

Listas

* Item I
* Item II
	* Item III
* Item IV
Resultado
  • Item I
  • Item II
    • Item III
  • Item IV

Para crear listas se usa asteriscos antes de cada item, pera las listas numeradas solo basta colocar el número y un punto 1.
Para la indentación solo es necesario desplazarse 4 espacios para el efecto de que un item está dentro de otro.

Más aún: si deseas cambiar el formato de las listas puedes usar - o +

Citas

> Este es un ejemplo de texto citado.
Resultado:

Este es un ejemplo de texto citado.

Como no queremos ser unos novatos, ahora vamos por una sintaxis un poco más “cool”.

Separar textos

---

Si deseamos separar textos, solo es necesario agregar tres líneas y el resultado será una simple línea separadora de texto:


Snnipets de código

Cuando encapsulamos un texto dentro de `Tíldes`

Le decimos a Ghost que el texto adentro se trata de una porción de código. Ej:

.home {background-color: yellow;}

Listas de referencia y títulos

Para indicar referencias para atribución y vincularlas con su información haces lo siguiente:

**The quick brown [fox][1], jumped over the lazy [dog][2].**

[1]: https://en.wikipedia.org/wiki/Fox "Wikipedia: Fox"
[2]: https://en.wikipedia.org/wiki/Dog "Wikipedia: Dog"
Resultado:

The quick brown fox, jumped over the lazy dog.

También puedes agregarle el atributo title a los enlaces agregando el texto para el título entre comillas.

Texto entre asteriscos pero que no aparezca en cursiva

Solo basta agregarle un \ a cada asterisco para que el resultado no sea el texto en cursiva. Ejemplo:

\*Texto\*
Resultado:

*Texto*

Etiquetas HTML

Markdown soporta la inserción de código HTML. Por ejemplo:

<button style="background-color: gray; padding: 10px; color: white; ">Texto del Botón</button>
Resultado:

Incluso podrás insertar código JavaScript e iframe.

Listo ahora vamos a lo más Pro.

Todo lo visto hasta quí es lo estándar de markdown, ahora vamos a mirar algo de sintaxis que no pertenece a Markdown y solo funciona en Ghost.

Tachar texto

~~Texto tachado~~

Texto tachado

Texto resaltado

==Hola ¿cómo estás?==

Hola ¿cómo estás?

Vínculos automáticos

https://estebanalvarez.net

https://estebanalvarez.net

Notas de página

The quick brown fox[^1] jumped over the lazy dog[^2].

[^1]: Foxes are red
[^2]: Dogs are usually not red
Resultado:

The quick brown fox[1] jumped over the lazy dog[2].

Bloque de código bien bonito

Ghost haciendo uso de la librería Prismjs genera bloques de código con colores, para cuando insertamos demasiado código y necesitamos que este sea comprensible.

Y si quieres escribir nivel dios en Ghost usa las siguiente combinaciones del teclado:

Ctrl + B = Texto en negrita
Ctrl + I = Texto en cursiva
Ctrl + K = Para insertar vínculos
Ctrl + H = Para hacer uso de los encabezados más comunes como H2 y H3

Ahora si:

Muchas gracias


  1. Foxes are red ↩︎

  2. Dogs are usually not red ↩︎

La guía definitiva para editar tus textos en Ghost
Share this

Subscribe to Esteban con Gafas