https://github.com/adrianapan/yamde

Yet another markdown editor.
https://github.com/adrianapan/yamde

dark light markdown markdown-editor react react-component reactjs themes typescript

Last synced: 3 months ago
JSON representation

Yet another markdown editor.

• Host: GitHub
• URL: https://github.com/adrianapan/yamde
• Owner: AdrianApan
• License: mit
• Created: 2021-04-12T18:11:58.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-10T09:53:19.000Z (over 2 years ago)
• Last Synced: 2024-11-08T01:39:50.817Z (3 months ago)
• Topics: dark, light, markdown, markdown-editor, react, react-component, reactjs, themes, typescript
• Language: TypeScript
• Homepage: https://codesandbox.io/s/modest-framework-6zmgb?file=/src/App.js
• Size: 115 KB
• Stars: 25
• Watchers: 3
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## YAMDE

![yamde_logo_light](https://user-images.githubusercontent.com/69169115/114769765-86de3f00-9d62-11eb-9b28-c691f62f0e86.png)

Y.A.M.D.E - yet another markdown editor.

**Demo:**

[![View YAMDE demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/modest-framework-6zmgb?fontsize=14&hidenavigation=1&theme=dark)

---

### 🌱 Features

- Responsive

- Light/dark mode support

- Customizable toolbar

- Lightweight: [Bundlephobia](https://bundlephobia.com/result?p=yamde)

---

### 🔧 Installation

`npm install yamde`

---

### 💻 Usage

Example implementation:

```jsx

import React, { useState } from 'react'

import Yamde from 'yamde'

export const App = () => {

  const [text, setText] = useState('')

  return 

}

```

---

### ⚙️ 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**

```jsx

```

![CleanShot 2021-04-15 at 00 26 39](https://user-images.githubusercontent.com/69169115/114793141-a6d12b00-9d81-11eb-9005-828d5ed6c931.gif)

**Dark**

```jsx

```

![CleanShot 2021-04-15 at 00 28 50](https://user-images.githubusercontent.com/69169115/114793167-b5b7dd80-9d81-11eb-9ca9-c8c2a90e27c0.gif)

#### ⌨️ 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.

```jsx

```

Available actions:

| Identifier      | Description            |

| --------------- | ---------------------- |

| `bold`          | **Bold** text.         |

| `italic`        | _Italic_ text.         |

| `strikethrough` | ~~Strikethrough~~ text |

| `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        |

#### `required` prop

If you use YAMDE in a form that uses HTML form validation, you can set the `required` prop to `true` (by default this is set to `false`):

```jsx

```