Aprende a convertir HTML a Markdown con JavaScript fácilmente con la biblioteca Turndown.

Cómo convertir HTML a Markdown con JavaScript usando Turndown

Muchos proyectos no comienzan con una estructura definida y cambian con el paso del tiempo. Por ejemplo, un blog básico puede comenzar desde el principio usando el formato HTML para almacenar su contenido en la base de datos, sin embargo, algún día alguien puede querer comenzar a usar Markdown en lugar de HTML debido a su simplicidad, en tal caso necesita convertir el contenido un formato a otro. En caso de que esté utilizando la lógica del lado del servidor con JavaScript (Node.js) o incluso en el navegador directamente para convertir el HTML en Markdown dentro de un editor, podrá realizar dicha tarea fácilmente utilizando la biblioteca Turndown, un HTML al convertidor Markdown escrito en JavaScript.

En este artículo, le mostraremos cómo convertir HTML en Markdown en Node.js o incluso en el navegador. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí o visite la página de inicio oficial para probar el convertidor en línea.

A. Usando la biblioteca como módulo (Node.js o ES6)

Si te gusta el tema de Bundlers como Webpack, Browserify, etc. Turndown ofrece soporte para UMD en el paquete oficial de NPM que puedes instalar en tu proyecto fácilmente con el siguiente comando de NPM:

npm install turndown --save

Después de la instalación, podrá importar el módulo desde Node.js o ES6 usando require o import. Después de importar el módulo, la lógica es muy sencilla. Crea una instancia del servicio de turndown y guárdalo en una variable, desde esta variable ejecuta el método turndown proporcionando como primer argumento la cadena HTML que quieres convertir en markdown y listo:

// Importar módulo Turndown
const TurndownService = require('turndown');

// Cree una instancia del servicio de cobertura
let turndownService = new TurndownService();

// Usa el método de turndown de la instancia creada
// para convertir el primer argumento (cadena HTML) a Markdown
let markdown = turndownService.turndown('<h1>Hello world!</h1>');

// Imprime:
//
// Hello world!
// ============
console.log(markdown);

B. Usando VanillaJS

Si no le gustan los paquetes de módulos o está trabajando solo desde el navegador, simplemente puede incluir el script de origen de turndown usando una etiqueta de script en su documento HTML:

<!-- Incluir el uso de CDN  -->
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

<!-- O de una copia local -->
<script src="./path-to/turndown.js"></script>

Tenga en cuenta que puede descargar la última versión de los lanzamientos en el repositorio oficial de Github. Después de incluir el script, debería poder convertir HTML a Markdown usando la misma lógica mencionada en la forma anterior de trabajar:

// Cree una instancia del servicio de cobertura
var turndownService = new TurndownService();

// Usa el método de turndown de la instancia creada
// para convertir el primer argumento (cadena HTML) a Markdown
var markdown = turndownService.turndown('<h1>Hello world!</h1>');

// Imprime:
// 
// Hello world!
// ============
console.log(markdown);

Opciones personalizadas

La biblioteca ofrece propiedades obviamente personalizables que puede especificar al convertidor a través de un objeto simple. Este objeto con la configuración debe proporcionarse en la instanciación de la clase TurndownService, específicamente en el constructor como primer argumento (esto es válido tanto para Node.js como para VanillaJS):

Opcion Valores validos Por defecto
headingStyle setext or atx setext
hr Any Thematic break * * *
bulletListMarker -+, or * *
codeBlockStyle indented or fenced indented
fence ``` or ~~~ ```
emDelimiter _ or * _
strongDelimiter ** or __ **
linkStyle inlined or referenced inlined
linkReferenceStyle fullcollapsed, or shortcut  

Por ejemplo, para cambiar los caracteres de énfasis de _ a *, simplemente puede hacer:

// Configurar turndown
var options = {
	emDelimiter: "*"
};

// Cree una instancia del servicio de cobertura con opciones personalizadas
var turndownService = new TurndownService(options);

// Usa el método de turndown de la instancia creada
// para convertir el primer argumento (cadena HTML) a Markdown
var markdown = turndownService.turndown('<h1>Hello world!</h1> <em>Welcome</em>');

// Imprime:
// 
// Hello world!
// ============
//
// *Welcome*
console.log(markdown);

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores