md-editor-extension

English | 中文

Share your configuration of md-editor-v3 and md-editor-rt.

Language

name	description	author
zh_TW	Chinese ( Traditional)	@imzbf
fr_FR	French	@tofandel
jp_JP	Japanese	@xj89959853

PreviewTheme

name	description	author
arknights	From juejin-markdown-theme-arknights, author: @viewweiwu	@imzbf

Usage

md-editor-v3

1. Install

1yarn add md-editor-v3 @vavt/md-editor-extension

2. Config

1<template>
2  <md-editor language="zh-TW" preview-theme="arknights" />
3</template>
4
5<script setup>
6import MdEditor from 'md-editor-v3';
7// import theme css
8import '@vavt/md-editor-extension/dist/previewTheme/arknights.css';
9// import existing language
10import ZH_TW from '@vavt/md-editor-extension/dist/locale/zh-TW';
11
12MdEditor.config({
13  editorConfig: {
14    languageUserDefined: {
15      'zh-TW': ZH_TW,
16    },
17  },
18});
19</script>

md-editor-rt

1. Install

1yarn add md-editor-rt @vavt/md-editor-extension

2. Config

1import React from 'react';
2import MdEditor from 'md-editor-rt';
3// import existing theme
4import '@vavt/md-editor-extension/dist/previewTheme/arknights.css';
5// import existing language
6import ZH_TW from '@vavt/md-editor-extension/dist/locale/zh-TW';
7
8MdEditor.config({
9  editorConfig: {
10    languageUserDefined: {
11      'zh-TW': ZH_TW,
12    },
13  },
14});
15
16export default () => {
17  return <MdEditor language="zh-TW" previewTheme="arknights" />;
18};

Contribute

• Fork the repository.
• Write code based on existing templates.
• Submit a pull request to the project owner.

Please note that the development environment has automatically introduced your language configuration and theme. You do not need to manually reference it in the 'dev' directory. Regardless of the production or development environment, you only need to pay attention to the content of the language configuration and theme itself.

Language

Create a file named as [language name].js, and export in the following template.

1import type { StaticTextDefaultValue } from '../../index';
2
3/**
4 * @author imzbf
5 * @email  zbfcqtl@gmail.com
6 * @github https://github.com/imzbf
7 *
8 * English
9 */
10const EN_US: StaticTextDefaultValue = {
11  toolbarTips: {
12    bold: 'bold',
13    underline: 'underline',
14    italic: 'italic',
15    strikeThrough: 'strikeThrough',
16    title: 'title',
17    sub: 'subscript',
18    sup: 'superscript',
19    quote: 'quote',
20    unorderedList: 'unordered list',
21    orderedList: 'ordered list',
22    task: 'task list',
23    codeRow: 'inline code',
24    code: 'block-level code',
25    link: 'link',
26    image: 'image',
27    table: 'table',
28    mermaid: 'mermaid',
29    katex: 'formula',
30    revoke: 'revoke',
31    next: 'undo revoke',
32    save: 'save',
33    prettier: 'prettier',
34    pageFullscreen: 'fullscreen in page',
35    fullscreen: 'fullscreen',
36    preview: 'preview',
37    htmlPreview: 'html preview',
38    catalog: 'catalog',
39    github: 'source code',
40  },
41  titleItem: {
42    h1: 'Lv1 Heading',
43    h2: 'Lv2 Heading',
44    h3: 'Lv3 Heading',
45    h4: 'Lv4 Heading',
46    h5: 'Lv5 Heading',
47    h6: 'Lv6 Heading',
48  },
49  imgTitleItem: {
50    link: 'Add Img Link',
51    upload: 'Upload Img',
52    clip2upload: 'Clip Upload',
53  },
54  linkModalTips: {
55    title: 'Add ',
56    descLabel: 'Desc:',
57    descLabelPlaceHolder: 'Enter a description...',
58    urlLabel: 'Link:',
59    urlLabelPlaceHolder: 'Enter a link...',
60    buttonOK: 'OK',
61  },
62  clipModalTips: {
63    title: 'Crop Image',
64    buttonUpload: 'Upload',
65  },
66  copyCode: {
67    text: 'Copy',
68    successTips: 'Copied!',
69    failTips: 'Copy failed!',
70  },
71  mermaid: {
72    flow: 'flow',
73    sequence: 'sequence',
74    gantt: 'gantt',
75    class: 'class',
76    state: 'state',
77    pie: 'pie',
78    relationship: 'relationship',
79    journey: 'journey',
80  },
81  katex: {
82    inline: 'inline',
83    block: 'block',
84  },
85  footer: {
86    markdownTotal: 'Word Count',
87    scrollAuto: 'Scroll Auto',
88  },
89};
90
91export default EN_US;

PreviewTheme

Create a file named as [theme name].scss, then write your theme code:

1@import '../../common/index.scss';
2
3.xxx-theme {
4  @include common-style;
5  color: red;
6}

xxx is the name of your theme, use like previewTheme="xxx".

You can make full use of the existing css variables to generate your theme.