cherry markdown
v0.8.57
Inglés | Chino simplificado | japonés
El editor de Cherry Markdown es un editor de JavaScript Markdown. Tiene las ventajas, como listas para usar, livianas y fáciles de extender. Puede ejecutarse en navegador o servidor (con NodeJS).
El desarrollador puede llamar e instanciar al editor de Cherry Markdown de una manera muy simple. El editor de markdown de Cherry instanciado admite la sintaxis de Markdown más comúnmente utilizada (como Título, TOC, FlowChart, Formula, etc.) de forma predeterminada.
Cuando la sintaxis de que el soporte del Editor de Markdown de Cherry no puede satisfacer sus necesidades, el desarrollo secundario o la extensión de la función se pueden llevar a cabo rápidamente. Al mismo tiempo, el editor de Cherry Markdown debe ser implementado por Pure JavaScript, y no debe confiar en la tecnología de marco como Angular, Vue y React. El marco solo proporciona un entorno de contenedor.
Cherry Markdown tiene un gancho de seguridad incorporado, al filtrar la lista blanca y Dompurify para hacer el filtro de escaneo.
Cherry Markdown tiene una variedad de temas de estilo para elegir.
Haga clic aquí para más detalles
A través de hilo
yarn add cherry-markdownA través de NPM
npm install cherry-markdown --save Si necesita habilitar las funciones del dibujo mermaid y la mesa a la tabla, debe agregar paquetes mermaid y echarts al mismo tiempo.
Actualmente, la versión de complemento que Cherry recomienda es [email protected] [email protected] .
# Install mermaid, enable mermaid and drawing function
yarn add [email protected]
# Install echarts, turn on the table-to-chart function
yarn add [email protected] < link href =" cherry-editor.min.css " />
< div id =" markdown-container " > </ div >
< script src =" cherry-editor.min.js " > </ script >
< script >
new Cherry ( {
id : 'markdown-container' ,
value : '# welcome to cherry editor!' ,
} ) ;
</ script > import 'cherry-markdown/dist/cherry-markdown.css' ;
import Cherry from 'cherry-markdown' ;
const cherryInstance = new Cherry ( {
id : 'markdown-container' ,
value : '# welcome to cherry editor!' ,
} ) ; const { default : CherryEngine } = require ( 'cherry-markdown/dist/cherry-markdown.engine.core.common' ) ;
const cherryEngineInstance = new CherryEngine ( ) ;
const htmlContent = cherryEngineInstance . makeHtml ( '# welcome to cherry editor!' ) ; Debido a que el tamaño de la biblioteca de sirena es muy grande, el producto de compilación de cerezas contiene un paquete de construcción de núcleo sin sirena incorporada. La construcción central se puede importar de las siguientes maneras.
import 'cherry-markdown/dist/cherry-markdown.css' ;
import Cherry from 'cherry-markdown/dist/cherry-markdown.core' ;
const cherryInstance = new Cherry ( {
id : 'markdown-container' ,
value : '# welcome to cherry editor!' ,
} ) ; // Import Cherry engine core construction
// Engine configuration items are the same as Cherry configuration items, the following document content only introduces the Cherry core package
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core' ;
const cherryEngineInstance = new CherryEngine ( ) ;
const htmlContent = cherryEngineInstance . makeHtml ( '# welcome to cherry editor!' ) ;
// --> <h1>welcome to cherry editor!</h1>El paquete Core Build no contiene dependencia de sirena, debe importar complementos relacionados manualmente.
import 'cherry-markdown/dist/cherry-markdown.css' ;
import Cherry from 'cherry-markdown/dist/cherry-markdown.core' ;
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin' ;
import mermaid from 'mermaid' ;
// Plug-in registration must be done before Cherry is instantiated
Cherry . usePlugin ( CherryMermaidPlugin , {
mermaid , // pass in mermaid object
// mermaidAPI: mermaid.mermaidAPI, // Can also be passed in mermaid API
// At the same time, you can configure mermaid's behavior here, please refer to the official mermaid document
// theme: 'neutral',
// sequence: { useMaxWidth: false, showSequenceNumbers: true }
} ) ;
const cherryInstance = new Cherry ( {
id : 'markdown-container' ,
value : '# welcome to cherry editor!' ,
} ) ;Recomendar usar Dynamic Import, el siguiente es un ejemplo de importación dinámica de Webpack.
import 'cherry-markdown/dist/cherry-markdown.css' ;
import Cherry from 'cherry-markdown/dist/cherry-markdown.core' ;
const registerPlugin = async ( ) => {
const [ { default : CherryMermaidPlugin } , mermaid ] = await Promise . all ( [
import ( 'cherry-markdown/src/addons/cherry-code-block-mermaid-plugin' ) ,
import ( 'mermaid' ) ,
] ) ;
Cherry . usePlugin ( CherryMermaidPlugin , {
mermaid , // pass in mermaid object
} ) ;
} ;
registerPlugin ( ) . then ( ( ) => {
// Plug-in registration must be done before Cherry is instantiated
const cherryInstance = new Cherry ( {
id : 'markdown-container' ,
value : '# welcome to cherry editor!' ,
} ) ;
} ) ; ver /src/Cherry.config.js o haga clic aquí
Haga clic aquí para obtener más ejemplos.
En desarrollo, estén atentos o vea /client/
haga clic aquí
haga clic aquí
Jest se selecciona como una herramienta de prueba unitaria para su afirmación, soporte asíncrono y instantánea. La prueba unitaria incluye la prueba de CommonMark y la prueba de instantánea.
Llame a yarn run test:commonmark para probar las suites oficiales de CommonMark. Este comando se ejecuta rápidamente.
Las suites se encuentran en test/suites/commonmark.spec.json , por ejemplo:
{
"markdown" : " t foo t baz tt bim n " ,
"html" : " <pre><code>foo t baz tt bim n </code></pre> n " ,
"example" : 2 ,
"start_line" : 363 ,
"end_line" : 368 ,
"section" : " Tabs "
}, En este caso, Jest comparará el HTML generado por Cherry.makeHtml(" tfootbazttbimn") con el resultado esperado "<pre><code>footbazt tbimn</code></pre>n" . El Matcher de Cherry Markdown ha ignorado los atributos privados como data-line .
Las especificaciones y suites de CommonMark son de: https://spec.commonmark.org/.
Llame a yarn run test:snapshot para ejecutar la prueba de instantánea. Puede escribir Snapshot Suite como test/core/hooks/List.spec.ts . En la primera vez, se generará automáticamente una instantánea. Después de eso, Jest puede comparar la instantánea con el HTML generado. Si necesita regenerar una instantánea, elimine la instantánea anterior en test/core/hooks/__snapshots__ y ejecute este comando nuevamente.
La prueba de instantánea se ejecuta más lentamente. Solo debe usarse para probar ganchos que son propensos a errores y contienen una sintaxis especial de markdown de cereza.
Bienvenido a unirse a nosotros para construir un editor de Markdown más poderoso. Por supuesto, puede enviarnos una solicitud de función. Por favor, lea antes de trabajar en ello.
Apache-2.0
