javascript jquery markdown textile

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



render markdown to html (11)

Hay varios buenos editores de JavaScript 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 vuelta.

¿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 los ayudantes de texto textilize() y markdown() de Rails

Textil

here puede encontrar una implementación de Textile aparentemente muy buena, y otra there (tal vez no tan buena, pero tiene una bonita 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;} //...

¿Has mirado la biblioteca de Eclipse WikiText que es parte de Mylyn? Convertirá de muchos sintaxis wiki a xhtml y a 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 incluirla en Redmine Wiki para el mantenimiento colaborativo. No hemos encontrado ninguna herramienta que realice la conversión. Hemos encontrado la extensión de Open Office que produce texto con formato mediawiki, pero Redmine Wiki usa un subconjunto de textiles.

¿Alguien sabe de una herramienta que convierte TO textile de mediawiki, Word, XDocs o HTML?

Encontré esta pregunta intrigante, así que decidí comenzar algo (solo reemplaza strong etiquetas de marca strong y italic ). 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

Es fácil 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''); });

Estoy usando el minúsculo 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
  • Enlaces []()
  • Imágenes ![]()
  • Énfasis en línea *
  • Énfasis en línea **

Funciones no admitidas

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

Para Markdown -> HTML, hay Showdown

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

Bueno, parece que está usando PageDown 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 ...

De hecho, si le das un vistazo 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. ..

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. Lo que se reduce a esto es que recomiendo pagedown (8KB) ​​si necesita soporte completo porque los usuarios editarán documentos en su sitio, y recomiendo mi propio drawdown (1.3KB) si está presentando información en una aplicación web que es no editado 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.

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

  • pagedown : 8KB. 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 de http://dillinger.io/ .

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

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

  • nano-markdown : 1.9KB. 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.

  • drawdown : 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 descarga reducida, probablemente minify a ~ 20KB). Parece bastante completo e incluye pruebas, pero no estoy muy familiarizado con él.

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

markdown-js es un buen analizador de marcas de javascript, un proyecto activo con pruebas.