cherry markdown
v0.8.57
ภาษาอังกฤษ | ภาษาจีนง่ายๆ | ญี่ปุ่น
Cherry Markdown Editor เป็นตัวแก้ไข JavaScript Markdown มันมีข้อดีเช่นนอกกรอบน้ำหนักเบาและง่ายต่อการขยาย มันสามารถทำงานในเบราว์เซอร์หรือเซิร์ฟเวอร์ (ด้วย nodejs)
นักพัฒนาสามารถโทรและอินสแตนซ์ตัวแก้ไข Markdown Cherry ในวิธีที่ง่ายมาก ตัวแก้ไขการทำเครื่องหมายเชอร์รี่แบบอินสแตนซ์รองรับไวยากรณ์ Markdown ที่ใช้กันมากที่สุด (เช่น Title, TOC, ผังงาน, สูตร ฯลฯ ) โดยค่าเริ่มต้น
เมื่อไวยากรณ์ที่สนับสนุนตัวแก้ไข Markdown Cherry ไม่สามารถตอบสนองความต้องการของคุณการพัฒนารองหรือการขยายฟังก์ชั่นสามารถดำเนินการได้อย่างรวดเร็ว ในเวลาเดียวกันตัวแก้ไข Cherry Markdown ควรดำเนินการโดยจาวาสคริปต์บริสุทธิ์และไม่ควรพึ่งพาเทคโนโลยีกรอบเช่น Angular, Vue และ React เฟรมเวิร์กมีสภาพแวดล้อมคอนเทนเนอร์เท่านั้น
Cherry Markdown มีตะขอรักษาความปลอดภัยในตัวโดยการกรอง whitelist และ dompurify เพื่อทำกรองสแกน
Cherry Markdown มีธีมสไตล์ที่หลากหลายให้เลือก
คลิกที่นี่เพื่อดูรายละเอียดเพิ่มเติม
ผ่านเส้นด้าย
yarn add cherry-markdownผ่าน NPM
npm install cherry-markdown --save หากคุณต้องการเปิดใช้งานฟังก์ชั่นของการวาดภาพ mermaid และตารางต่อชาร์ตคุณต้องเพิ่มแพ็คเกจ mermaid และ echarts ในเวลาเดียวกัน
ปัจจุบันปลั๊กอินรุ่น เชอร์รี่ แนะนำคือ [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!' ) ; เนื่องจากขนาดของไลบรารีนางเงือกมีขนาดใหญ่มากผลิตภัณฑ์บิลด์เชอร์รี่จึงมีแพ็คเกจบิลด์หลักที่ไม่มีนางเงือกในตัว Core Build สามารถนำเข้าด้วยวิธีต่อไปนี้
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!' ,
} ) ;แนะนำ ให้ใช้การนำเข้าแบบไดนามิกต่อไปนี้เป็นตัวอย่างของการนำเข้าแบบไดนามิก 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!' ,
} ) ;
} ) ; ดู /src/Cherry.config.js หรือคลิกที่นี่
คลิกที่นี่เพื่อดูตัวอย่างเพิ่มเติม
อยู่ระหว่างการพัฒนาโปรดติดตามความคืบหน้าหรือดู /client/
คลิกที่นี่
คลิกที่นี่
JEST ถูกเลือกเป็นเครื่องมือทดสอบหน่วยสำหรับการยืนยันการสนับสนุนแบบอะซิงโครนัสและสแน็ปช็อต การทดสอบหน่วยรวมถึงการทดสอบ Commonmark และการทดสอบสแน็ปช็อต
โทรหา yarn run test:commonmark เพื่อทดสอบ Commonmark Suites อย่างเป็นทางการ คำสั่งนี้ทำงานเร็ว
ห้องสวีทอยู่ใน 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 จะเปรียบเทียบ HTML ที่สร้างโดย Cherry.makeHtml(" tfootbazttbimn") กับผลลัพธ์ที่คาดหวัง "<pre><code>footbazt tbimn</code></pre>n" Matcher ของ Cherry Markdown ได้เพิกเฉยต่อคุณลักษณะส่วนตัวเช่น data-line
ข้อกำหนดและห้องสวีท Commonmark มาจาก: https://spec.commonmark.org/
โทรหา yarn run test:snapshot เพื่อเรียกใช้การทดสอบสแน็ปช็อต คุณสามารถเขียน Snapshot Suite เช่น test/core/hooks/List.spec.ts ในครั้งแรกสแนปชอตจะถูกสร้างขึ้นโดยอัตโนมัติ หลังจากนั้น JEST สามารถเปรียบเทียบสแน็ปช็อตกับ HTML ที่สร้างขึ้น หากคุณต้องการสร้างสแน็ปช็อตใหม่ให้ลบสแน็ปช็อตเก่าภายใต้ test/core/hooks/__snapshots__ และเรียกใช้คำสั่งนี้อีกครั้ง
การทดสอบสแน็ปช็อตทำงานช้าลง ควรใช้เพื่อทดสอบตะขอที่มีข้อผิดพลาดและมีไวยากรณ์พิเศษของเชอร์รี่มาร์กดาวน์
ยินดีต้อนรับสู่การเข้าร่วมกับเราเพื่อสร้างตัวแก้ไข Markdown ที่ทรงพลังยิ่งขึ้น แน่นอนคุณสามารถส่งคำขอคุณสมบัติให้เราได้ โปรดอ่านฉันก่อนที่คุณจะทำงาน
Apache-2.0
