Bytemd Markdown 文本编辑器 Demo预计阅读时间 3 分钟

    官方网站 https://bytemd.js.org/

    Markdown Basic Syntax

    I just love bold text. Italicized text is the cat's meow. At the command prompt, type nano.

    My favorite markdown editor is ByteMD.

    1. First item
    2. Second item
    3. Third item

    Dorothy followed her through many of the beautiful rooms in her castle.

    import gfm from '@bytemd/plugin-gfm'
    import { Editor, Viewer } from 'bytemd'
    
    const plugins = [
      gfm(),
      // Add more plugins here
    ]
    
    const editor = new Editor({
      target: document.body, // DOM to render
      props: {
        value: '',
        plugins,
      },
    })
    
    editor.on('change', (e) => {
      editor.$set({ value: e.detail.value })
    })
    

    GFM Extended Syntax

    Automatic URL Linking: https://github.com/bytedance/bytemd

    The world is flat. We now know that the world is round.

    • Write the press release
    • Update the website
    • Contact the media
    SyntaxDescription
    HeaderTitle
    ParagraphText

    Footnotes

    Here's a simple footnote,1 and here's a longer one.2

    Gemoji

    Thumbs up: 👍, thumbs down: 👎.

    Families: 👨‍👨‍👦‍👦

    Long flags: 🏴󠁧󠁢󠁷󠁬󠁳󠁿, 🏴󠁧󠁢󠁳󠁣󠁴󠁿, 🏴󠁧󠁢󠁥󠁮󠁧󠁿.

    Math Equation

    Inline math equation: a+ba+b

    (k=1nakbk)2(k=1nak2)(k=1nbk2)\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

    Mermaid Diagrams

    graph TD

    graph TD
    Start --> Stop
    

    sequenceDiagram

    sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
    

    classDiagram

    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
    +String beakColor
    +swim()
    +quack()
    }
    class Fish{
    -int sizeInFeet
    -canEat()
    }
    class Zebra{
    +bool is_wild
    +run()
    }
    

    stateDiagram-v2

    stateDiagram-v2
    [*] --> Still
    Still --> [*]
    
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
    

    erDiagram

    erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    

    journey

    journey
    title My working day
    section Go to work
    Make tea: 5: Me
    Go upstairs: 3: Me
    Do work: 1: Me, Cat
    section Go home
    Go downstairs: 5: Me
    Sit down: 5: Me
    

    gantt

    gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
    

    pie title Pets adopted by volunteers

    pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
    
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
    

    Footnotes

    1. This is the first footnote.

    2. Here's one with multiple paragraphs and code.

      Indent paragraphs to include them in the footnote.

      { my code }

      Add as many paragraphs as you like.

    评论栏