cherry markdown
v0.8.57
Bahasa Inggris | China yang disederhanakan | Jepang
Editor Cherry Markdown adalah editor Markdown JavaScript. Ini memiliki keunggulan seperti out-of-the-box, ringan dan mudah diperluas. Ini dapat dijalankan di browser atau server (dengan nodeJS).
Pengembang dapat menelepon dan membuat instantiate editor markdown ceri dengan cara yang sangat sederhana. Editor Markdown Ceri yang Instantiated mendukung sintaks Markdown yang paling umum digunakan (seperti judul, TOC, Flowchart, Formula, dll.) Secara default.
Ketika sintaks yang dukungan editor ceri markdown tidak dapat memenuhi kebutuhan Anda, pengembangan sekunder atau ekstensi fungsi dapat dilakukan dengan cepat. Pada saat yang sama, editor ceri markdown harus diimplementasikan oleh JavaScript murni, dan tidak boleh bergantung pada teknologi kerangka kerja seperti Angular, Vue dan React. Kerangka kerja hanya menyediakan lingkungan kontainer.
Cherry Markdown memiliki kait keamanan bawaan, dengan memfilter daftar putih dan Dompurify untuk melakukan pemindaian filter.
Markdown ceri memiliki berbagai tema gaya untuk dipilih.
Klik di sini untuk lebih jelasnya
Melalui benang
yarn add cherry-markdownMelalui NPM
npm install cherry-markdown --save Jika Anda perlu mengaktifkan fungsi menggambar mermaid dan meja-ke-bilah, Anda perlu menambahkan paket mermaid dan echarts pada saat yang sama.
Saat ini, Versi Plug-in Cherry Rekomendasi adalah [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!' ) ; Karena ukuran perpustakaan putri duyung sangat besar, produk cherry build berisi paket pembuatan inti tanpa putri duyung bawaan. Bangunan inti dapat diimpor dengan cara berikut.
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>Paket pembuatan inti tidak mengandung ketergantungan putri duyung, harus mengimpor plug-in terkait secara manual.
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!' ,
} ) ;Merekomendasikan menggunakan impor dinamis, berikut ini adalah contoh impor dinamis 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!' ,
} ) ;
} ) ; lihat /src/Cherry.config.js atau klik di sini
Klik di sini untuk contoh lebih lanjut.
Di bawah pengembangan, tetaplah disini atau lihat /client/
klik disini
klik disini
Jest dipilih sebagai alat pengujian unit untuk pernyataannya, dukungan asinkron dan snapshot. Uji unit termasuk tes Commonmark dan tes snapshot.
yarn run test:commonmark untuk menguji commonmark suite resmi. Perintah ini berjalan cepat.
Suites terletak di test/suites/commonmark.spec.json , misalnya:
{
"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 "
}, Dalam hal ini, Jest akan membandingkan HTML yang dihasilkan oleh Cherry.makeHtml(" tfootbazttbimn") dengan hasil yang diharapkan "<pre><code>footbazt tbimn</code></pre>n" . Pencocokan Cherry Markdown telah mengabaikan atribut pribadi seperti data-line .
Spesifikasi dan suite Commonmark berasal dari: https://spec.commonmark.org/.
Hubungi yarn run test:snapshot untuk menjalankan tes snapshot. Anda dapat menulis suite snapshot seperti test/core/hooks/List.spec.ts . Pada pertama kalinya, snapshot akan dihasilkan secara otomatis. Setelah itu, Jest dapat membandingkan snapshot dengan HTML yang dihasilkan. Jika Anda perlu meregenerasi snapshot, hapus snapshot lama di bawah test/core/hooks/__snapshots__ dan jalankan perintah ini lagi.
Tes snapshot berjalan lebih lambat. Ini hanya boleh digunakan untuk menguji kait yang rentan terhadap kesalahan dan mengandung sintaks khusus ceri markdown.
Selamat datang untuk bergabung dengan kami untuk membangun editor Markdown yang lebih kuat. Tentu saja Anda dapat mengirimkan permintaan fitur kepada kami. Tolong baca saya sebelum Anda mengerjakannya.
Apache-2.0
