https://github.com/jhuix/vue-showdowns-editor
A markdown editor using codemirror and previewer using @jhuix/showdowns for Vue.js.
https://github.com/jhuix/vue-showdowns-editor
codemirror editor katex markdown mde mdse mermaid plantuml showdown showdowns toc vue vue-cli4 vue-showdown
Last synced: 7 months ago
JSON representation
A markdown editor using codemirror and previewer using @jhuix/showdowns for Vue.js.
- Host: GitHub
- URL: https://github.com/jhuix/vue-showdowns-editor
- Owner: jhuix
- License: mit
- Created: 2018-12-22T07:40:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-17T14:36:31.000Z (almost 5 years ago)
- Last Synced: 2024-04-23T06:59:35.925Z (over 1 year ago)
- Topics: codemirror, editor, katex, markdown, mde, mdse, mermaid, plantuml, showdown, showdowns, toc, vue, vue-cli4, vue-showdown
- Language: Vue
- Homepage: https://jhuix.github.io/vue-showdowns-editor
- Size: 10.9 MB
- Stars: 34
- Watchers: 1
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Showdowns-Editor
A markdown editor using codemirror and previewer using [@jhuix/showdowns](https://github.com/jhuix/showdowns) for Vue.js.
The [Vue-Showdowns-Editor](https://github.com/jhuix/vue-showdowns-editor) once used a name `MDSE：MarkDown-Showdowns-Editor`.
> If you think the markdown showdowns editor can help you or also hope to encourage the author, please click on the top right corner to give me a [Star](https://github.com/jhuix/vue-showdowns-editor)⭐️. Thanks for your star.
## Live Demo Editor —— `showdowns-editor`
Check a live demo editor here https://jhuix.github.io/vue-showdowns-editor
## Markdown editor
Markdown editor of [vue-showdowns-editor](https://github.com/jhuix/vue-showdowns-editor), edit markdown text using [vue-codemirror](https://github.com/surmon-china/vue-codemirror) to access codemirror.
[CodeMirror](https://github.com/codemirror/CodeMirror) is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code. You can find more information (and the [manual](https://codemirror.net/doc/manual.html)) on the [codemirror project page](https://codemirror.net/).
## Markdown previewer
Markdown previewer of [vue-showdowns-editor](https://github.com/jhuix/vue-showdowns-editor), preview markdown content with HTML using the [showdowns](https://github.com/jhuix/showdowns) (npm package refer to [@jhuix/showdowns](https://www.npmjs.com/package/@jhuix/showdowns)) to converte it.
[Showdowns](https://github.com/jhuix/showdowns) is a lib that make markdown to html with some extensions of [showdown.js](https://github.com/showdownjs/showdown). And [Showdown](https://github.com/showdownjs/showdown) is a Javascript Markdown to HTML converter, based on the original works by John Gruber. Showdown can be used client side (in the browser) or server side (with NodeJs). For more information, refer to the following document:
- [Showdown's Markdown syntax](https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax)
- [Showdown Options](https://github.com/showdownjs/showdown/wiki/Showdown-options)
- [Showdowns readme](https://github.com/jhuix/showdowns/blob/master/README.md)
- [Showdowns Features Syntax](https://github.com/jhuix/showdowns/blob/master/public/showdowns-features.md)
## Supporting some markdown extension features
- [Footnotes](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#footnotes)
- [Table of Contents](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#table-of-contents)
- [LaTeX math and AsciiMath](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#latex-math-and-asciimath)
- [Mermaid](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#mermaid)
- [Plantuml](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#plantuml)
- [Flowchart](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#flowchart)
- [Network Sequence](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#network-sequence)
- [Graphviz's dot](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#graphviz-s-dot)
- [Railroad diagrams](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#railroad-diagrams)
- [WaveDrom](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#wavedrom)
- [Vega and Vega-Lite](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#vega-and-vega-lite)
- [Echarts](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#echarts)
- [ABCJS](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#abc)
See more information, refer to the following document:
[Extensions Syntax and Examples](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md)
[Extensions Demo Preview](https://jhuix.github.io/vue-showdowns-editor)
### Table of Contents
### LaTeX math and AsciiMath
### Mermaid
### Plantuml
### Flowchart
### Network Sequence
### Graphviz's dot
### Railroad diagrams
### WaveDrom
### Vega and Vega-Lite
## Usage In VUE
See [`mainview.vue`](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/examples/src/views/mainview.vue) source file of examples.
- Import all components
```
import Vue from 'vue';
import VueMDSE from '../src';
Vue.use(VueMDSE);
```
- Import specified component
```
import { ShowdownsEditor, Showdowns, Editor } from '../src';
export default {
components: {
[ShowdownsEditor.name]: ShowdownsEditor,
[Showdowns.name]: Showdowns,
[Editor.name]: Editor,
}
}
```
OR
```
import { ShowdownsEditor, Showdowns, Editor } from '../src';
Vue.component(ShowdownsEditor.name, ShowdownsEditor);
Vue.component(Showdowns.name, Showdowns);
Vue.component(Editor.name, Editor);
```
- Set CodeMirror Theme (mdn-like's theme) and add outside menu
```
import { ShowdownsEditor } from '@jhuix/vue-showdowns-editor';
function getOutsideMenu(locale) {
return [
{
type: 'theme:mdn-like',
text: 'mdn-like',
menu: true,
disabled: false
}
}
export default {
name: 'mainview',
components: {
[ShowdownsEditor.name]: ShowdownsEditor
},
methods: {
handlerToolClick(type) {
if (type.startsWith('theme:')) {
// click menu which type is theme:mdn-like
type = type.substr(6);
if (editor_themes.indexOf(type) != -1) {
// Set CodeMirror Theme
this.$refs.mdse.setEditorTheme(type);
}
}
},
},
created() {
this.$nextTick(function() {
// add outside menu
this.$refs.mdse.addOutsideMenu(getOutsideMenu);
// Set CodeMirror Theme
this.$refs.mdse.setEditorTheme('mdn-like');
}
}
}
// import mdn-like theme css style
@import ('~@/../node_modules/codemirror/theme/mdn-like.css');
```
## Development
- Project setup
```
npm install
```
- Compiles and hot-reloads for development
```
npm run serve
```
- Compiles and minifies for production
```
npm run build
```
## License
[MIT](https://github.com/jhuix/vue-showdowns-editor/blob/master/LICENSE)
Copyright (c) 2019-present, [Jhuix](mailto:jhuix0117@gmail.com) (Hui Jin)