¿Convertir varios archivos en HTML (desde Markdown)?

Actualmente estoy trabajando en un pequeño proyecto en el que quiero convertir un par (o más) de archivos Markdown en HTML y luego agregarlos al documento principal. Quiero que todo esto suceda del lado del cliente. He elegido un par de complementos como Confrontación (convertidor de Markdown a HTML), jQuery (manipulación general de DOM) y guión bajo (para plantillas simples si es necesario). Estoy atascado donde parece que no puedo convertir un archivo en HTML (en una cadena que tiene HTML).

Convertir Markdown en HTML es bastante simple:

var converter = new Showdown.converter();
converter.makeHtml('#hello markdown!');

No estoy seguro de cómo obtener (descargar) un archivo en el código (¿cadena?).

¿Cómo obtengo un archivo de una URL (esa URL es un archivo Markdown), lo paso a través de Showdown y luego obtengo una cadena HTML? Por cierto, solo estoy usando JavaScript.

preguntado el 09 de marzo de 13 a las 14:03

es este Showdown algún puerto de la Markdown Pagedown ¿enchufar? -

Creo que fue portado desde una implementación de Perl Markdown por John Fraser. Deberías revisar el README. -

no está mal... pero prefiero el que mencioné... Markdown Pagedown :) goo.gl/XI3L0 -

2 Respuestas

Puede obtener un archivo externo y analizarlo en una cadena con ajax. La forma de jQuery es más limpia, pero una versión estándar de JS podría verse así:

var mdFile = new XMLHttpRequest();
mdFile.open("GET", "http://mypath/myFile.md", true);
mdFile.onreadystatechange = function(){
 // Makes sure the document exists and is ready to parse.
 if (mdFile.readyState === 4 && mdFile.status === 200)   
 {
    var mdText = mdFile.responseText; 
    var converter = new showdown.Converter();
    converter.makeHtml(mdText);
    //Do whatever you want to do with the HTML text
 }
}

Método jQuery:

$.ajax({
  url: "info.md",
  context: document.body,
  success: function(mdText){
    //where text will be the text returned by the ajax call
    var converter = new showdown.Converter();
    var htmlText = converter.makeHtml(mdText);
    $(".outputDiv").append(htmlText); //append this to a div with class outputDiv
  }
});

Nota: Esto supone que los archivos que desea analizar están en su propio servidor. Si los archivos están en el cliente (archivos de usuario de IE), deberá adoptar un enfoque diferente

Actualizar

Los métodos anteriores funcionarán si los archivos que desea están en el mismo servidor que usted. Si NO lo son, tendrá que buscar CORS si controla el servidor remoto y una solución del lado del servidor si no lo hace. Esta pregunta proporciona algunos antecedentes relevantes sobre las solicitudes entre dominios.

contestado el 23 de mayo de 17 a las 11:05

Gracias pero parece que no funciona. No se descarga nada cuando quiero abrir así URL ¿Podría mostrar cómo usar el método jQuery Ajax? - usuario2005477

Gracias, jQuery funciona un poco mejor, pero parece que el archivo no se recupera. Cuando miro la pestaña Red, veo "Error de estado" para el archivo que estoy tratando de obtener. Captura de pantalla. yo también recibo XMLHttpRequest cannot load http://rafalchmiel.com/post_1.md. Origin null is not allowed by Access-Control-Allow-Origin. . - usuario2005477

ok, no me di cuenta de que estabas haciendo esta solicitud a un dominio diferente al que estás actualmente. Vas a necesitar usar CORS. - Ben McCormick

Una vez que tenga la cadena HTML, puede agregarla al elemento DOM que desee, simplemente llamando: 

var myElement = document.getElementById('myElement');
myElement.innerHTML += markdownHTML;

...donde markdownHTML es el html obtenido de makeHTML.

respondido 09 mar '13, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.