Skip to content

Commit

Permalink
docs: update quick start in readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Jocs committed Apr 19, 2024
1 parent 79955f4 commit b8533a9
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 11 deletions.
58 changes: 49 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,58 @@
## Installing

```sh
npm install @marktext/muya
npm install @muyajs/core
```

## Usage

```javascript
import Muya from '@marktext/muya';
import '@marktext/muya/dist/assets/style.css';
## Quick Start

```typescript
import {
CodeBlockLanguageSelector,
EmojiSelector,
ImageResizeBar,
ImageToolBar,
InlineFormatToolbar,
MarkdownToHtml,
Muya,
ParagraphFrontButton,
ParagraphFrontMenu,
ParagraphQuickInsertMenu,
PreviewToolBar,
TableColumnToolbar,
TableDragBar,
TableRowColumMenu,
zh,
} from '@muya/core';

Muya.use(EmojiSelector);
Muya.use(InlineFormatToolbar);
Muya.use(ImageToolBar);
Muya.use(ImageResizeBar);
Muya.use(CodeBlockLanguageSelector);

Muya.use(ParagraphFrontButton);
Muya.use(ParagraphFrontMenu);
Muya.use(TableColumnToolbar);
Muya.use(ParagraphQuickInsertMenu);
Muya.use(TableDragBar);
Muya.use(TableRowColumMenu);
Muya.use(PreviewToolBar);

import '@muya/core/lib/style.css';

const container = document.querySelector('#editor');
const muya = new Muya(container);
const muya = new Muya(container, {
markdown: 'Hello world',
});

muya.locale(zh);

muya.init();
```

There is also an [example](https://github.com/marktext/muya/tree/master/examples) of how to use muya in Typescript.

## Documents

Coming soon!!!
Expand All @@ -45,8 +83,10 @@ pnpm build
## publish

```sh
# update version numbers
npm run pub
# update version numbers.
pnpm run release
# publish to npm.
pnpm -r publish
```

## FAQ
Expand Down
2 changes: 0 additions & 2 deletions examples/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ import { DEFAULT_MARKDOWN } from './data';

import './style.css';

// import "../packages/assets/style.css";

// Fix Intl.Segmenter is not work on firefox.
if (!(Intl as any).Segmenter) {
const polyfill = await import('intl-segmenter-polyfill/dist/bundled');
Expand Down

0 comments on commit b8533a9

Please sign in to comment.