Showdown es un convertidor de JavaScript para HTML, basado en las obras originales de John Gruber. Showdown se puede usar del lado del cliente (en el navegador) o el lado del servidor (con node.js).
Mira una demostración en vivo aquí: http://demo.showdownjs.com/
Como saben, ShoTdownJS es una biblioteca gratuita y permanecerá libre para siempre. Sin embargo, mantener y mejorar la biblioteca cuesta tiempo y dinero.
Si le gusta nuestro trabajo y encuentre útil nuestra biblioteca, ¡done a través de PayPal! Su contribución será muy apreciada y me ayudará a continuar desarrollando esta increíble biblioteca.
Showdownjs V 2.0 se lanza bajo la licencia MIT. Las versiones anteriores se lanzan bajo BSD.
Puede descargar el último lanzamiento de Tarball directamente de los lanzamientos.
bower install showdown
npm install showdown
PM> Install-Package showdownjs
Los paquetes Nuget se pueden encontrar aquí.
También puede usar uno de varios CDN disponibles:
jsdelivr
https://cdn.jsdelivr.net/npm/showdown@<version tag>/dist/showdown.min.js
CDNJS
https://cdnjs.cloudflare.com/ajax/libs/showdown/<version tag>/showdown.min.js
imprudente
https://unpkg.com/showdown/dist/showdown.min.js
NOTA : Reemplace <version tag>
con una versión real real de longitud completa que esté interesado por ejemplo 1.9.0
Showdown ha sido probado con éxito con:
En teoría, Showdown funcionará en cualquier navegador que admita ECMA 262 3rd Edition (JavaScript 1.5). El convertidor en sí incluso podría funcionar en cosas que no son navegadores web, como Acrobat. No hay promesas.
Showdown está destinado a funcionar en cualquier versión de nodo.js compatible (consulte el programa Node.js Letelies. El código puede funcionar con versiones anteriores de Node.js, pero no se hacen alojamientos para garantizar que lo haga.
Si está buscando showdown v <1.0.0, puede encontrarlo en la rama heredada .
Puedes consultar el cambio de cambios completo
Consulte nuestras páginas wiki para ver ejemplos y una documentación más profunda.
var showdown = require ( 'showdown' ) ,
converter = new showdown . Converter ( ) ,
text = '# hello, markdown!' ,
html = converter . makeHtml ( text ) ;
var converter = new showdown . Converter ( ) ,
text = '# hello, markdown!' ,
html = converter . makeHtml ( text ) ;
Ambos ejemplos deberían emitir ...
< h1 id =" hellomarkdown " > hello, markdown! </ h1 >
Puede cambiar parte del comportamiento predeterminado de Showdown a través de las opciones.
Se pueden establecer opciones:
Establecer una opción "global" afecta todas las instancias de Showdown
showdown . setOption ( 'optionKey' , 'value' ) ;
Establecer una opción "local" solo afecta el objeto convertidor especificado. Se pueden establecer opciones locales:
a través del constructor
var converter = new showdown . Converter ( { optionKey : 'value' } ) ;
a través del método setOption ()
var converter = new showdown . Converter ( ) ;
converter . setOption ( 'optionKey' , 'value' ) ;
Showdown proporciona 2 métodos (tanto locales como globales) para recuperar opciones de conjunto anteriores.
// Global
var myOption = showdown . getOption ( 'optionKey' ) ;
//Local
var myOption = converter . getOption ( 'optionKey' ) ;
// Global
var showdownGlobalOptions = showdown . getOptions ( ) ;
//Local
var thisConverterSpecificOptions = converter . getOptions ( ) ;
Puede obtener las opciones predeterminadas de Showdown con:
var defaultOptions = showdown . getDefaultOptions ( ) ;
OmitextrawlincodeBlocks : (boolean) [falso predeterminado] omitir la nueva línea de salida en un bloque de código. Ex:
Este:
< code > < pre > var foo = 'bar';
</ pre > </ code >
Se convierte en esto:
< code > < pre > var foo = 'bar'; </ pre > </ code >
NoHeaderId : (booleano) [falso predeterminado] Desactive la generación automática de ID de encabezado. Configuración en Real Anulos PrefixHeaderID
PersonalizedHeaderId : (boolean) [falso predeterminado] Use texto en aparatos ortopédicos rizados como ID de encabezado. (desde V1.7.0) Ejemplo:
## Sample header {real-id} will use real-id as id
GHCompatibleHeaderID : (booleano) [falso predeterminado] Genere ID de encabezado compatibles con el estilo GitHub (los espacios se reemplazan con guiones y se eliminan un montón de caracteres no alfanuméricos) (desde V1.5.5)
PrefixHeaderId : (String/Boolean) [Falso predeterminado] Agregue un prefijo a las ID de encabezado generadas. Pasar una cadena prefijo esa cadena al ID del encabezado. La configuración a true
agregará un prefijo genérico de 'sección'.
RawPrefixHeaderId : (boolean) [Falso predeterminado] La configuración de esta opción en verdadero evitará que el enfrentamiento modifique el prefijo. Esto podría dar lugar a ID malformados (si, por ejemplo, el "CHAR se usa en el prefijo). No tiene ningún efecto si PrefixHeaderID se establece en False. (Desde V 1.7.3)
RawHeaderid : (booleano) [falso predeterminado] Eliminar solo los espacios, 'y "de las ID de encabezado generadas (incluidos los prefijos), reemplazándolos con guiones (-). Advertencia: Esto podría dar lugar a ID malformadas (desde V1.7.3)
HeaderLevelStart : (Integer) [predeterminado 1] Establezca el nivel de inicio del encabezado. Por ejemplo, establecer esto en 3 significa que
# foo
se analizará como
< h3 > foo </ h3 >
parseimgdimensions : (boolean) [falso predeterminado] Habilite el soporte para configurar las dimensiones de la imagen desde la sintaxis de Markdown. Ejemplos:
 simple, assumes units are in px
 sets the height to "auto"
 Image with width of 80% and height of 5em
SimplifiedAutolink : (boolean) [falso predeterminado] activar esta opción habilitará el enlace automático a las URL. Esto significa que:
some text www.google.com
se analizará como
< p > some text < a href =" www.google.com " > www.google.com </ a >
ExcludetRailingPuntuationFromURLS : (booleano) [falso predeterminado] Esta opción excluye la puntuación posterior de las URL de autoleta. Puntuación excluida : . ! ? ( )
. Solo se aplica si la opción SimplifiedAutolink se establece en true
.
literalMidWordUnderScores : (booleano) [falso predeterminado] activar esto dejará de enfrentar para interpretar subrayos en medio de palabras como <em>
y <strong>
y, en cambio, los tratará como subrayadores literal.
Ejemplo:
some text with __ underscores __ in middle
se analizará como
< p > some text with__underscores__in middle </ p >
literalMidwordwordastisks : (booleano) [falso predeterminado] activar esto evitará que el enfrentamiento interprete los asteriscos en medio de las palabras como <em>
y <strong>
y en su lugar los tratará como asteriscos literal.
Strikethrough : (booleano) [falso predeterminado] Habilite el soporte para la sintaxis de Strikethrough. ~~strikethrough~~
como <del>strikethrough</del>
Tablas : (boolean) [falso predeterminado] Habilitar soporte para la sintaxis de tablas. Ejemplo:
| h1 | h2 | h3 |
| :------ | :-------: | --------: |
| 100 | [ a ] [ 1 ] | ![ b ] [ 2 ] |
| * foo * | ** bar ** | ~~ baz ~~ |
Vea el wiki para más información
PableSheaderId : (boolean) [falso predeterminado] Si habilitado agrega una propiedad de ID a las etiquetas de encabezados de tabla.
GHCodeBlocks : (boolean) [verdadero verdadero] Habilitar soporte para el estilo de bloque de código GFM.
Listas de tareas : (boolean) [falso predeterminado] Habilite el soporte para Listas de tareas GFM. Ejemplo:
- [x] This task is done
- [ ] This is still pending
SmoothlivePreview : (booleano) [falso predeterminado] previene efectos extraños en vistas previas en vivo debido a la entrada incompleta
SmartIndentationFix : (booleano) [falso predeterminado] intenta solucionar de manera inteligente los problemas de sangría relacionados con las cadenas de plantilla ES6 en medio del código sangrado.
Desactivar 4 spacessindententsublists : (booleano) [Falso predeterminado] deshabilita el requisito de sangristas de los sublistas por 4 espacios para que se aniden, volviendo efectivamente al comportamiento antiguo donde 2 o 3 espacios eran suficientes. (desde V1.5.0)
SimpleLineBreaks : (boolean) [falso predeterminado] La línea analiza se rompe como <br>
, sin necesidad de 2 espacios al final de la línea (desde V1.5.1)
a line
wrapped in two
se convierte en:
< p > a line < br >
wrapped in two </ p >
RequendSeSpaceBeForeHeadingText : (boolean) [falso predeterminado] hace que agregar un espacio entre #
y el texto del encabezado obligatorio (desde V1.5.3)
Ghmentions : (boolean) [falso predeterminado] habilita github @mentions, que enlaza al nombre de usuario mencionado (desde v1.6.0)
GhmentionSlink : (String) [Predeterminado https://github.com/{u}
] cambia el enlace generado por @mentions. Showdown reemplazará {u}
con el nombre de usuario. Solo se aplica si la opción GHMENTIONS está habilitada. Ejemplo: @tivie
con GhmentionionPtion establecido en //mysite.com/{u}/profile
dará como resultado <a href="//mysite.com/tivie/profile">@tivie</a>
CodeEmails : (booleano) [verdadero verdadero] Habilite direcciones de correo electrónico que codifica mediante el uso de entidades de carácter, transformando direcciones de correo electrónico ASCII en sus entidades decimales equivalentes. (Desde V1.6.1)
Nota: Antes de la versión 1.6.1, los correos electrónicos siempre serían ofuscados hasta la codificación de DEC y HEX.
OpenLinksinNewWindow : (boolean) [falso predeterminado] Abra todos los enlaces en las nuevas ventanas (agregando el atributo target="_blank"
a <a>
etiquetas) (desde v1.7.0)
Backslashescapeshtmltags : (boolean) [Falso predeterminado] soporte para la etiqueta HTML escapando. Ej: <div>foo</div>
(desde v1.7.2)
Emoji : (booleano) [falso predeterminado] Habilite el soporte de emoji. Ej: this is a :smile: emoji
para obtener más información sobre emojis disponibles, ver https://github.com/showdownjs/showdown/wiki/emojis (desde V.1.8.0)
Subraye : (boolean) [Falso predeterminado] característica experimental Habilitar soporte para subrayar. La sintaxis es subrayado doble o triple Ej: __underlined word__
. Con esta opción habilitada, los subrayadores ya no se analizan en <em>
y <strong>
.
Ellipsis : (booleano) [Verdadero predeterminado] reemplaza tres puntos con el carácter de ellipsis unicode.
CompleteHtmlDocument : (boolean) [falso predeterminado] genera un documento HTML completo, que incluye <html>
, <head>
y <body>
etiquetas 'en lugar de un fragmento HTML. (Desde V.1.8.5)
metadatos : (booleano) [falso predeterminado] Habilitar soporte para metadatos del documento (definidos en la parte superior del documento entre «««
y »»»
o entre ---
y ---
). (Desde V.1.8.5)
var conv = new showdown . Converter ( { metadata : true } ) ;
var html = conv . makeHtml ( someMd ) ;
var metadata = conv . getMetadata ( ) ; // returns an object with the document metadata
SplitadJacentBlockQuotes : (booleano) [falso predeterminado] dividido bloques de bloques adyacentes. (Desde V.1.8.6)
Morestyling : (booleano) [falso predeterminado] agrega algunas clases útiles para el estilo CSS. (desde v2.0.1)
task-list-item-complete
a los elementos de tareas completadas en Listas de tareas GFM.Nota : Tenga en cuenta que hasta la versión 1.6.0 , todas estas opciones están deshabilitadas de forma predeterminada en la herramienta CLI.
También puede usar sabores o preajustes para establecer las opciones correctas automáticamente, de modo que Showdown se comporta como sabores populares de Markdown.
Actualmente, los siguientes sabores están disponibles:
showdown . setFlavor ( 'github' ) ;
converter . setFlavor ( 'github' ) ;
Showdown también viene incluido con una herramienta de interfaz de línea de comandos. Puede consultar la página de Wiki de CLI para obtener más información
El proyecto ShowdownJS también proporciona una integración sin problemas con AngularJS a través de un "complemento". Visite https://github.com/showdownjs/ngshowdown para obtener más información.
Si está usando TypeScript, tal vez desee usar los tipos de definitivamente Typed
La integración con SystemJS se puede obtener a través del complemento de terceros "System-MD".
Para usar ShoTdownJS como componente VUE rápidamente, puede verificar Vue-Showdown.
Showdown no desinfecta la entrada. Esto es por diseño ya que Markdown se basa en él para permitir que ciertas características se analicen correctamente en HTML. Esto, sin embargo, significa que la inyección XSS es bastante posible.
Consulte la vulnerabilidad XSS del artículo de Wiki en el artículo de Wiki (y cómo mitigarla) para obtener más información.
Showdown permite cargar una funcionalidad adicional a través de extensiones. (Puede encontrar una lista de extensiones de showdown conocidas aquí) También puede encontrar una boilerplate, para crear sus propias extensiones en este repositorio
< script src = "showdown.js" / >
< script src = "twitter-extension.js" / >
var converter = new showdown . Converter ( { extensions : [ 'twitter' ] } ) ;
var showdown = require ( 'showdown' ) ,
myExtension = require ( 'myExtension' ) ,
converter = new showdown . Converter ( { extensions : [ 'myExtension' ] } ) ;
Construir su clon del repositorio es fácil.
Se deben instalar los prerreques: Node.js V12, NPM y NPX.
Ejecute npm install
.
Ejecute npx grunt build
(ver Gruntfile.js
). Este comando:
dist
. Hay un conjunto de pruebas disponibles que requieren Node.js. Una vez que se instala el nodo, ejecute el siguiente comando desde la raíz del proyecto para instalar las dependencias:
npm install
Una vez instaladas, las pruebas se pueden ejecutar desde la raíz del proyecto usando:
npm test
Se pueden agregar fácilmente nuevos casos de prueba. Cree un archivo de Markdown (que finalice en .md
) que contiene el markdown para probar. Cree un archivo .html
del mismo nombre exacto. Se probará automáticamente cuando las pruebas se ejecuten con mocha
.
Si desea contribuir, lea la siguiente guía rápida.
Puede solicitar una nueva función enviando un problema. Si desea implementar una nueva función, no dude en emitir una solicitud de extracción.
Los PR son increíbles. Sin embargo, antes de enviar su solicitud de extracción, considere las siguientes pautas:
Busque en GitHub una solicitud de extracción abierta o cerrada que se relacione con su envío. No quieres duplicar el esfuerzo.
Al emitir PRS que cambian el código, realice sus cambios en una nueva rama GIT en función de Desarrollar :
git checkout -b my-fix-branch develop
Ejecute la suite de prueba completa antes de enviar y asegúrese de que todas las pruebas pasen (obviamente = P).
Intenta seguir nuestras reglas de estilo de codificación . Romperlos evita que el PR pase las pruebas.
Abstenerse de solucionar múltiples problemas en la misma solicitud de extracción. Es preferible abrir múltiples PRS pequeños en lugar de uno difícil de revisar.
Si el PR presenta una nueva característica o soluciona un problema, agregue el caso de prueba apropiado .
Utilizamos notas de confirmación convencionales para generar el CangeLog que siga la especificación convencional de ChangeLog. Es extremadamente útil si sus mensajes de confirmación se adhieren a estas pautas de confirmación.
No olvide agregar su nombre al archivo Credits.md. Nos gusta dar crédito si se debe.
Si sugerimos cambios, entonces:
git rebase develop -i
git push origin my-fix-branch -f
Después de fusionar su solicitud de extracción, puede eliminar de manera segura su rama.
Si tiene tiempo para contribuir a este proyecto, nos sentimos obligados a obtener crédito por ello. Estas reglas nos permiten revisar su PR más rápido y le darán el crédito apropiado en su perfil GitHub. ¡Le agradecemos de antemano por su contribución!
Estamos buscando miembros para ayudar a mantener el enfrentamiento. Consulte este tema para expresar interés o comentar en esta nota.
Lista completa de crédito en https://github.com/showdownjs/showdown/blob/master/credits.md
Showdown funciona con: