cherry markdown
v0.8.57
영어 | 단순화 된 중국어 | 일본어
Cherry Markdown 편집기는 JavaScript Markdown 편집기입니다. 상자 외, 가볍고 확장하기 쉬운 장점이 있습니다. 브라우저 또는 서버 (nodejs)에서 실행할 수 있습니다.
개발자는 매우 간단한 방식으로 Cherry Markdown 편집기를 전화하고 인스턴스화 할 수 있습니다. 인스턴스화 된 Cherry Markdown 편집기는 기본적으로 가장 일반적으로 사용되는 Markdown 구문 (제목, TOC, FlowChart, Formula 등)을 지원합니다.
해당 체리 마크 다운 편집기 지원이 귀하의 요구를 충족시킬 수없는 경우, 2 차 개발 또는 기능 확장을 신속하게 수행 할 수 있습니다. 동시에 Cherry Markdown 편집기는 Pure JavaScript에 의해 구현되어야하며 Angular, Vue 및 React와 같은 프레임 워크 기술에 의존해서는 안됩니다. 프레임 워크는 컨테이너 환경 만 제공합니다.
Cherry Markdown에는 화이트리스트 및 Dompurify를 필터링하여 스캔 필터를 필터링하여 내장 된 보안 후크가 있습니다.
Cherry Markdown에는 선택할 수있는 다양한 스타일 테마가 있습니다.
자세한 내용은 여기를 클릭하십시오
원사를 통해
yarn add cherry-markdownNPM을 통해
npm install cherry-markdown --save mermaid 그리기 및 테이블 투 차트의 기능을 활성화 해야하는 경우 동시에 mermaid 및 echarts 패키지를 추가해야합니다.
현재 플러그인 버전 Cherry 추천은 [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!' ) ; 인어 라이브러리의 크기는 매우 크기 때문에 Cherry Build 제품에는 Mermaid가 내장되지 않은 핵심 빌드 패키지가 포함되어 있습니다. 핵심 빌드는 다음과 같은 방식으로 가져올 수 있습니다.
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>코어 빌드 패키지에는 인어 의존성이 포함되어 있지 않으며 관련 플러그인을 수동으로 가져 오면됩니다.
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!' ,
} ) ;Dynamic Import를 사용하는 것이 좋습니다 . 다음은 Webpack Dynamic Import의 예입니다.
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!' ,
} ) ;
} ) ; /src/Cherry.config.js 참조하거나 여기를 클릭하십시오
더 많은 예를 보려면 여기를 클릭하십시오.
개발 중에도 계속 지켜봐 주시거나 /client/
여기를 클릭하십시오
여기를 클릭하십시오
Jest는 주장, 비동기 지원 및 스냅 샷을위한 단위 테스트 도구로 선택됩니다. 단위 테스트에는 CommonMark 테스트 및 스냅 샷 테스트가 포함됩니다.
yarn run test:commonmark 전화하여 공식 CommonMark 스위트를 테스트하십시오. 이 명령은 빠르게 실행됩니다.
스위트는 test/suites/commonmark.spec.json 에 있습니다.
{
"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 "
}, 이 경우 Jest Cherry.makeHtml(" tfootbazttbimn") 에 의해 생성 된 html을 "<pre><code>footbazt tbimn</code></pre>n" 과 비교합니다. Cherry Markdown의 매칭은 data-line 같은 개인 속성을 무시했습니다.
CommonMark 사양 및 스위트는 다음과 같습니다. https://spec.commonmark.org/.
yarn run test:snapshot 실행하려면 스냅 샷 테스트를 실행하십시오. test/core/hooks/List.spec.ts 와 같은 스냅 샷 스위트를 작성할 수 있습니다. 처음으로 스냅 샷이 자동으로 생성됩니다. 그 후 Jest는 스냅 샷을 생성 된 HTML과 비교할 수 있습니다. 스냅 샷을 재생 해야하는 경우 test/core/hooks/__snapshots__ 에서 이전 스냅 샷을 삭제 하고이 명령을 다시 실행하십시오.
스냅 샷 테스트는 느리게 실행됩니다. 오류가 발생하기 쉬운 후크를 테스트하고 Cherry Markdown 특수 구문을 포함하는 데만 사용해야합니다.
더 강력한 Markdown 편집자를 구축하기 위해 우리와 함께 오신 것을 환영합니다. 물론 기능 요청을 제출할 수 있습니다. 작업하기 전에 저를 읽으십시오.
아파치 -2.0
