Pregunta Javascript para convertir Markdown / Textile a HTML (y, idealmente, de nuevo a Markdown / Textile)


Hay varios buenos Javascript editores para Markdown / Textile (por ejemplo: http://attacklab.net/showdown/, el que estoy usando en este momento), pero todo lo que necesito es una función de Javascript que convierta una cadena de Markdown / Textile -> HTML y viceversa.

¿Cuál es la mejor manera de hacer esto? (Idealmente sería jQuery-friendly, por ejemplo, $("#editor").markdown_to_html())

Editar: Otra forma de decirlo es que estoy buscando una implementación de JavaScript de Rails textilize() y markdown() ayudantes de texto


76
2017-08-23 21:46


origen


Respuestas:


Para Markdown -> HTML, hay Confrontación

StackOverflow utiliza el lenguaje de marcado para preguntas y respuestas; ¿Intentó echar un vistazo a cómo funciona?

Bueno, parece que está usando Página abajo que está disponible bajo la Licencia MIT

La pregunta ¿Hay alguna buena biblioteca o control de Markdown Javascript? y sus respuestas también podrían ayudar :-)


Un editor completo, por supuesto, no es exactamente lo que usted solicitó; pero deben usar algún tipo de función para transformar el código de Markdown en HTML; y, dependiendo de la licencia de estos editores, es posible que pueda volver a utilizar esa función ...

En realidad, si le das un vistazo cercano a Showdown, en su fuente de código (archivo showdown.js), encontrarás esta parte del comentario:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

No es una sintaxis de jQuery, pero debería ser bastante fácil de integrar en tu aplicación ;-)


Acerca de Textile, parece ser un poco más difícil encontrar algo útil :-(


En el otro lado, HTML -> Markdown, creo que las cosas podrían ser un poco más difíciles ...

Lo que haría sería almacenar tanto Markdown como HTML en mi data store de aplicaciones (¿de la base de datos?), Y usar uno para editar, y el otro para renderizar ... Tomaría más espacio, pero parece menos arriesgado que "descifrar" el HTML. ..


95
2017-08-23 22:16



Textil

Puede encontrar una implementación de Javascript aparentemente muy fina de Textile aquí, y otro ahí (tal vez no tan bueno, pero tiene una buena página de ejemplo de conversión como se escribe).

Nota: hay un error en la primera implementación a la que hice un enlace: las barras horizontales no se representan correctamente. Para solucionarlo, puede agregar el siguiente código en el archivo.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

12
2018-01-18 18:45



Estoy usando el pequeño script minimalista - mmd.js, que solo admite un subconjunto de posibilidades de Markdown, pero esto podría ser todo lo que uno necesitaría de todos modos, por lo que este script que es menos de 1kb es increíble y no será exagerado.

Funciones compatibles

  • Encabezados # 
  • Blockquotes >
  • Listas ordenadas 1
  • Listas desordenadas *
  • Párrafos
  • Campo de golf []()
  • Imágenes ![]()
  • Énfasis en línea *
  • Énfasis en línea **

Funciones no admitidas

  • Referencias e ID
  • Escapando de los personajes de Markdown
  • Anidando

6
2018-06-05 14:13



Pensé que valdría la pena hacer una lista aquí de las soluciones de JavaScript y su tamaño y fortalezas / debilidades minimizados (sin comprimir). El tamaño comprimido para el código minificado será alrededor del 50% del tamaño sin comprimir. A lo que se reduce es a que recomiendo Página abajo (8KB) ​​si necesita soporte integral porque los usuarios editarán documentos en su sitio, y yo recomiendo el mío reducción (1.3KB) si presenta información en una aplicación web que no es editada por el usuario; hace lo correcto para la gran mayoría de los casos siendo extremadamente pequeño. Creo que prácticamente todas estas son licencias de MIT.

npm también tiene una amplia variedad de scripts para este propósito, en diferentes estados de calidad.

  • confrontación: 28 KB Básicamente el estándar de oro; es la base para el pagedown.

  • Página abajo: 8 KB Esto es lo que impulsa StackExchange, por lo que puede ver usted mismo las características que admite. Es bastante completo y extremadamente robusto. Además de la secuencia de comandos del convertidor de 8 KB, también ofrece scripts de editor y sanitizer, que StackExchange también utiliza.

  • markdown-it: 104KB. Sigue las especificaciones CommonMark; admite extensiones de sintaxis. Rápido; en realidad puede ser tan robusto como el enfrentamiento, pero muy grande. Es la base para http://dillinger.io/.

  • marcado: 19 KB Exhaustivo; probado contra el conjunto de pruebas unitarias; admite reglas lexer personalizadas.

  • micromarkdown: 5KB. Admite muchas funciones, pero faltan algunas comunes como listas desordenadas * y algunos comunes que no son estrictamente parte de la especificación como bloques de código vallado. Muchos errores arrojan excepciones en la mayoría de los documentos más largos. Lo considero experimental

  • nano-markdown: 1.9 KB Alcance de funciones limitado a cosas usadas por la mayoría de los documentos; más robusto que micromarkdown pero no perfecto; usa su propia prueba unitaria básica. Razonablemente robusto pero se rompe en muchos casos extremos.

  • reducción: 1.3KB. Divulgación completa, lo escribí. Alcance más amplio de la característica y más robusto que nano-markdown mientras más pequeño; maneja la mayoría pero no todas las especificaciones CommonMark. Maneja algunos casos de borde incorrectamente; no recomendado para documentos editados por el usuario pero muy útil para presentar información en aplicaciones web. Sin HTML en línea

  • mmd.js: 800 bytes. El resultado de un esfuerzo para hacer el analizador sintáctico más pequeño que sigue siendo funcional. Admite un pequeño subconjunto; el documento debe ser adaptado para ello.

  • markdown-js: 54KB (no disponible para descargar minified, probablemente minify a ~ 20KB). Parece bastante completo e incluye pruebas, pero no estoy muy familiarizado con él.

  • fusión de un reactor: 41KB (no disponible para descarga reducida, probablemente minify a ~ 15KB). plugin jQuery; Markdown Extra (tablas, listas de definiciones, notas al pie).


5
2017-10-16 02:40



Es fácil de usa Showdown con o sin jQuery. Aquí hay un ejemplo de jQuery:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});

4
2018-05-02 18:13



Showdown Attacklab-Link está inactivo, así que usa https://github.com/coreyti/showdown para tus necesidades de conversión :)


4
2018-04-24 09:19



Esto no aborda la solicitud completa (no es un editor), pero textile-js es una biblioteca de renderizado de JavaScript: https://github.com/borgar/textile-js. Una demostración está disponible en http://borgar.github.io/textile-js/


3
2018-01-31 19:34



Encontré esta pregunta intrigante, así que decidí comenzar algo (solo reemplaza strong y italic etiquetas de descuento). Después de haber pasado una hora tratando de idear una solución usando expresiones regulares, me rendí y terminé con lo siguiente, que parece funcionar muy bien. Dicho esto, seguramente se puede optimizar aún más y no estoy seguro de cuán realista será en esta forma:

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

Código de prueba:

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

Salida:

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

EDITAR: Nuevo en V 0.024 - Eliminación automática de etiquetas de descuento no cerradas


1
2017-08-23 23:29



markdown-js es un buen analizador de rebajas de JavaScript, un proyecto activo con pruebas.


1
2017-09-19 06:04