YAMDE
Y.A.M.D.E - yet another markdown editor.
Demo:
🌱 Features
- Responsive
- Light/dark mode support
- Customizable toolbar
- Lightweight: Bundlephobia
🔧 Installation
npm install @docchi/yamde
💻 Usage
Example implementation:
import React, { useState } from 'react'
import Yamde from '@docchi/yamde'
export const App = () => {
const [text, setText] = useState('')
return <Yamde value={text} handler={setText} theme="light" />
}
⚙️ Options
🎨 Themes
There are two available theme: dark
and light
.
This can be controlled via the theme
prop (defaults to light
if non specified).
Light
<Yamde value={text} handler={setText} theme="light" />
Dark
<Yamde value={text} handler={setText} theme="dark" />
⌨️ Toolbar actions
You can customize the toolbar actions by passing in the toolbar
prop (toolbar?: string[]
).
Omiting this prop will default to showing all available actions.
<Yamde value={text} handler={setText} toolbar={['bold', 'italic', 'strikethrough']} />
Available actions:
Identifier | Description |
---|---|
bold |
Bold text. |
italic |
Italic text. |
strikethrough |
|
heading1 |
Heading 1 (H1) |
heading2 |
Heading 2 (H2) |
heading3 |
Heading 3 (H3) |
ulist |
Unordered list |
olist |
Ordered list |
table |
Table markdown |
image |
Image markdown |
quote |
Blockquote markdown |
code |
Code highlight |
hr |
Horizontal rule |
spoiler |
Hide message |