Cómo insertar un editor Markdown en tu web

mkdwn

Anteriormente hablé sobre qué es markdown en éste artículo y en ésta entrada quiero enseñarte cómo insertarlo en tu sitio web. Antes que nada, el tutorial está dedicado a los developers que escriben su código por si mismo, es decir que no usan CMS. De todas maneras, al final del post estará explicado para los usuarios de WordPress.

Si no sabes lo que es Markdown te invito a leer el artículo donde hablo de él. Básicamente es una librería ligera escrita en lenguaje javascript que trata de reemplazar a los editores de tipo wysiwyg, pero con una caracterísitca muy peculiar que es la simplicidad al escribir, esa es la idea, enfocarte en lo que escribes y no en como pinta.

Recursos que vas a necesitar

En mi caso, yo uso la librería de Vue.js para mostrar en un div todo lo que escribo en el textarea. Y la librería Marked.js para que el editor reconoza los comandos Markdown. Bien, lo que vas a necesitar es lo siguiente.

  1. Librería jQuery Download
  2. Librería Vue.js Download
  3. Librería Marked.js Donwload

Insertando el editor markdown

Bien, suponiendo que tienes una página para el editor, llamada editor.php, entre su encabezado head vas a enlazar los recursos que bajaste. Así:

 script href="js/jquery.js"
 script href="js/marked.js"
 script href="js/vue.js"

Una vez tengas esa parte lista, toca hacer un formulario dentro del body, que sería donde estará el textarea. Para ésta demostración te dejaré un enlace con un ejemplo. Este ejemplo es el que usa Vue.js en su página. Ver ejemplo

Estilos CSS

Los estilos que adoptará cada texto que escribas serán los mismos estilos que enlazarás al archivo, dentro del head, por lo tanto no es necesario copiarlo del ejemplo anterior. Personalmente me parece que es una de las ventajas, y que el contenido se adaptará al estilo de todo el sitio.

Para los usuarios que usan el servicio web WordPress.com

Bien, los que usan el servicio web inegrado de wordpress.com solo deben ir a

Settings > Writing

Y habiltar la opción que dice Markdown. Leer más información.

Para los usuarios que usan el CMS de WordPress.org

Deben bajarse un plugin e instalarlo. Aquí encontré uno: WP-Markdown.

Lista de comandos Markdown

Resultado Markdown
Bold **bold**
italic *italic*
Strike ~~text~~
link [text](url)
inline code `code`
Image ![alt](url)
List *item
Blockquote > quote
H1 # Heading
H2 ## Heading
H3 ### Heading

Para tener un poco más de información acerca de los comandos Markdown puedes visitar la página del creador: Documentación Oficial Markdown

Si tienes alguna pregunta no dudes en dejar un comentario, estaré dispuesto en ayudarte. :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *