add highlight&theme

- - · - - · commit bf8b68089d6d · 2017-01-04T17:56:04.000+08:00
diff --git a/markdown-editor.vue b/markdown-editor.vue
@@ -12,6 +12,7 @@ export default {
   name: 'markdown-editor',
   props: {
     value: String,
+    previewClass: String,
     configs: {
       type: Object
     }
@@ -25,14 +26,44 @@ export default {
       configs.element = configs.element || this.$el.firstChild
       configs.initialValue = configs.initialValue || this.value
 
+      // 开启代码高亮
+      if (configs.renderingConfig.codeSyntaxHighlighting) {
+        require.ensure([], () => {
+          var theme = configs.renderingConfig.highlightingTheme || 'default'
+          window.hljs = require('highlight.js')
+          require('highlight.js/styles/' + theme + '.css')
+        }, 'highlight')
+      }
+
       // 实例化编辑器
       this.simplemde = new SimpleMDE(configs)
 
+      // 添加自定义 previewClass
+      this.addPreviewClass()
+
       // 绑定输入事件
       this.simplemde.codemirror.on('change', () => {
         this.$emit('input', this.simplemde.value())
       })
+    },
+    addPreviewClass () {
+      var _class = this.configs.renderingConfig.codeSyntaxHighlighting ? this.previewClass + ' hljs' : this.previewClass
+      var wrapper = this.simplemde.codemirror.getWrapperElement()
+      var preview = document.createElement('div')
+      this.$el.lastChild.className += ' ' + _class
+      preview.className = 'editor-preview ' + _class
+      wrapper.appendChild(preview)
     }
   }
 }
 </script>
+
+<style>
+.markdown-editor .hljs {
+  display: none
+}
+
+.markdown-editor .editor-preview-active, .markdown-editor .editor-preview-active-side {
+  display: block;
+}
+</style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-simplemde",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "description": "SimpleMDE - Markdown Editor component for Vue.js",
   "main": "index.js",
   "scripts": {
@@ -17,6 +17,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "highlight.js": "^9.9.0",
     "simplemde": "^1.11.2"
   },
   "repository": {
