Javascript para convertir Markdown / Textile a HTML (e, idealmente, volver a Markdown / Textile)

84

Hay varios buenos editores de Javascript para Markdown / Textile (por ejemplo: http://attacklab.net/showdown/ , el que estoy usando ahora mismo), 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 compatible con jQuery, 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

javascript  jquery  markdown  textile 
— Tom Lehman
fuente

Respuestas:

98

Para Markdown -> HTML, hay Showdown

StackOverflow en sí mismo utiliza el lenguaje Markdown para preguntas y respuestas; ¿Intentaste ver cómo funciona?

Bueno, parece que está usando PageDown que está disponible bajo la licencia MIT

La pregunta: ¿Existe alguna buena biblioteca o control de Markdown Javascript?y sus respuestas también pueden ayudar :-)


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

En realidad, si observa de cerca Showdown, en su código fuente (archivo showdown.js) , encontrará 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 sintaxis jQuery, pero debería ser bastante fácil de integrar en su aplicación ;-)


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


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

Lo que haría es almacenar Markdown y HTML en el almacén de datos de mi aplicación (¿base de datos?), Y usar uno para editar y el otro para renderizar ... Tomaría más espacio, pero parece menos arriesgado que "descifrar" HTML. ..

— Pascal MARTIN
fuente
5
Los vínculos parecen haber cambiado. La demostración está en softwaremaniacs.org/playground/showdown-highlight y el código fuente se puede encontrar en softwaremaniacs.org/playground/showdown-highlight/showdown.js
— John J. Camilleri
1
@John gracias por tu comentario; He editado mi respuesta para cambiar el enlace ;-)
— Pascal MARTIN
Desafortunadamente, esta biblioteca no parece funcionar para enlaces basados ​​en rebajas, también conocido como: parte del texto no se convierte. Parece que le falta algo de la sintaxis, lo cual es lamentable. ¿Qué más falta?
— Oddman
25

Pensé que valdría la pena hacer aquí una lista de las soluciones de JavaScript que existen y su tamaño reducido (sin comprimir) y sus fortalezas / debilidades. El tamaño comprimido para el código minificado será alrededor del 50% del tamaño sin comprimir. Qué se reduce a:

  • Utilice showdown (28KB) si necesita un soporte completo y tendrá documentos editados por el usuario o arbitrarios.
  • Use pagedown (8KB) ​​si tiene documentos editados / arbitrarios por el usuario pero no necesita cosas como tablas, listas de definiciones o notas al pie (por ejemplo, comentarios en un sitio como StackExchange).
  • Usa mi propia reducción (1.3KB) si necesita una calidad razonablemente alta y soporte para la mesa, pero desea un peso de pluma y no necesita que se aborden todos los casos de borde.
  • Utilice uno de los otros si necesita capacidades únicas como seguridad o capacidad de expansión.

Todos estos usan la licencia MIT, la mayoría están en npm.

  • enfrentamiento : 28KB. Básicamente el patrón oro; es la base del retroceso de página.

  • retroceso de página : 8KB. Esto es lo que impulsa StackExchange, para que pueda ver por sí mismo qué características admite (es muy robusto pero faltan tablas, listas de definiciones, notas al pie, etc.). Además del script de conversión de 8 KB, también ofrece scripts de edición y desinfección, que también utiliza StackExchange.

  • reducción : 1.3KB. Revelación completa, lo escribí. Alcance de funciones más amplio que cualquier otro convertidor ligero; maneja la mayoría, pero no todas, las especificaciones de CommonMark. No se recomienda para la edición del usuario, pero es muy útil para presentar información en aplicaciones web. Sin HTML en línea.

  • markdown-it : 104KB. Sigue la especificación CommonMark; admite extensiones de sintaxis; produce una salida segura de forma predeterminada. Rápido; en realidad puede ser tan robusto como un enfrentamiento, pero muy grande. Es la base de http://dillinger.io/ .

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

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

  • nano- rebaja: 1.9KB. El alcance de la función se limita a las cosas utilizadas por la mayoría de los documentos; más robusto que micromarkdown pero no perfecto; utiliza su propia prueba unitaria muy básica. Razonablemente robusto pero se rompe en muchos casos extremos.

  • mmd.js : 800 bytes. El resultado de un esfuerzo por hacer el analizador más pequeño posible que aún sea funcional. Admite un pequeño subconjunto; el documento debe adaptarse.

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

  • meltdown : 41KB (no disponible para descargar minificado; probablemente se minificaría a ~ 15KB). complemento jQuery; Markdown Extra (tablas, listas de definiciones, notas al pie).

  • unified.js : varía, 5-100KB. Un sistema basado en complementos para convertir entre html, markdown y prosa. Dependiendo de los complementos que necesite (revisión ortográfica, resaltado de sintaxis, desinfección de entradas), el tamaño del archivo variará. Probablemente se usa más en el lado del servidor que en el lado del cliente.

— Adam Leggett
fuente
¡Gracias por esto, realmente útil! Solo usé showdown y fetch(con un pequeño escaneo de "That's So Fetch" de Jake Archibald ) para leer los archivos Markdown en mis páginas HTML estáticas y convertirlas a HTML. Dulce :-)
— Dave Everitt
@DaveEveritt genial: no olvide incluir un polyfill de recuperación a menos que esté apuntando a un navegador fijo. Esto funcionará para su propósito y es pequeño: github.com/developit/unfetch
— Adam Leggett
De acuerdo, y gracias por el enlace, aunque creo que solo algunos navegadores necesitan esto ahora: Samsung es compatible con la nueva versión y ya no apunto a IE, aunque sé que muchos desarrolladores necesitan… caniuse.com/#feat = buscar
— Dave Everitt
¿Tiene planes para agregar funciones de <table> en la reducción ? Intenté agregarlo yo mismo, pero está muy por encima de mi comprensión. ; (
— jack
1
@VictorLee hecho!
— Adam Leggett
13

Textil

Puede encontrar una implementación de Javascript aparentemente muy fina de Textile aquí , y otra allí (quizás no tan buena, pero tiene una bonita página de ejemplo de conversión a medida que 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;}
    //...
— glmxndr
fuente
9

Estoy usando el diminuto 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 tiene menos de 1kb es asombroso y no será excesivo.

Funciones compatibles

  • Encabezados #
  • Blockquotes >
  • Listas ordenadas 1
  • Listas desordenadas *
  • Párrafos
  • Enlaces []()
  • Imagenes ![]()
  • Énfasis en línea *
  • Énfasis en línea **

Funciones no admitidas

  • Referencias e identificaciones
  • Escapar de los personajes de Markdown
  • Anidamiento
— vsync
fuente
¡Es realmente asombroso!
— Arthur Araújo
¿Podemos instalar mmd.js usando npm install? Realmente me gustaría probarlo en mi proyecto.
— sudhir shakya
1
adamvleggett.github.io/drawdown no es mucho más grande, pero admite mucho más Markdown con más flexibilidad.
— Adam Leggett
4

Es fácil de usar 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');
});
— Mathias Bynens
fuente
2

Encontré esta pregunta intrigante, así que decidí comenzar algo (solo reemplaza strongy italicetiquetas de rebajas). Después de pasar una hora tratando de idear una solución usando expresiones regulares, me di por vencido 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 resistente será en el mundo real de 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 rebajas no cerradas

— karim79
fuente
1

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

— foz
fuente
0

¿Ha mirado la biblioteca de Eclipse WikiText que es parte de Mylyn? Se convertirá de muchas sintaxis wiki a xhtml y xdocs / DITA. Se ve muy bien.

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

¿Alguien ha encontrado una solución al problema HTML-> textil? Toda nuestra documentación actual está en formato M $ Word y nos encantaría traerla a Redmine Wiki para el mantenimiento colaborativo. No hemos encontrado ninguna herramienta que haga la conversión. Hemos encontrado la extensión Open Office que produce texto con formato mediawiki, pero Redmine Wiki usa un subconjunto de textiles.

¿Alguien conoce una herramienta que convierta TO textil de mediawiki, Word, XDocs o HTML?

— Stephen Gissendaner
fuente
— pihentagy
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.