2

Bytemd Markdown 文本编辑器 Demo

 1 year ago
source link: https://www.jansora.com/notebook/107587
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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+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)(k=1∑n​ak​bk​)2≤(k=1∑n​ak2​)(k=1∑n​bk2​)

Mermaid Diagrams

graph TD

Start

sequenceDiagram

AliceJohnHello John, how are you?Great!See you later!AliceJohn

classDiagram

Animal
+int age
+String gender
+isMammal()
+mate()
+String beakColor
+swim()
+quack()
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()

stateDiagram-v2

Still
Moving
Crash

erDiagram

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses

journey

My working dayCatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day

gantt

A Gantt Diagram2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task Task in sec another task Another task SectionAnotherA Gantt Diagram

pie title Pets adopted by volunteers

Pets adopted by volunteers79%17%3%Pets adopted by volunteersDogsCatsRats

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. ↩


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK