|
2 | 2 |
|
3 | 3 | **Markdown*Palettes** is an open-source Markdown editor for the modern web. |
4 | 4 |
|
5 | | -### Usage |
| 5 | +## Usage |
6 | 6 |
|
7 | | -#### Directly use js release |
| 7 | +We have four bundle schemes. Choose what you prefer. |
| 8 | +Note that to use **Markdown*Palettes**, your web page must be in standard mode and use UTF-8 encoding. e.g.: |
8 | 9 |
|
9 | | -Get the latest [release](https://github.com/luogu-dev/markdown-palettes/releases). |
| 10 | +```html |
| 11 | +<!DOCTYPE html> |
| 12 | +<meta charset="utf-8"> |
| 13 | +``` |
| 14 | + |
| 15 | +### With Build Tools (webpack, rollup, etc) |
| 16 | + |
| 17 | +First install our npm package: |
| 18 | + |
| 19 | +```console |
| 20 | +$ yarn add markdown-palettes |
| 21 | +``` |
10 | 22 |
|
11 | | -````html |
12 | | -<div id="editor"></div> |
| 23 | +Since **Markdown*Palettes** is a Vue component, we assume you're familiar with Vue. |
| 24 | + |
| 25 | +#### Use the ES6 Module |
| 26 | + |
| 27 | +If you use webpack v2+ or rollup, you can use the ES6 module: |
| 28 | + |
| 29 | +```html |
| 30 | +<template> |
| 31 | + <div style="height: 700px;"> |
| 32 | + <markdown-palettes v-model="value"/> |
| 33 | + </div> |
| 34 | +</template> |
13 | 35 | <script> |
14 | | - var markdownEditor = new MarkdownPalettes("#editor"); |
15 | | - markdownEditor.editor.setCode("# 233"); |
16 | | - var code = markdownEditor.editor.getCode(); |
| 36 | + import MarkdownPalettes from 'markdown-palettes' |
| 37 | + export default { |
| 38 | + components: [MarkdownPalettes], |
| 39 | + data: () => { value: 'Hello, **Markdown*Palettes**!' } |
| 40 | + } |
17 | 41 | </script> |
18 | | -```` |
| 42 | +``` |
| 43 | + |
| 44 | +Note that the ES6 module didn't resolve its dependencies and pack them inside. It doesn't matter if you configure your webpack or rollup to resolve into `node_modules`, which is the common practice. As a fallback, you can use the CommonJS module. |
| 45 | + |
| 46 | +#### Use the CommonJS Module |
| 47 | + |
| 48 | +Replacing the ES6 'import' statement with CommonJS 'require' function: |
| 49 | + |
| 50 | +```javascript |
| 51 | +const MarkdownPalettes = require('markdown-palettes') |
| 52 | +require('markdown-palettes/dist/MarkdownPalettes.css') |
| 53 | +``` |
| 54 | + |
| 55 | +The CommonJS module resolved its dependencies and packed them inside. |
| 56 | + |
| 57 | +### Without Build Tools (use directly in HTML) |
| 58 | + |
| 59 | +It's OK to use **Markdown*Palettes** without build tools, if you're not so familiar with Vue and Node.js toolchain. |
| 60 | +Copy the items in `dist` directory into your project. |
| 61 | + |
| 62 | +#### Use with Vue |
| 63 | + |
| 64 | +This is recommended if you use other Vue components in your HTML page. |
19 | 65 |
|
20 | | -#### Use as a Vue component |
21 | | -````html |
22 | | -<div> |
23 | | - <markdown-palettes v-model="code"></markdown-palettes> |
| 66 | +```html |
| 67 | +<link rel="stylesheet" href="MarkdownPalettes.css"> |
| 68 | +<div id="editor-container" style="height: 700px;"> |
| 69 | + <markdown-palettes v-model="value"></markdown-palettes> |
24 | 70 | </div> |
| 71 | +<script src="https://cdn.jsdelivr.net/npm/vue@2.5"></script> |
| 72 | +<script src="MarkdownPalettes.umd.min.js"></script> |
| 73 | +<script> |
| 74 | + var app = new Vue({ |
| 75 | + el: '#editor-container', |
| 76 | + components: [MarkdownPalettes], |
| 77 | + data: () => { value: 'Hello, **Markdown*Palettes**!' } |
| 78 | + }) |
| 79 | +</script> |
| 80 | +``` |
| 81 | + |
| 82 | +#### Use without Vue |
| 83 | + |
| 84 | +This is suitable if you don't have other Vue components in your HTML page or you 'dislike' Vue. Note that this bundle includes Vue inside so it's larger. |
25 | 85 |
|
| 86 | +```html |
| 87 | +<link rel="stylesheet" href="MarkdownPalettes.css"> |
| 88 | +<script src="markdown-palettes.js"></script> |
| 89 | +<div id="editor-container" style="height: 700px;"> |
| 90 | + <div id="editor"></div> |
| 91 | +</div> |
26 | 92 | <script> |
27 | | - import Editor from 'markdown-palettes' |
28 | | - export default { |
29 | | - components: { |
30 | | - Editor |
31 | | - } |
32 | | - } |
| 93 | + var markdownEditor = new MarkdownPalettes("#editor"); |
| 94 | + markdownEditor.editor.setCode("Hello, **Markdown*Palettes**!"); |
| 95 | + var code = markdownEditor.editor.getCode(); |
33 | 96 | </script> |
34 | | -```` |
| 97 | +``` |
| 98 | + |
| 99 | +### External Resources |
| 100 | + |
| 101 | +By default bundle don't contain syntax highlighting for programming languages. If you use the bundles other than ES6 module, unfortunately you have to build it by yourself to get extra language support. If you use ES6 module, you can easily import them: |
35 | 102 |
|
36 | | -#### Development |
37 | | -```bash |
38 | | -$ npm install |
39 | | -$ npm run dev |
| 103 | +```javascript |
| 104 | +// register languages for hljs |
| 105 | +import hljs from 'highlight.js/lib/highlight' |
| 106 | +import cpp from 'highlight.js/lib/languages/cpp' |
| 107 | +hljs.registerLanguage('cpp', cpp) |
| 108 | + |
| 109 | +// register languages for CodeMirror |
| 110 | +import 'codemirror/mode/clike/clike' |
40 | 111 | ``` |
41 | 112 |
|
42 | | -### Credits |
| 113 | +## Documentation |
| 114 | + |
| 115 | + _TODO_ |
| 116 | + |
| 117 | +## Development |
| 118 | + |
| 119 | +First checkout this repo. |
| 120 | + |
| 121 | +```console |
| 122 | +$ yarn # install dependencies |
| 123 | +$ yarn dev # start dev server |
| 124 | +$ yarn build # build dist |
| 125 | +``` |
| 126 | + |
| 127 | +### Release |
| 128 | + |
| 129 | +Please upload `dist` directory to npm together. |
| 130 | + |
| 131 | +## Credits |
43 | 132 |
|
44 | | -Developed by @darkflames and @lin_toto of the Luogu Dev Team |
| 133 | +Developed by @darkflames and @lin_toto of the Luogu Dev Team |
0 commit comments