test_latex

$$\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) ```math \cos (2\theta) = \cos^2 \theta - \sin^2 \theta$$ $$\lim\limits_{x \to \infty} \exp(-x) = 0$$ $$a \bmod b$$ $$x \equiv a \pmod{b}$$

A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on

encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc.

Features

• 📑 Indent line or selected text by pressing tab key, with customizable indentation.
• ♻️ Based on
  textarea
  encapsulation, does not depend on any modern code editors.
• 🚧 Does not depend on the
  uiw
  component library.
• 🚘 Automatic list on new lines.
• 😻 GitHub flavored markdown support.
• 🌒 Support dark-mode/night-mode @v3.11.0+.
• 💡 Support next.js, Use examples in next.js.
• Line/lines duplication (Ctrl+D) and movement (Alt+UpArrow/DownArrow) @v3.24.0+.

Quick Start

Using

Special Markdown syntax

Supports for CSS Style

Use HTML comments

to let Markdown support style customization.

Ignore content display via HTML comments

Shown in GitHub readme, excluded in HTML.

Output:

Security

Please note markdown needs to be sanitized if you do not completely trust your authors. Otherwise, your app is vulnerable to XSS. This can be achieved by adding rehype-sanitize as a plugin.

Remove Code Highlight

The following example can help you exclude code highlighting code from being included in the bundle.

component does not contain the

rehype-prism-plus

code highlighting package,

highlightEnable

,

showLineNumbers

and

highlight line

functions will no longer work. (#586)

Custom Toolbars

Customize the toolbar with

and

extraCommands

props.

re-render

element.

Custom Preview Command Tool

Add Help Command Tool

Editor Font Size

Editor height adapts to text

The initial height can be adjusted through

. Dragbar will automatically expire. You can hide the drag button through

visibleDragbar={false}

Preview Markdown

Support Custom KaTeX Preview

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web, We perform math rendering through

.

The following example is preview in CodeSandbox.

⚠️ Upgrade v2 to v3 d025430

Markdown text to Image

Support Custom Mermaid Preview

Using mermaid to generation of diagram and flowchart from text in a similar manner as markdown

Support Nextjs

Use examples in nextjs.

#224

Support dark-mode/night-mode

By default, the

is automatically switched according to the system. If you need to switch manually, just set the

data-color-mode="dark"

parameter for body.

Inherit custom color variables by adding

selector. Setting theme styles with

data-color-mode="light"

.

Props

• value: string
  : The Markdown value.
• onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)
  : Event handler for the
  onChange
  event.
• onHeightChange?: ((value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore)
  : editor height change listener.
• onStatistics?: (data: Statistics) => void;
  Some data on the statistics editor.
• commands?: ICommand[]
  : An array of
  ICommand
  , which, each one, contain a
  commands
  property. If no commands are specified, the default will be used. Commands are explained in more details below.
• commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand
  : Filter or modify your commands.
• extraCommands?: ICommand[]
  : Displayed on the right side of the toolbar.
• autoFocus?: true
  : Can be used to make
  Markdown Editor
  focus itself on initialization.
• previewOptions?: ReactMarkdown.ReactMarkdownProps
  : This is reset @uiw/react-markdown-preview settings.
• textareaProps?: TextareaHTMLAttributes
  : Set the
  textarea
  related props.
• renderTextarea?: (props, opts) => JSX.Element;
  :
  @deprecated
  Please use
  renderTextarea
  ->
  components
  . Use div to replace TextArea or re-render TextArea. #193
• components
  : re-render textarea/toolbar element. #419
  • textarea
    Use div to replace TextArea or re-render TextArea
  • toolbar
    Override the default command element.
    toolbar
    <
    command[].render
  • preview
    Custom markdown preview. #429
• height?: number=200
  : The height of the editor. ️⚠️
  Dragbar
  is invalid when
  height
  parameter percentage.
• visibleDragbar?: boolean=true
  : Show drag and drop tool. Set the height of the editor.
• highlightEnable?: boolean=true
  : Disable editing area code highlighting. The value is
  false
  , which increases the editing speed.
• fullscreen?: boolean=false
  : Show markdown preview.
• overflow?: boolean=true
  : Disable
  fullscreen
  setting body styles
• preview?: 'live' | 'edit' | 'preview'
  : Default value
  live
  , Show markdown preview.
• maxHeight?: number=1200
  : Maximum drag height. The
  visibleDragbar=true
  value is valid.
• minHeights?: number=100
  : Minimum drag height. The
  visibleDragbar=true
  value is valid.
• tabSize?: number=2
  : The number of characters to insert when pressing tab key. Default
  2
  spaces.
• defaultTabEnable?: boolean=false
  : If
  false
  , the
  tab
  key inserts a tab character into the textarea. If
  true
  , the
  tab
  key executes default behavior e.g. focus shifts to next element.
• hideToolbar?: boolean=false
  : Option to hide the tool bar.
• enableScroll?: boolean=true
  : Whether to enable scrolling.

Development

1. Install dependencies

2. Development
   @uiw/react-md-editor
   package:

3. Launch documentation site

Related

• @uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
• @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-codemirror: CodeMirror component for React. @codemirror
• @uiw/react-monacoeditor: Monaco Editor component for React.
• @uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-markdown-preview: React component preview markdown text in web browser.

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

$$k_{n+1} = n^2 + k_n^2 - k_{n-1}$$ $$x^{1.01}$$ $$f(n) = n^5 + 4n^2 + 2 |_{n=17}$$ $$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$ $$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$ $$^3/_7$$ $$\begin{equation} x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } } \end{equation}$$ $$\sqrt{\frac{a}{b}}$$ $$\sqrt[n]{1+x+x^2+x^3+\dots+x^n}$$ $$\let\oldsqrt\sqrt \def\sqrt{\mathpalette\DHLhksqrt} \def\DHLhksqrt#1#2{\setbox0=\hbox{$#1\oldsqrt{#2\,}$}\dimen0=\ht0 \advance\dimen0-0.2\ht0 \setbox2=\hbox{\vrule height\ht0 depth -\dimen0}{\box0\lower0.4pt\box2}}$$ $$\sum_{i=1}^{10} t_i$$ $$\displaystyle\sum_{i=1}^{10} t_i$$ $$\sum_{\substack{ 0<i<m \\ 0<j<n }} P(i,j)$$