Слияние кода завершено, страница обновится автоматически
Текст запроса:
A markdown editor with preview, implemented with React.js and TypeScript.
npm i @uiw/react-markdown-editor
Official document demo preview (🇨🇳中国镜像网站)
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';
const Dome = () => (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
ReactDOM.render(<Dome />, document.getElementById('app'));
import MarkdownEditor from '@uiw/react-markdown-editor';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function App() {
const [markdown, setMarkdown] = useState("");
return (
<MarkdownEditor
value="# This is a H1 \n## This is a H2 \n###### This язык текста запроса — английский.
Перевод:
**Текст запроса:**
<p align="center">
<a href="https://github.com/uiwjs/react-markdown-editor">
<img alt="react-markdown-editor logo" src="./website/logo.svg?sanitize=true">
</a>
</p>
<!--dividing-->
<p align="center">
<a href="https://github.com/uiwjs/react-markdown-editor/actions">
<img alt="Build & Deploy" src="https://github.com/uiwjs/react-markdown-editor/actions/workflows/ci.yml/badge.svg">
</a>
<a href="https://www.npmjs.com/package/@uiw/react-markdown-editor">
<img alt="NPM Download" src="https://img.shields.io/npm/dm/@uiw/react-markdown-editor.svg?style=flat">
</a>
<a href="https://www.npmjs.com/package/@uiw/react-markdown-editor">
<img alt="npm version" src="https://img.shields.io/npm/v/@uiw/react-markdown-editor.svg">
</a>
</p>
<p align="center">A markdown editor with preview, implemented with React.js and TypeScript.</p>
## Install
```bash
npm i @uiw/react-markdown-editor
Official document demo preview (🇨🇳中国镜像网站)
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';
const Dome = () => (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
ReactDOM.render(<Dome />, document.getElementById('app'));
import MarkdownEditor from '@uiw/react-markdown-editor';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function App() {
const [markdown, setMarkdown] = useState("");
return (
<MarkdownEditor
value="# This is a H1 \n## This is a H2 \n######
Как видно из перевода, текст запроса написан на английском языке. ## Поддержка тёмного режима (dark-mode/night-mode)
По умолчанию тёмный режим (`dark-mode`) автоматически переключается в соответствии с системой. Если вам нужно переключиться вручную, просто установите параметр `data-color-mode="dark"` для элемента html.
```html
<html data-color-mode="dark">
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
Наследуйте пользовательские цветовые переменные, добавив селектор .wmde-markdown-var.
const Demo = () => {
return (
<div>
<div className="wmde-markdown-var"> </div>
<MarkdownEditor value="Hello Markdown!" />
</div>
)
}
value (string) — необработанная уценка, которая будет преобразована в HTML (обязательно);visible? : boolean — показывает превью, которое будет преобразовано в HTML;toolbars? : ICommand[] | string[] — настройки отображения инструментов;toolbarsMode? : ICommand[] | string[] — настройки отображения инструментов;onChange? : function(editor: IInstance, data: CodeMirror.EditorChange, value: string) — вызывается при внесении изменений;onBlur? : function(editor: IInstance, event: Event) — событие происходит, когда объект теряет фокус;previewProps — реквизиты react-markdown.npm run dev
npm run type-check:watch
npm run doc
Как всегда, спасибо нашим замечательным участникам!
Сделано с github-action-contributors.
Лицензия MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )