fix#24 reduce bundle size & light model support

README.md

@@ -21,7 +21,7 @@ npm install markdown-it-vue
 - GFM style
 - emoji
 - [mermaid charts](http://knsv.github.io/mermaid/)
-- [Echarts](http://echarts.baidu.com)
+- [Echarts](http://echarts.baidu.com) **simple only**
 - Flowcharts.js
 - Subscript/Superscript
 - [AsciiMath](http://asciimath.org/)
@@ -40,7 +40,6 @@ npm install markdown-it-vue
 - markdown-it-mark
 - markdown-it-katex
 - markdown-it-task-lists
-- markdown-it-icons
 - markdown-it-highlight
 - markdown-it-latex
 - markdown-it-container
@@ -50,6 +49,9 @@ npm install markdown-it-vue
 
 internal plugin list:
 
+- markdown-it-font-awsome
+- markdown-it-link-attributes
+- markdown-it-highlight
 - markdown-it-plugin-echarts
 - markdown-it-plugin-mermaid
 - markdown-it-plugin-flowchart
@@ -113,6 +115,67 @@ it can add your plugin to markdown-it-vue by the `use` method.
 this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
 ```
 
+## support hilight lang
+
+PR for you lang wich you want.
+
+- html
+- json
+- css
+- shell
+- bash
+- C
+- Java
+- Python
+- C++
+- C#
+- PHP
+- SQL
+- R
+- Swift
+- Go
+- MATLAB
+- Ruby
+- Perl
+- Objective-C	
+- Rust
+- Dart
+- Delphi
+- D
+- Kotlin
+- Scala
+- SAS
+- Lisp
+- Lua
+- Ada
+- Fortran
+- PowerShell
+- VBScript
+- VBscript-html
+- Groovy
+- Julia
+- Julia-repl
+- LabVIEW
+- Haskell
+- ActionScript
+- Scheme
+- TypeScript
+- F#
+- Prolog
+- Erlang
+
+## about echarts
+
+use echarts.simple to reduce the bundle size.
+
+## markdown-it-vue-light
+
+markdown-it-vue-light remove the mermaid chart to reduce the bundle size.
+
+https://github.com/ravenq/markdown-it-vue/issues/24
+
+for a small bundle size, it better to import the markdown-it-vue-light.
+
 ## Usage
 
 ```vue
@@ -138,6 +201,31 @@ export default {
 </script>
 ```
 
+the light model.
+
+```vue
+<template>
+  <div>
+    <markdown-it-vue-light class="md-body" :content="content" />
+  </div>
+</template>
+
+<script>
+import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
+import 'markdown-it-vue/dist/markdown-it-vue-light.css'
+export default {
+  components: {
+    MarkdownItVueLight
+  },
+  data() {
+    return {
+      content: '# your markdown content'
+    }
+  }
+}
+</script>
+```
+
 ## ScreenShot
 
 ![markdown-it-vue](https://github.com/ravenq/markdown-it-vue/blob/master/doc/markdown-it-vue.png?raw=true)

README_CN.md

@@ -54,6 +54,9 @@ npm install markdown-it-vue
 
 内置插件：
 
+* markdown-it-font-awsome
+* markdown-it-link-attributes
+* markdown-it-highlight
 * markdown-it-plugin-echarts
 * markdown-it-plugin-mermaid
 * markdown-it-plugin-flowchart
@@ -111,14 +114,77 @@ options: {
 
 个插件详细说明见个插件官方文档。
 
-## More plugins
+## 自定义插件
 
 it can add your plugin to markdown-it-vue by the `use` method.
 
 ```js
 this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
 ```
 
+## 支持高亮的语言
+
+语言高亮使用 hilight.js 打包过大，因此只引用了常用的语言。
+
+如果这里没有你需要的语言，欢迎提 PR。
+
+- html
+- json
+- css
+- shell
+- bash
+- C
+- Java
+- Python
+- C++
+- C#
+- PHP
+- SQL
+- R
+- Swift
+- Go
+- MATLAB
+- Ruby
+- Perl
+- Objective-C	
+- Rust
+- Dart
+- Delphi
+- D
+- Kotlin
+- Scala
+- SAS
+- Lisp
+- Lua
+- Ada
+- Fortran
+- PowerShell
+- VBScript
+- VBscript-html
+- Groovy
+- Julia
+- Julia-repl
+- LabVIEW
+- Haskell
+- ActionScript
+- Scheme
+- TypeScript
+- F#
+- Prolog
+- Erlang
+
+## 关于 echarts
+
+为了减少包的大小，只引用 echarts.simple。
+
+## 精简版 markdown-it-vue-light
+
+https://github.com/ravenq/markdown-it-vue/issues/24
+
+为了进一步缩小打包的大小，移除了 mermaid chart。这包直接引用了整个 lodash, 他本身也很大。
+
+如果平时用不到的话，就用精简版吧。
+
 ## 使用示例
 
 ```vue
@@ -144,6 +210,31 @@ export default {
 </script>
 ```
 
+使用精简版
+
+```vue
+<template>
+  <div>
+    <markdown-it-vue-light class="md-body" :content="content" />
+  </div>
+</template>
+
+<script>
+import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
+import 'markdown-it-vue/dist/markdown-it-vue-light.css'
+export default {
+  components: {
+    MarkdownItVueLight
+  },
+  data() {
+    return {
+      content: '# your markdown content'
+    }
+  }
+}
+</script>
+```
+
 ## 示例截图
 
 ![markdown-it-vue](https://github.com/ravenq/markdown-it-vue/blob/master/doc/markdown-it-vue.png?raw=true)

example/components/example.js

@@ -150,6 +150,34 @@ The width and height is the size for chart container.
 
 ## code
 
+### c
+\`\`\`c
+#include <stdio.h>
+int main(int argc char* argv[]) {
+  printf("Hello, World!");
+  return 0;
+}
+\`\`\`
+
+### json
+
+\`\`\`json
+{
+  "name": "markdown-it-vue"
+}
+\`\`\`
+
+### javascript
+\`\`\`json
+import MarkdownItVue from 'markdown-it-vue'
+export default {
+  components: {
+    MarkdownItVue
+  }
+}
+\`\`\`
+
+### bash
 \`\`\`bash
 npm install markdown-it-vue
 \`\`\`
@@ -187,4 +215,4 @@ para(path2, right)->op2->e
 st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
 \`\`\`
 
-`;
+`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-it-vue",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "private": false,
   "description": "The vue lib for markdown-it",
   "author": {
@@ -21,25 +21,25 @@
   ],
   "scripts": {
     "dev": "vue-cli-service serve ./example/main.js",
-    "build": "npm run build:lib && npm run build:example",
+    "build": "npm run build:lib && npm run build:light && npm run build:example",
     "lint": "vue-cli-service lint",
     "build:example": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build --dest example/dist ./example/main.js",
-    "build:lib": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build --target lib ./src/index.js"
+    "build:lib": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build --target lib ./src/index.js",
+    "build:light": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build --target lib --name markdown-it-vue-light ./src/index-light.js"
   },
   "main": "dist/markdown-it-vue.umd.min.js",
   "dependencies": {
     "echarts": "^4.5.0",
     "flowchart.js": "^1.13.0",
     "github-markdown-css": "^3.0.1",
-    "highlight.js": "^9.16.2",
+    "highlight.js": "^10.0.3",
     "markdown-it": "^10.0.0",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-container": "^2.0.0",
     "markdown-it-deflist": "^2.0.3",
     "markdown-it-emoji": "^1.4.0",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-github-toc": "^3.2.4",
-    "markdown-it-icons": "^0.4.1",
     "markdown-it-ins": "^3.0.0",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-latex": "^0.2.0",
@@ -60,6 +60,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^5.0.0",
     "vue-cli-plugin-component-lib": "^0.1.6",
+    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {

src/index-light.js

@@ -0,0 +1,13 @@
+import MarkdownItVueLight from './markdown-it-vue-light'
+
+const install = function (Vue) {
+  Vue.component(MarkdownItVueLight.name, MarkdownItVueLight)
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+MarkdownItVueLight.install = install
+export default MarkdownItVueLight