cherry markdown
v0.8.57
英語|単純化された中国人|日本語
Cherry Markdownエディターは、JavaScript Markdownエディターです。すぐに使用できるような利点、軽量、拡張が簡単です。ブラウザまたはサーバーで実行できます（nodejsを使用）。
開発者は、非常に簡単な方法でCherry Markdownエディターを呼び出してインスタンス化できます。インスタンス化されたチェリーマークダウンエディターは、デフォルトで最も一般的に使用されるマークダウン構文（タイトル、TOC、フローチャート、式など）をサポートしています。
Cherry Markdown Editorのサポートがニーズを満たせない構文がある場合、二次開発または機能拡張を迅速に実行できます。同時に、Cherry Markdownエディターは純粋なJavaScriptによって実装されるべきであり、Angular、Vue、Reactなどのフレームワークテクノロジーに依存してはなりません。フレームワークはコンテナ環境のみを提供します。
Cherry Markdownには、ホワイトリストをフィルタリングしてスキャンフィルターを実行することにより、セキュリティフックが組み込まれています。
Cherry Markdownには、さまざまなスタイルのテーマがあります。
詳細については、ここをクリックしてください
糸経由
yarn add cherry-markdownNPM経由
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!' ) ; マーメイドライブラリのサイズは非常に大きいため、チェリービルド製品には、組み込みの人魚のないコアビルドパッケージが含まれています。コアビルドは、次の方法でインポートできます。
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 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のMatcherはdata-lineなどのプライベート属性を無視しています。
CommonMarkの仕様とスイートは、https：//spec.commonmark.org/からのものです。
yarn run test:snapshotを呼び出して、スナップショットテストを実行します。 test/core/hooks/List.spec.tsなどのスナップショットスイートを書くことができます。初めて、スナップショットが自動的に生成されます。その後、Jestはスナップショットを生成されたHTMLと比較できます。スナップショットを再生する必要がある場合は、 test/core/hooks/__snapshots__の下の古いスナップショットを削除し、このコマンドを再度実行します。
スナップショットテストは遅くなります。エラーが発生し、チェリーマークダウンの特別な構文を含むフックをテストするためにのみ使用する必要があります。
より強力なMarkdownエディターを構築するために参加してください。もちろん、機能リクエストを送信できます。あなたがそれに取り組む前に私を読んでください。
Apache-2.0
