https://github.com/chaseottofy/react-lite-markdown

custom markdown parser/editor with real-time preview. Built with react - avoids dangerousHTML
https://github.com/chaseottofy/react-lite-markdown

content-editor javascript markdown markdown-editor markdown-parser react react-editor react-markdown react-markdown-editor

Last synced: about 2 months ago
JSON representation

custom markdown parser/editor with real-time preview. Built with react - avoids dangerousHTML

• Host: GitHub
• URL: https://github.com/chaseottofy/react-lite-markdown
• Owner: chaseottofy
• Created: 2023-02-27T05:17:12.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-13T18:54:03.000Z (about 2 years ago)
• Last Synced: 2025-02-09T05:16:50.228Z (3 months ago)
• Topics: content-editor, javascript, markdown, markdown-editor, markdown-parser, react, react-editor, react-markdown, react-markdown-editor
• Language: JavaScript
• Homepage: https://chaseottofy.github.io/react-lite-markdown/
• Size: 629 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# markdown lite

![screen](./screen_mark.png)

## features

- Lighthouse: 100, 100, 100, 100

  - all themes adhere to contrast guidelines.

  - passes all accessibility checks.

  - tiny 50kb build.

  - avoids dangerouslySetInnerHTML.

- editor with real-time preview.

- preview scrolls with editor.

- switch between column/row layout.

- resize column/row layout.

- custom dynamic number line system.

- real-time file size.

- real-time word and line count.

- local storage.

- save and upload files.

- copy to clipboard.

### about

What separates this from many other react markdown editors is the avoidance of dangerouslySetInnerHTML and the ability to resize the editor/preview panels. It also incorporates a dynamic numbered line system (similar to notepad++), along with three contrast-accessible themes, local storage, and a file upload/download system.

Note that this is not traditional markdown. I've kept things limited to purely what I find useful/use most of the time.

Markdown expressions are rendered/represented as react elements. Aside from avoiding potential security risks, delivering content through an actual react element raises performance significantly. Using setDangerousHtml & then performing HTML sanitation goes against every core principle of react's reconciliation process.

## commands

```javascript

#                H1

##               H2

###              H3

*text*           bold

[link](url)      link

{url}            image

    codeblock

>                blockquote

- unordered      list

___              linebreak

```