{"id":16039574,"url":"https://github.com/jhuix/vue-showdowns-editor","last_synced_at":"2025-03-17T16:31:23.566Z","repository":{"id":57121223,"uuid":"162791851","full_name":"jhuix/vue-showdowns-editor","owner":"jhuix","description":"A markdown editor using codemirror and previewer using @jhuix/showdowns for Vue.js.","archived":false,"fork":false,"pushed_at":"2020-10-17T14:36:31.000Z","size":11422,"stargazers_count":34,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-23T06:59:35.925Z","etag":null,"topics":["codemirror","editor","katex","markdown","mde","mdse","mermaid","plantuml","showdown","showdowns","toc","vue","vue-cli4","vue-showdown"],"latest_commit_sha":null,"homepage":"https://jhuix.github.io/vue-showdowns-editor","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhuix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-22T07:40:55.000Z","updated_at":"2024-04-11T11:49:56.000Z","dependencies_parsed_at":"2022-08-23T20:00:37.648Z","dependency_job_id":null,"html_url":"https://github.com/jhuix/vue-showdowns-editor","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhuix%2Fvue-showdowns-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhuix%2Fvue-showdowns-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhuix%2Fvue-showdowns-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhuix%2Fvue-showdowns-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhuix","download_url":"https://codeload.github.com/jhuix/vue-showdowns-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221696695,"owners_count":16865466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","editor","katex","markdown","mde","mdse","mermaid","plantuml","showdown","showdowns","toc","vue","vue-cli4","vue-showdown"],"created_at":"2024-10-08T23:05:44.778Z","updated_at":"2024-10-27T15:17:14.848Z","avatar_url":"https://github.com/jhuix.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Showdowns-Editor\n\nA markdown editor using codemirror and previewer using [@jhuix/showdowns](https://github.com/jhuix/showdowns) for Vue.js.\n\nThe [Vue-Showdowns-Editor](https://github.com/jhuix/vue-showdowns-editor) once used a name `MDSE：MarkDown-Showdowns-Editor`.\n\n![intro](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-intro.png)\n\n\u003e 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.\n\n## Live Demo Editor —— `showdowns-editor`\n\nCheck a live demo editor here https://jhuix.github.io/vue-showdowns-editor\n\n## Markdown editor\n\nMarkdown 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.\n\n[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/).\n\n## Markdown previewer\n\nMarkdown 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.\n\n[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:\n\n- [Showdown's Markdown syntax](https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax)\n- [Showdown Options](https://github.com/showdownjs/showdown/wiki/Showdown-options)\n- [Showdowns readme](https://github.com/jhuix/showdowns/blob/master/README.md)\n- [Showdowns Features Syntax](https://github.com/jhuix/showdowns/blob/master/public/showdowns-features.md)\n\n## Supporting some markdown extension features\n\n- [Footnotes](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#footnotes)\n\n- [Table of Contents](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#table-of-contents)\n\n- [LaTeX math and AsciiMath](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#latex-math-and-asciimath)\n\n- [Mermaid](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#mermaid)\n\n- [Plantuml](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#plantuml)\n\n- [Flowchart](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#flowchart)\n\n- [Network Sequence](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#network-sequence)\n\n- [Graphviz's dot](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#graphviz-s-dot)\n\n- [Railroad diagrams](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#railroad-diagrams)\n\n- [WaveDrom](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#wavedrom)\n\n- [Vega and Vega-Lite](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#vega-and-vega-lite)\n\n- [Echarts](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#echarts)\n\n- [ABCJS](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md#abc)\n\n\nSee more information, refer to the following document:\n\n[Extensions Syntax and Examples](https://github.com/jhuix/showdowns/blob/master/docs/showdowns-features.md)\n\n[Extensions Demo Preview](https://jhuix.github.io/vue-showdowns-editor)\n\n### Table of Contents\n\n  ![toc](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-toc.png)\n\n### LaTeX math and AsciiMath\n\n  ![math](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-math.png)\n\n### Mermaid\n\n  ![gantt](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-mermaid-example.png)\n\n### Plantuml\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-plantuml.png)\n\n### Flowchart\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-flowchart.png)\n\n### Network Sequence\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-sequence.png) \n\n### Graphviz's dot\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-dot.png) \n\n### Railroad diagrams\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-railroad.png) \n\n### WaveDrom\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-wavedrom.png) \n\n### Vega and Vega-Lite\n\n  ![plantuml](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/docs/screenshot/preview-vega.png) \n\n## Usage In VUE\n\n  See [`mainview.vue`](https://raw.githubusercontent.com/jhuix/vue-showdowns-editor/master/examples/src/views/mainview.vue) source file of examples.\n\n- Import all components\n\n```\nimport Vue from 'vue';\nimport VueMDSE from '../src';\n\nVue.use(VueMDSE);\n```\n\n- Import specified component\n\n```\n\u003cscript\u003e\n  import { ShowdownsEditor, Showdowns, Editor } from '../src';\n\n  export default {\n    components: {\n      [ShowdownsEditor.name]: ShowdownsEditor,\n      [Showdowns.name]: Showdowns,\n      [Editor.name]: Editor,\n    }\n  }\n\u003c/script\u003e\n```\n\nOR\n\n```\nimport { ShowdownsEditor, Showdowns, Editor } from '../src';\n\nVue.component(ShowdownsEditor.name, ShowdownsEditor);\nVue.component(Showdowns.name, Showdowns);\nVue.component(Editor.name, Editor);\n```\n\n- Set CodeMirror Theme (mdn-like's theme) and add outside menu\n\n```\n\u003ctemplate\u003e\n  \u003cmdse-showdowns-editor\n    @toolClick=\"handlerToolClick\"\n    ref=\"mdse\"\n  \u003e\u003c/mdse-showdowns-editor\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ShowdownsEditor } from '@jhuix/vue-showdowns-editor';\n\nfunction getOutsideMenu(locale) {\n  return [\n    {\n      type: 'theme:mdn-like',\n      text: 'mdn-like',\n      menu: true,\n      disabled: false\n    }\n}\n\nexport default {\n  name: 'mainview',\n  components: {\n    [ShowdownsEditor.name]: ShowdownsEditor\n  },\n  methods: {\n    handlerToolClick(type) {\n      if (type.startsWith('theme:')) {\n        // click menu which type is theme:mdn-like \n        type = type.substr(6);\n        if (editor_themes.indexOf(type) != -1) {\n          // Set CodeMirror Theme\n          this.$refs.mdse.setEditorTheme(type);\n        }\n      }\n    },\n  },\n  created() {\n    this.$nextTick(function() {\n      // add outside menu\n      this.$refs.mdse.addOutsideMenu(getOutsideMenu);\n      // Set CodeMirror Theme\n      this.$refs.mdse.setEditorTheme('mdn-like');\n    }\n  }\n}\n\u003c/script\u003e\n\n// import mdn-like theme css style\n\u003cstyle lang=\"stylus\"\u003e\n@import ('~@/../node_modules/codemirror/theme/mdn-like.css');\n\u003c/style\u003e\n```\n\n## Development\n- Project setup\n\n```\nnpm install\n```\n\n- Compiles and hot-reloads for development\n\n```\nnpm run serve\n```\n\n- Compiles and minifies for production\n\n```\nnpm run build\n```\n\n## License\n\n[MIT](https://github.com/jhuix/vue-showdowns-editor/blob/master/LICENSE)\n\nCopyright (c) 2019-present, [Jhuix](mailto:jhuix0117@gmail.com) (Hui Jin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhuix%2Fvue-showdowns-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhuix%2Fvue-showdowns-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhuix%2Fvue-showdowns-editor/lists"}