diff --git a/.eslintignore b/.eslintignore
index bdf4165..0469a4a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 dist/
 temp/
-*.min.js
\ No newline at end of file
+*.min.js
+node_modules
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4db6739..1e5f855 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,8 @@ dist
 temp
 !test
 *.tgz
+*.cache.*
 packages/app/main.js
-packages/app/index.html
\ No newline at end of file
+packages/app/index.html
+packages/monaco/index.css
+packages/dev-server/themes/*.json
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 691d6e0..6a2d8de 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,6 +5,7 @@
     "vue"
   ],
   "files.exclude": {
+    "**/*.cache.*": true,
     "**/node_modules": true,
     "**/package-lock.json": true,
     "package.json.lerna_backup": true,
diff --git a/README.md b/README.md
index 460db34..a61ceda 100644
--- a/README.md
+++ b/README.md
@@ -9,33 +9,33 @@ A markup language designed for API manual pages.
 
 ## Packages
 
-- [markletjs](https://github.com/obstudio/Marklet/tree/master/packages/marklet): [![npm](https://img.shields.io/npm/v/markletjs.svg)](https://www.npmjs.com/package/markletjs)
-- [@marklet/cli](https://github.com/obstudio/Marklet/tree/master/packages/cli): [![npm](https://img.shields.io/npm/v/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)
-- [@marklet/core](https://github.com/obstudio/Marklet/tree/master/packages/core): [![npm](https://img.shields.io/npm/v/@marklet/core.svg)](https://www.npmjs.com/package/@marklet/core)
-- [@marklet/dev-server](https://github.com/obstudio/Marklet/tree/master/packages/dev-server): [![npm](https://img.shields.io/npm/v/@marklet/dev-server.svg)](https://www.npmjs.com/package/@marklet/dev-server)
-- [@marklet/monaco](https://github.com/obstudio/Marklet/tree/master/packages/monaco): [![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-- [@marklet/parser](https://github.com/obstudio/Marklet/tree/master/packages/parser): [![npm](https://img.shields.io/npm/v/@marklet/parser.svg)](https://www.npmjs.com/package/@marklet/parser)
-- [@marklet/renderer](https://github.com/obstudio/Marklet/tree/master/packages/renderer): [![npm](https://img.shields.io/npm/v/@marklet/renderer.svg)](https://www.npmjs.com/package/@marklet/renderer)
+| package | version |
+|:-------:|:-------:|
+|[@marklet/cli](https://github.com/obstudio/Marklet/tree/master/packages/cli)|[![npm](https://img.shields.io/npm/v/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)|
+|[@marklet/core](https://github.com/obstudio/Marklet/tree/master/packages/core)|[![npm](https://img.shields.io/npm/v/@marklet/core.svg)](https://www.npmjs.com/package/@marklet/core)|
+|[@marklet/dev-server](https://github.com/obstudio/Marklet/tree/master/packages/dev-server)|[![npm](https://img.shields.io/npm/v/@marklet/dev-server.svg)](https://www.npmjs.com/package/@marklet/dev-server)|
+|[@marklet/parser](https://github.com/obstudio/Marklet/tree/master/packages/parser)|[![npm](https://img.shields.io/npm/v/@marklet/parser.svg)](https://www.npmjs.com/package/@marklet/parser)|
+|[@marklet/renderer](https://github.com/obstudio/Marklet/tree/master/packages/renderer)|[![npm](https://img.shields.io/npm/v/@marklet/renderer.svg)](https://www.npmjs.com/package/@marklet/renderer)|
 
 ## Usage: CLI
 
 ```
-Usage: marklet [filepath|dirpath] [options]
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
 
 Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
 
-  -v, --version                      output the version number
-  -m, --mode [mode]                  Choose between parse, watch and edit mode (default: parse)
-  -s, --source [path]                Read text from file
-  -i, --input [text]                 Read text directly from stdin
-  -d, --dest [path]                  Write parsed data to file instead of stdin
-  -p, --port [port]                  Port for the development server
-  -l, --default-language [language]  Default language in code block
-  -H, --no-header-align              Disable header to align at center
-  -S, --no-section                   Disallow section syntax
-  -h, --help                         output usage information
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
 ```
 
+See details [here](https://github.com/obstudio/Marklet/blob/master/packages/cli/README.md).
+
 ## Usage: Node
 
 ```shell
diff --git a/build/build.js b/build/build.js
index 943fe09..682d6a5 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,11 +1,14 @@
-const util = require('./util')
+const themes = require('../packages/renderer/themes')
 const { minify } = require('html-minifier')
 const program = require('commander')
 const webpack = require('webpack')
 const sfc2js = require('sfc2js')
+const sass = require('node-sass')
+const yaml = require('js-yaml')
+const util = require('./util')
 const fs = require('fs')
 
-sfc2js.install(require('@sfc2js/sass'))
+sfc2js.install(require('@sfc2js/node-sass'))
 sfc2js.install(require('@sfc2js/clean-css'))
 
 function mkdirIfNotExists(name) {
@@ -64,58 +67,119 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
 })
 
 Promise.resolve().then(() => {
-  if (program.renderer) {
-    mkdirIfNotExists('renderer/dist')
-
-    sfc2js.transpile({
-      ...sfc2jsOptions,
-      baseDir: util.resolve('renderer'),
-      outCSSFile: '../dist/marklet.min.css',
-      defaultScript: {
-        props: ['node'],
-      },
-    })
+  if (!program.renderer) return
+  mkdirIfNotExists('renderer/dist')
 
+  let css = ''
+  return sfc2js.transpile({
+    ...sfc2jsOptions,
+    baseDir: util.resolve('renderer'),
+    outCSSFile: '../dist/marklet.min.css',
+    defaultScript: {
+      props: ['node'],
+    },
+  }).then((result) => {
+    if (result.errors.length) throw result.errors.join('\n')
+    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+      const filepath = util.resolve('renderer/themes', key + '.scss')
+      sass.render({
+        data: `.${key}.marklet{${fs.readFileSync(filepath).toString()}}`,
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) {
+          reject(error)
+        } else {
+          css += result.css.toString()
+          resolve()
+        }
+      })
+    })))
+  }).then(() => {
+    fs.writeFileSync(util.resolve('renderer/dist/themes.min.css'), css)
     return bundle('renderer', {
       entry: 'src/index.js',
       output: 'renderer.min.js',
     })
-  }
+  })
 }).then(() => {
-  if (program.server) {
-    mkdirIfNotExists('dev-server/dist')
-  
-    if (program.tsc) {
-      util.exec('tsc -p packages/dev-server')
-    }
+  if (!program.server) return
+  mkdirIfNotExists('dev-server/dist')
+
+  if (program.tsc) {
+    util.exec('tsc -p packages/dev-server')
+  }
 
+  function minifyHTML(type) {
+    const srcPath = util.resolve(`dev-server/src/${type}.html`)
+    const distPath = util.resolve(`dev-server/dist/${type}.html`)
     if (program.prod) {
       fs.writeFileSync(
-        util.resolve('dev-server/dist/index.html'),
-        minify(fs.readFileSync(util.resolve('dev-server/src/index.html')).toString(), {
+        distPath,
+        minify(fs.readFileSync(srcPath).toString(), {
           collapseWhitespace: true,
           removeAttributeQuotes: true,
         })
       )
     } else {
-      fs.copyFileSync(
-        util.resolve('dev-server/src/index.html'),
-        util.resolve('dev-server/dist/index.html')
-      )
+      fs.copyFileSync(srcPath, distPath)
     }
+  }
+
+  minifyHTML('edit')
+  minifyHTML('watch')
+
+  let css = ''
+  themes.forEach(({ key }) => {
+    const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
+    fs.writeFileSync(util.resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
+  })
   
-    sfc2js.transpile({
-      ...sfc2jsOptions,
-      baseDir: util.resolve('dev-server'),
-      outCSSFile: '../dist/client.min.css',
-    })
+  return sfc2js.transpile({
+    ...sfc2jsOptions,
+    useCache: false,
+    baseDir: util.resolve('dev-server'),
+    outCSSFile: '../dist/client.min.css',
+  }).then((result) => {
+    if (result.errors.length) throw result.errors.join('\n')
+    return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
+      const filepath = util.resolve('dev-server/themes/' + key)
+
+      try {
+        const options = yaml.safeLoad(fs.readFileSync(filepath + '.yaml'))
+        fs.writeFileSync(filepath + '.json', JSON.stringify(options))
+      } catch (error) {
+        reject(error)
+      }
 
-    return bundle('dev-server', {
-      entry: 'dist/client.js',
-      output: 'client.min.js',
-      libraryExport: 'Marklet',
+      sass.render({
+        data: `.${key}.marklet{${fs.readFileSync(filepath + '.scss')}}`,
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) {
+          reject(error)
+        } else {
+          css += result.css
+          resolve()
+        }
+      })
+    })))
+  }).then(() => {
+    fs.writeFileSync(util.resolve('dev-server/dist/themes.min.css'), css)
+    return new Promise((resolve, reject) => {
+      sass.render({
+        data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
+        outputStyle: 'compressed',
+      }, (error, result) => {
+        if (error) reject(error)
+        fs.writeFileSync(util.resolve('dev-server/dist/monaco.min.css'), result.css)
+        resolve()
+      })
     })
-  }
+  }).then(() => bundle('dev-server', {
+    entry: 'dist/client.js',
+    output: 'client.min.js',
+    libraryExport: 'Marklet',
+  }))
 }).catch((error) => {
   console.log(error)
 })
diff --git a/package.json b/package.json
index 8578516..8050427 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "scripts": {
-    "start": "npm run build && node packages/cli -m edit",
-    "bootstrap": "lerna bootstrap --hoist --no-ci",
+    "start": "node build/build -r && node packages/cli edit",
+    "bootstrap": "lerna bootstrap --no-ci",
     "build": "tsc -b && node build/build -sr",
     "build:prod": "tsc -b && node build/build -psr",
     "build:renderer": "node build/build -r",
@@ -11,29 +11,30 @@
     "lint": "tslint packages/**/src/*.ts && eslint ."
   },
   "devDependencies": {
-    "@octokit/rest": "^15.13.0",
+    "@octokit/rest": "^15.15.1",
     "@sfc2js/clean-css": "^1.1.1",
-    "@sfc2js/sass": "^1.0.1",
+    "@sfc2js/node-sass": "^2.0.0",
+    "@sfc2js/sass": "^2.0.0",
     "@types/cheerio": "^0.22.9",
     "@types/js-yaml": "^3.11.2",
-    "@types/node": "^10.11.4",
+    "@types/node": "^10.12.0",
     "@types/ws": "^6.0.1",
     "ajv": "^6.5.4",
     "chalk": "^2.4.1",
     "cheerio": "^1.0.0-rc.2",
-    "commander": "^2.18.0",
-    "electron": "^3.0.2",
-    "eslint": "^5.6.1",
+    "commander": "^2.19.0",
+    "electron": "^3.0.5",
+    "eslint": "^5.7.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
     "fast-deep-equal": "^2.0.1",
     "html-minifier": "^3.5.20",
-    "lerna": "^3.4.1",
-    "node-sass": "^4.9.3",
-    "sass": "^1.14.1",
-    "semver": "^5.5.1",
-    "sfc2js": "^3.3.2",
+    "lerna": "^3.4.3",
+    "node-sass": "^4.9.4",
+    "sass": "^1.14.3",
+    "semver": "^5.6.0",
+    "sfc2js": "^4.0.0-beta.1",
     "tslint": "^5.11.0",
-    "typescript": "^3.1.1",
-    "webpack": "^4.20.2"
+    "typescript": "^3.1.3",
+    "webpack": "^4.22.0"
   }
 }
diff --git a/packages/app/build/scss.js b/packages/app/build/scss.js
new file mode 100644
index 0000000..69cca55
--- /dev/null
+++ b/packages/app/build/scss.js
@@ -0,0 +1,38 @@
+const util = require('../../../build/util')
+const sass = require('sass')
+const fs = require('fs')
+
+function load({
+  src,
+  dest = src,
+  selector,
+  base = '',
+  cache = dest,
+  style = 'compressed',
+}) {
+  let cacheData = ''
+  try {
+    cacheData = fs.readFileSync(util.resolve(base, cache + '.cache.scss')).toString()
+  } catch (error) { /**/ }
+
+  const source = fs.readFileSync(util.resolve(base, src + '.scss')).toString()
+  const srcData = selector ? `${selector}{${source}}` : source
+
+  if (srcData === cacheData && fs.existsSync(util.resolve(dest + '.css'))) {
+    return fs.readFileSync(util.resolve(base, dest + '.css')).toString()
+  } else {
+    const destData = sass.renderSync({ data: srcData, outputStyle: style }).css.toString()
+    fs.writeFileSync(util.resolve(base, dest + '.css'), destData)
+    fs.writeFileSync(util.resolve(base, cache + '.cache.scss'), srcData)
+    return destData
+  }
+}
+
+function loadAll(...options) {
+  return options.map(load).join('')
+}
+
+module.exports = {
+  load,
+  loadAll,
+}
diff --git a/packages/app/build/sfc2js.js b/packages/app/build/sfc2js.js
new file mode 100644
index 0000000..e04bee5
--- /dev/null
+++ b/packages/app/build/sfc2js.js
@@ -0,0 +1,26 @@
+const sfc2js = require('sfc2js')
+const sass = require('sass')
+const path = require('path')
+
+sfc2js.install({
+  name: 'sass-plugin',
+  version: '1.0',
+  target: 'style',
+  lang: [
+    'sass',
+    'scss',
+    'css',
+  ],
+  default: {
+    includePaths: [],
+  },
+  updated(options) {
+    const dirPath = path.dirname(options.srcPath)
+    this.options.includePaths.push(dirPath)
+  },
+  render(style) {
+    return sass.renderSync({ ...this.options, data: style.content }).css.toString()
+  },
+})
+
+module.exports = sfc2js
diff --git a/packages/app/build/transpile.js b/packages/app/build/transpile.js
index 80d914e..bf03b7f 100644
--- a/packages/app/build/transpile.js
+++ b/packages/app/build/transpile.js
@@ -1,32 +1,11 @@
 const util = require('../../../build/util')
-const sfc2js = require('sfc2js')
-const sass = require('sass')
-const path = require('path')
+const sfc2js = require('./sfc2js')
+const scss = require('./scss')
+const yaml = require('js-yaml')
 const fs = require('fs')
 
 util.start()
 
-sfc2js.install({
-  name: 'sass-plugin',
-  version: '1.0',
-  target: 'style',
-  lang: [
-    'sass',
-    'scss',
-    'css',
-  ],
-  default: {
-    includePaths: [],
-  },
-  updated(options) {
-    const dirPath = path.dirname(options.srcPath)
-    this.options.includePaths.push(dirPath)
-  },
-  render(style) {
-    return sass.renderSync({ ...this.options, data: style.content }).css.toString()
-  },
-})
-
 module.exports = sfc2js.transpile({
   baseDir: util.resolve(),
   srcDir: 'app/comp',
@@ -34,21 +13,20 @@ module.exports = sfc2js.transpile({
   enterance: util.isElectron() ? 'app.vue' : '',
 })
 
-let indexCache = ''
-try {
-  indexCache = fs.readFileSync(util.resolve('app/temp/index.cache.scss')).toString()
-} catch (error) { /**/ }
-
-const indexData = fs.readFileSync(util.resolve('app/comp/index.scss')).toString()
-
-if (indexData === indexCache && fs.existsSync(util.resolve('app/temp/index.css'))) {
-  module.exports.css += fs.readFileSync(util.resolve('app/temp/index.css')).toString()
-} else {
-  const indexCSS = sass.renderSync({ data: indexData }).css.toString()
-  fs.writeFileSync(util.resolve('app/temp/index.css'), indexCSS)
-  fs.writeFileSync(util.resolve('app/temp/index.cache.scss'), indexCache)
-  module.exports.css += indexCSS
-}
+module.exports.css += scss.loadAll({
+  base: 'renderer',
+  src: 'themes/simple/index',
+  dest: 'dist/simple',
+  selector: '.simple',
+}, {
+  base: 'renderer',
+  src: 'themes/dark/index',
+  dest: 'dist/dark',
+  selector: '.dark',
+}, {
+  base: 'monaco',
+  src: 'index',
+})
 
 if (util.isElectron()) {
   const result = sfc2js.transpile({
@@ -61,6 +39,12 @@ if (util.isElectron()) {
       props: ['node'],
     },
   })
+
+  module.exports.themes = {
+    dark: yaml.safeLoad(fs.readFileSync(util.resolve('renderer/themes/dark/monaco.yaml'))),
+    simple: yaml.safeLoad(fs.readFileSync(util.resolve('renderer/themes/simple/monaco.yaml'))),
+  }
+
   module.exports.css += result.css
   module.exports.plugin = result.app
 }
diff --git a/packages/app/comp/app.vue b/packages/app/comp/app.vue
index 684e3cd..830b1fb 100644
--- a/packages/app/comp/app.vue
+++ b/packages/app/comp/app.vue
@@ -5,10 +5,14 @@ const monacoLoader = require('@marklet/monaco')
 
 Vue.use(monacoLoader)
 
+const themes = ['simple', 'dark']
+
 module.exports = {
   el: '#app',
 
   data: () => ({
+    themeInput: '',
+    theme: 'dark',
     origin: '',
     source: '',
     nodes: [],
@@ -25,7 +29,15 @@ module.exports = {
         this._editor.setModel(this._model)
         this.layout()
       }
-    }
+    },
+    theme(value) {
+      if (window.monaco) {
+        window.monaco.editor.setTheme(value)
+      }
+    },
+    themeInput(value) {
+      if (themes.includes(value)) this.theme = value
+    },
   },
 
   created() {
@@ -35,6 +47,9 @@ module.exports = {
     this._lexer = new DocumentLexer()
 
     monacoLoader.then((monaco) => {
+      themes.forEach((name) => {
+        monaco.editor.defineTheme(name, window.result.themes[name])
+      })
       const model = monaco.editor.createModel(this.source, 'marklet')
       model.onDidChangeContent(() => this.checkChange())
       const nodes = this.nodes
@@ -49,7 +64,7 @@ module.exports = {
     window.vm = this
     
     monacoLoader.then((monaco) => {
-      monaco.editor.setTheme('vs')
+      monaco.editor.setTheme(this.theme)
       this._editor = monaco.editor.create(this.$refs.input, {
         model: null,
         language: 'marklet',
@@ -102,9 +117,12 @@ module.exports = {
 </script>
 
 <template>
-  <div>
+  <div :class="theme">
+    <div class="navbar">
+      <mkl-input v-model="themeInput" placeholder="input theme"/>
+    </div>
     <div class="input" ref="input"/>
-    <mkl-scroll class="output" :margin="4" :radius="6">
+    <mkl-scroll class="document" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
   </div>
@@ -112,9 +130,25 @@ module.exports = {
 
 <style lang="scss" scoped>
 
-> .input, > .output {
+> .navbar {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  box-sizing: border-box;
+  border-bottom: 2px solid;
+
+  .mkl-input {
+    font-size: 14px;
+    padding: 6px 16px;
+    max-width: 200px;
+  }
+}
+
+> .input, > .document {
+  position: absolute;
+  top: 40px;
   bottom: 0;
 }
 
@@ -123,7 +157,7 @@ module.exports = {
   width: 50%;
 }
 
-> .output {
+> .mkl-scroll {
   left: 50%;
   right: 0;
 
diff --git a/packages/app/comp/index.css b/packages/app/comp/index.css
new file mode 100644
index 0000000..c602397
--- /dev/null
+++ b/packages/app/comp/index.css
@@ -0,0 +1,20 @@
+body {
+  overflow: hidden;
+  font-family:
+    "Helvetica Neue",
+    Helvetica,
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "Microsoft YaHei",
+    "微软雅黑",
+    Arial,
+    sans-serif;
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+.no-transition {
+  transition: none !important;
+}
diff --git a/packages/app/index.dev.html b/packages/app/index.dev.html
index 8463489..d7018da 100644
--- a/packages/app/index.dev.html
+++ b/packages/app/index.dev.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Marklet</title>
+    <link href="comp/index.css" rel="stylesheet">
     <script src="../../node_modules/vue/dist/vue.runtime.min.js"></script>
     <!-- TODO: remove in production mode -->
     <script src="http://localhost:8098"></script>
@@ -14,6 +15,7 @@
       const style = document.createElement('style')
       style.innerText = result.css
       document.head.appendChild(style)
+      window.result = result
       Vue.use(result.plugin)
       new Vue(result.app)
     </script>
diff --git a/packages/app/package.json b/packages/app/package.json
index 113f2fc..558d4ca 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/app",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "main": "main.js",
   "author": "shigma <1700011071@pku.edu.cn>",
@@ -17,9 +17,10 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/monaco": "^1.2.1",
+    "@marklet/monaco": "^1.3.0",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
+    "js-yaml": "^3.12.0",
     "neat-scroll": "^2.0.1",
     "vue": "^2.5.17"
   }
diff --git a/packages/cli/README.md b/packages/cli/README.md
index d58cf6b..dc2b1ea 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -6,3 +6,73 @@
 [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@marklet/cli.svg)](https://www.npmjs.com/package/@marklet/cli)
 
 A command line interface for marklet.
+
+```
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
+
+Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
+
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
+```
+
+## General options
+
+### config options
+
+```
+  -l, --language [lang]  default language in codeblocks (default: "")
+  -H, --no-header-align  disable header to align at center
+  -S, --no-section       disallow section syntax
+```
+
+### server options
+
+```
+  -o, --open             open in the default browser
+  -p, --port [port]      port for the development server (default: 10826)
+```
+
+## CLI Commands
+
+### parse
+
+```
+Usage: marklet parse [options] <filepath>
+
+Parse a marklet file into marklet AST.
+
+Options:
+  (support config options)
+  -f, --format [format]  the output format (default: "json")
+```
+
+### edit
+
+```
+Usage: marklet edit [options] [filepath|dirpath]
+
+Edit a marklet file or project.
+
+Options:
+  (support config options)
+  (support server options)
+```
+
+### watch
+
+```
+Usage: marklet watch [options] [filepath|dirpath]
+
+Watch a marklet file or project.
+
+Options:
+  (support config options)
+  (support server options)
+```
diff --git a/packages/cli/commands/build.js b/packages/cli/commands/build.js
new file mode 100644
index 0000000..de3fac8
--- /dev/null
+++ b/packages/cli/commands/build.js
@@ -0,0 +1,11 @@
+module.exports = program => program
+  .command('build [filepath|dirpath]')
+  .description('Build a marklet project into a website.')
+  // .option('-s, --source [path]', 'Read text from file')
+  // .option('-i, --input [text]', 'Read text directly from stdin', '')
+  // .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    console.log(options)
+  })
diff --git a/packages/cli/commands/edit.js b/packages/cli/commands/edit.js
new file mode 100644
index 0000000..49f59dd
--- /dev/null
+++ b/packages/cli/commands/edit.js
@@ -0,0 +1,15 @@
+const open = require('opn')
+const server = require('@marklet/dev-server')
+
+module.exports = program => program
+  .command('edit [filepath|dirpath]')
+  .description('Edit a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath, false)
+    server.edit(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
+  })
diff --git a/packages/cli/commands/parse.js b/packages/cli/commands/parse.js
new file mode 100644
index 0000000..c182286
--- /dev/null
+++ b/packages/cli/commands/parse.js
@@ -0,0 +1,85 @@
+const fs = require('fs')
+const util = require('../util')
+const yaml = require('js-yaml')
+const chalk = require('chalk')
+const parser = require('@marklet/parser')
+
+function printNode(node, indent = 2, back = 1) {
+  const space = ' '.repeat(indent - 2 * back)
+  const prefix = '- '.repeat(back)
+  if (typeof node === 'string') {
+    return console.log(prefix + chalk.yellow(node))
+  } else if (node instanceof Array) {
+    return node.forEach((node, index) => {
+      if (node instanceof Array) {
+        printNode(node, indent + 2, back + 1)
+      } else {
+        process.stdout.write(space + '  '.repeat(index ? back : 1))
+        printNode(node, indent + 2, index ? 1 : back)
+      }
+    })
+  }
+  let firstLine = !node.type
+  if (node.type) {
+    console.log(chalk.greenBright('# ' + node.type))
+  }
+  for (const key in node) {
+    if (key === 'type') continue
+    if (firstLine) {
+      process.stdout.write(prefix)
+      firstLine = false
+    } else {
+      process.stdout.write(space + '  ')
+    }
+    process.stdout.write(chalk`{cyanBright ${key}}: `)
+    if (typeof node[key] === 'string') {
+      console.log(chalk.yellow(node[key]))
+    } else if (typeof node[key] !== 'object') {
+      console.log(chalk.magentaBright(node[key]))
+    } else {
+      process.stdout.write('\n')
+      if (node[key] instanceof Array) {
+        printNode(node[key], indent + 2 * back, 1)
+      } else {
+        process.stdout.write(space + '    ')
+        printNode(node[key], indent + 2 * back - 2, 0)
+      }
+    }
+  }
+}
+
+module.exports = program => program
+  .command('parse [filepath]')
+  .usage('[options] <filepath>')
+  .description('Parse a marklet file into marklet AST.')
+  .allowConfig()
+  .option('-B, --no-bound', 'prevent from recording token bounds')
+  .option('-f, --format [format]', 'set the output format', 'json')
+  .option('-i, --indent [length]', 'set the indent length', 2)
+  .option('-p, --pretty', 'pretty printed (it overrides all other options)')
+  .action(function(filepath = '') {
+    const basePath = util.fullPath(filepath)
+    util.tryFindFile(filepath, true)
+    const indent = this.indent || 2
+    const result = parser.parse({
+      input: fs.readFileSync(basePath).toString(),
+      config: {
+        ...this.getConfig(),
+        require_bound: this.bound && !this.pretty,
+      },
+    })
+    if (this.pretty) {
+      result.forEach(node => printNode(node))
+      return
+    }
+    switch (this.format || 'json') {
+    case 'json':
+      console.log(JSON.stringify(result, null, indent))
+      break
+    case 'yaml':
+      console.log(yaml.safeDump(result, { indent }))
+      break
+    default:
+      util.handleError(this.format + ' is not a supported format.')
+    }
+  })
diff --git a/packages/cli/commands/watch.js b/packages/cli/commands/watch.js
new file mode 100644
index 0000000..66c975a
--- /dev/null
+++ b/packages/cli/commands/watch.js
@@ -0,0 +1,15 @@
+const open = require('opn')
+const server = require('@marklet/dev-server')
+
+module.exports = program => program
+  .command('watch [filepath|dirpath]')
+  .description('Watch a marklet file or project.')
+  .allowPort()
+  .allowConfig()
+  .action(function(filepath = '') {
+    const options = this.getOptions(filepath)
+    server.watch(options)
+    if (this.open) {
+      open(`http://localhost:${options.port || 8080}`)
+    }
+  })
diff --git a/packages/cli/index.js b/packages/cli/index.js
index 74da93d..bfcd197 100644
--- a/packages/cli/index.js
+++ b/packages/cli/index.js
@@ -1,87 +1,21 @@
 #!/usr/bin/env node
 
-const fs = require('fs')
-const path = require('path')
-const chalk = require('chalk')
-const yaml = require('js-yaml')
-const program = require('commander')
-const { parse } = require('@marklet/parser')
-const { edit, watch } = require('@marklet/dev-server')
-const { description, version } = require('./package.json')
-const Marklet = { parse, edit, watch }
+const program = require('./program')
+const pj = require('./package.json')
 
 program
   .name('marklet')
-  .version(version, '-v, --version')
-  .description(description)
-  .usage('marklet [filepath|dirpath] [options]')
-  .option('-m, --mode [mode]', 'Choose between parse, watch and edit mode', /^(parse|watch|edit)$/i, 'parse')
-  .option('-s, --source [path]', 'Read text from file')
-  .option('-i, --input [text]', 'Read text directly from stdin', '')
-  .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
-  .option('-p, --port [port]', 'Port for the development server', parseInt)
-  .option('-l, --default-language [language]', 'Default language in code block', '')
-  .option('-H, --no-header-align', 'Disable header to align at center')
-  .option('-S, --no-section', 'Disallow section syntax')
-  .parse(process.argv)
-
-let basePath
-if (!program.args.length) {
-  basePath = process.cwd()
-} else {
-  basePath = path.resolve(process.cwd(), program.args[0])
-}
-
-function loadFromFile(filepath) {
-  try {
-    if (['.yml', '.yaml'].includes(path.extname(filepath))) {
-      return yaml.safeLoad(fs.readFileSync(filepath).toString())
-    } else {
-      return require(filepath)
-    }
-  } catch (error) {
-    if (program.args.length) {
-      process.stderr.write(chalk.red('ERROR: '))
-      console.error(error)
-    }
-    return {}
-  }
-}
-
-let options = {}
-if (fs.existsSync(basePath)) {
-  const stat = fs.statSync(basePath)
-  if (stat.isFile()) {
-    options = loadFromFile(basePath)
-  } else {
-    options = loadFromFile(path.join(basePath, 'marklet'))
-  }
-}
-
-switch (program.mode) {
-case 'parse': {
-  const result = Marklet.parse({
-    ...options,
-    source: program.source,
-    input: program.input,
-    dest: program.dest,
-    config: {
-      header_align: program.headerAlign,
-      allow_section: program.section,
-      default_language: program.defaultLanguage
-    },
+  .version(pj.version, '-v, --version')
+  .description(pj.description)
+  .on('command:*', (cmd) => {
+    console.error(`error: invalid command '${cmd}'.`)
+    console.log('See --help for a list of available commands.')
+    process.exit(1)
   })
-  if (!program.dest) {
-    console.log(JSON.stringify(result, null, 2))
-  }
-  break
-}
-case 'watch':
-case 'edit': {
-  Marklet[program.mode]({
-    ...options,
-    source: program.source,
-    port: program.port,
-  })
-  break
-}}
+
+program
+  .apply(require('./commands/parse'))
+  .apply(require('./commands/edit'))
+  .apply(require('./commands/watch'))
+  .apply(require('./commands/build'))
+  .parse(process.argv)
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 609cf87..1e639c2 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/cli",
-  "version": "1.1.15",
+  "version": "2.0.1",
   "description": "A command line interface for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -19,10 +19,11 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/dev-server": "^1.0.22",
+    "@marklet/dev-server": "^1.1.2",
     "@marklet/parser": "^1.5.1",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
-    "js-yaml": "^3.12.0"
+    "js-yaml": "^3.12.0",
+    "opn": "^5.4.0"
   }
 }
\ No newline at end of file
diff --git a/packages/cli/program.js b/packages/cli/program.js
new file mode 100644
index 0000000..699b6ef
--- /dev/null
+++ b/packages/cli/program.js
@@ -0,0 +1,96 @@
+const fs = require('fs')
+const path = require('path')
+const yaml = require('js-yaml')
+const util = require('./util')
+const program = require('commander')
+const { DEFAULT_PORT } = require('@marklet/dev-server')
+
+const JS_TYPES = ['.json', '.js']
+const YAML_TYPES = ['.yml', '.yaml']
+const MARK_TYPES = ['.mkl', '.md']
+const ALL_TYPES = [
+  ...JS_TYPES,
+  ...YAML_TYPES,
+]
+
+function loadFromFile(filepath) {
+  const ext = path.extname(filepath)
+  if (YAML_TYPES.includes(ext)) {
+    return yaml.safeLoad(fs.readFileSync(filepath).toString())
+  } else if (JS_TYPES.includes(ext)) {
+    return require(filepath)
+  } else if (ext) {
+    throw new Error(`error: cannot recognize file extension '${ext}'.`)
+  } else {
+    throw new Error('error: cannot recognize file with no extenstion.')
+  }
+}
+
+Object.assign(Object.getPrototypeOf(program), {
+  apply(install) {
+    install(program)
+    return program
+  },
+  allowConfig() {
+    this._allowConfig = true
+    return this
+      .option('-l, --language [lang]', 'default language in codeblocks', '')
+      .option('-H, --no-header-align', 'disable header to align at center')
+      .option('-S, --no-section', 'disallow section syntax')
+  },
+  allowPort() {
+    this._allowPort = true
+    return this
+      .option('-o, --open', 'open in the default browser')
+      .option('-p, --port [port]', 'port for the development server', parseInt, DEFAULT_PORT)
+  },
+  getConfig() {
+    const config = {}
+    if (!this.headerAlign) config.header_align = false
+    if (!this.section) config.allow_section = false
+    if (this.language) config.default_language = this.language
+    return config
+  },
+  getOptions(filepath = '', forced = true) {
+    filepath = path.resolve(filepath)
+    let basePath = path.resolve(process.cwd(), filepath)
+    let options = { sourceType: 'project' }
+    try {
+      util.tryFindFile(filepath)
+      if (fs.statSync(basePath).isFile()) {
+        if (!MARK_TYPES.includes(path.extname(basePath))) {
+          Object.assign(options, loadFromFile(basePath))
+        } else {
+          options.sourceType = 'file'
+        }
+      } else {
+        let matchFound = false
+        basePath = path.join(basePath, 'marklet')
+        for (const type of ALL_TYPES) {
+          const filename = basePath + type
+          if (!fs.existsSync(filename)) continue
+          if (fs.statSync(filename).isFile()) {
+            Object.assign(options, loadFromFile(filename))
+            matchFound = true
+            break
+          }
+        }
+        if (!matchFound && forced) {
+          throw new Error(`no config file was found in ${basePath}.`)
+        }
+      }
+      if (this._allowPort) {
+        if (this.port) options.port = this.port
+      }
+      if (this._allowConfig) {
+        if (!options.config) options.config = {}
+        Object.assign(options.config, this.getConfig())
+      }
+    } catch (error) {
+      util.handleError(error.message)
+    }
+    return options
+  }
+})
+
+module.exports = program
diff --git a/packages/cli/util.js b/packages/cli/util.js
new file mode 100644
index 0000000..2413aa4
--- /dev/null
+++ b/packages/cli/util.js
@@ -0,0 +1,31 @@
+const fs = require('fs')
+const path = require('path')
+const chalk = require('chalk')
+
+function fullPath(filepath) {
+  return path.resolve(process.cwd(), filepath)
+}
+
+function handleError(message) {
+  console.error(chalk.redBright('error:'), message)
+  process.exit(1)
+}
+
+function tryFindFile(filepath, forceFile = false) {
+  const basePath = fullPath(filepath)
+  const isExist = fs.existsSync(basePath)
+  if (isExist && (!forceFile || fs.statSync(basePath).isFile())) return
+  if (!filepath) {
+    handleError('a filepath is required.')
+  } else if (!isExist) {
+    handleError(chalk`file {cyanBright ${filepath}} was not found.`)
+  } else {
+    handleError(chalk`{cyanBright ${filepath}} is not a file.`)
+  }
+}
+
+module.exports = {
+  fullPath,
+  handleError,
+  tryFindFile,
+}
diff --git a/packages/core/src/document.ts b/packages/core/src/document.ts
index 407ee89..e69d591 100644
--- a/packages/core/src/document.ts
+++ b/packages/core/src/document.ts
@@ -54,8 +54,8 @@ export class DocumentLexer extends Lexer<TokenLike[]> {
     this.entrance = options.entrance || 'main'
     this.inlineEntrance = options.inlineEntrance || 'text'
     this.requireBound = !!options.requireBound
-
-    this.macros = new MacroMap(options.macros || {})
+    this.macros = new MacroMap(options.macros || {}, this.config)
+    
     for (const key in contexts) {
       const context = contexts[key]
       if (context instanceof Array) {
diff --git a/packages/core/src/lexer.ts b/packages/core/src/lexer.ts
index 69e9067..eba9603 100644
--- a/packages/core/src/lexer.ts
+++ b/packages/core/src/lexer.ts
@@ -2,7 +2,8 @@ export type StringLike = string | RegExp
 export type TokenLike = string | LexerToken
 
 export type LexerConfig = Record<string, any>
-export type LexerMacros<S extends StringLike = StringLike> = Record<string, S>
+export type LexerMacrosLiteral = Record<string, StringLike>
+export type LexerMacros = LexerMacrosLiteral | ((config: LexerConfig) => LexerMacrosLiteral)
 
 export interface LexerToken {
   type?: string
@@ -71,7 +72,8 @@ export interface LexerRegexRule<
 export class MacroMap {
   private data: Record<string, { regex: RegExp, macro: string }> = {}
 
-  constructor(macros: Record<string, StringLike> = {}) {
+  constructor(macros: LexerMacros = {}, config: LexerConfig = {}) {
+    if (typeof macros === 'function') macros = macros(config)
     for (const key in macros) {
       this.data[key] = {
         regex: new RegExp(`{{${key}}}`, 'g'),
diff --git a/packages/dev-server/.npmignore b/packages/dev-server/.npmignore
deleted file mode 100644
index b19bd72..0000000
--- a/packages/dev-server/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/client.js
-dist/client.d.ts
\ No newline at end of file
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
new file mode 100644
index 0000000..7a7932b
--- /dev/null
+++ b/packages/dev-server/comp/app.vue
@@ -0,0 +1,322 @@
+<script>
+
+const { themes } = require('@marklet/renderer')
+
+const MIN_WIDTH = 0.1
+
+module.exports = {
+  mixins: [
+    require('./menu'),
+    require('./editor'),
+  ],
+
+  data: () => ({
+    theme: 'dark',
+    dragging: false,
+    display: {
+      document: {
+        show: true,
+        width: 0.35,
+      },
+      editor: {
+        show: true,
+        width: 0.35,
+      },
+      explorer: {
+        show: false,
+        width: 0.3,
+      },
+    },
+  }),
+
+  computed: {
+    lists() {
+      return {
+        themes: {
+          data: themes,
+          current: this.theme,
+          switch: 'setTheme',
+          prefix: '主题：',
+        },
+      }
+    },
+    totalWidth() {
+      return this.display.editor.width * this.display.editor.show
+        + this.display.explorer.width * this.display.explorer.show
+        + this.display.document.width * this.display.document.show
+    },
+    totalShow() {
+      return this.display.editor.show
+        + this.display.document.show
+        + this.display.explorer.show
+    },
+    explorerWidth() {
+      return this.display.explorer.width / (
+        this.display.explorer.width
+        + this.display.editor.width * this.display.editor.show
+        + this.display.document.width * this.display.document.show
+      ) * 100 + '%'
+    },
+    explorerStyle() {
+      const width = this.explorerWidth
+      const style = { width }
+      if (this.display.explorer.show) {
+        style.left = '0'
+        style.zIndex = 1
+      } else {
+        style.left = '-' + width
+      }
+      if (!this.totalShow) style.opacity = '0'
+      return style
+    },
+    leftBorderStyle() {
+      const style = {}
+      if (this.display.explorer.show) {
+        style.left = this.totalShow > 1 ? this.explorerWidth : '100%'
+        if (this.totalShow > 1) {
+          style.opacity = 1
+          style.cursor = 'col-resize'
+        }
+      }
+      return style
+    },
+    editorWidth() {
+      return this.display.editor.width / (
+        this.display.editor.width
+        + this.display.document.width * this.display.document.show
+        + this.display.explorer.width * this.display.explorer.show
+      ) * 100 + '%'
+    },
+    editorStyle() {
+      const width = this.editorWidth
+      const style = { width }
+      if (this.display.explorer.show) {
+        if (this.display.document.show) {
+          style.left = this.display.explorer.width * 100 + '%'
+        } else {
+          style.left = this.explorerWidth
+        }
+      } else {
+        style.left = '0'
+      }
+      if (this.display.editor.show) style.zIndex = '1'
+      if (!this.totalShow) style.opacity = '0'
+      return style
+    },
+    rightBorderStyle() {
+      const style = {}
+      if (this.display.document.show) {
+        style.right = this.totalShow > 1 ? this.documentWidth : '100%'
+        if (this.totalShow > 1) {
+          style.opacity = 1
+          style.cursor = 'col-resize'
+        }
+      }
+      return style
+    },
+    documentWidth() {
+      return this.display.document.width / (
+        this.display.document.width
+        + this.display.editor.width * this.display.editor.show
+        + this.display.explorer.width * this.display.explorer.show
+      ) * 100 + '%'
+    },
+    documentStyle() {
+      const width = this.documentWidth
+      const style = { width }
+      if (this.display.document.show) {
+        style.right = '0'
+        style.zIndex = 1
+      } else {
+        style.right = '-' + width
+      }
+      if (!this.totalShow) style.opacity = '0'
+      return style
+    },
+  },
+
+  mounted() {
+    window.vm = this
+
+    addEventListener('resize', () => {
+      this.dragging = true
+      this.layout()
+      this.dragging = null
+    }, { passive: true })
+
+    addEventListener('mouseup', () => {
+      this.layout()
+      this.$refs.left.classList.remove('active')
+      this.$refs.right.classList.remove('active')
+      this.dragging = null
+    }, { passive: true })
+
+    addEventListener('mousemove', (event) => {
+      let left, right
+      if (this.dragging === 'left') {
+        left = 'explorer'
+        if (this.display.editor.show) {
+          right = 'editor'
+        } else if (this.display.document.show) {
+          right = 'document'
+        } else return
+      } else if (this.dragging === 'right') {
+        right = 'document'
+        if (this.display.editor.show) {
+          left = 'editor'
+        } else if (this.display.explorer.show) {
+          left = 'explorer'
+        } else return
+      } else return
+
+      this.layout()
+      event.stopPropagation()
+
+      const baseWidth = innerWidth / this.totalWidth
+      const deltaX = (this.draggingLastX - event.clientX) / baseWidth
+      this.draggingLastX = event.clientX
+      if (this.display[left].width - deltaX < MIN_WIDTH) {
+        this.draggingLastX += (MIN_WIDTH - this.display[left].width + deltaX) * baseWidth
+        this.display[right].width += this.display[left].width - MIN_WIDTH
+        this.display[left].width = MIN_WIDTH
+      } else if (this.display[right].width + deltaX < MIN_WIDTH) {
+        this.draggingLastX -= (MIN_WIDTH - this.display[right].width - deltaX) * baseWidth
+        this.display[left].width -= MIN_WIDTH - this.display[right].width
+        this.display[right].width = MIN_WIDTH
+      } else {
+        this.display[left].width -= deltaX
+        this.display[right].width += deltaX
+      }
+    })
+  },
+
+  methods: {
+    windowOpen(url) {
+      window.open(url)
+    },
+    triggerArea(area) {
+      this.display[area].show = !this.display[area].show
+      if (this.display.editor.show) {
+        this.$nextTick(() => this.layout(300))
+      }
+    },
+    setTheme(theme) {
+      this.theme = theme
+      if (window.monaco) {
+        window.monaco.editor.setTheme(theme)
+      }
+    },
+    startDrag(position, event) {
+      this.hideContextMenus()
+      this.dragging = position
+      this.$refs[position].classList.add('active')
+      this.draggingLastX = event.clientX
+    },
+  }
+}
+
+</script>
+
+<template>
+  <div :class="[theme, { dragging }]" class="marklet"
+    @click="hideContextMenus" @contextmenu="hideContextMenus">
+    <div class="menubar">
+      <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
+        @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
+        :class="{ active: menuData.menubar.embed[index] }" @contextmenu.stop>
+        {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
+      </div>
+    </div>
+    <div class="view explorer" :style="explorerStyle"/>
+    <div class="border left" ref="left" :style="leftBorderStyle"
+      @mousedown.stop="startDrag('left', $event)"/>
+    <div class="view editor" ref="editor" :style="editorStyle"/>
+    <div class="border right" ref="right" :style="rightBorderStyle"
+      @mousedown.stop="startDrag('right', $event)"/>
+    <mkl-scroll class="view document" :style="documentStyle" :margin="4" :radius="6">
+      <mkl-nodes ref="nodes" :content="nodes"/>
+    </mkl-scroll>
+    <marklet-menu ref="menus" :data="menuData"/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  position: absolute;
+}
+
+> .menubar {
+  overflow: hidden;
+  font-size: 14px;
+  left: 0;
+  height: 32px;
+  width: 100%;
+  float: left;
+  z-index: 11;
+  user-select: none;
+  position: relative;
+
+  .item {
+    line-height: 24px;
+    padding: 4px;
+    transition:
+      color 0.3s ease,
+      background-color 0.3s ease;
+    display: inline-block;
+  }
+}
+
+> .view, > .border {
+  position: absolute;
+  top: 32px;
+  bottom: 0;
+  z-index: 0;
+  height: auto;
+  transition:
+    left 0.3s ease,
+    right 0.3s ease,
+    width 0.3s ease,
+    opacity 0.3s ease;
+}
+
+> .view {
+  opacity: 1;
+}
+
+&.dragging {
+  > .view, > .border {
+    transition: none !important;
+  }
+}
+
+> .border {
+  width: 2px;
+  z-index: 2;
+  opacity: 0;
+  user-select: none;
+  transition: 0.3s ease;
+
+  &.left {
+    left: 0;
+    margin-left: -1px;
+  }
+
+  &.right {
+    right: 0;
+    margin-right: -1px;
+  }
+}
+
+> .document {
+  > .container {
+    padding: 0 24px;
+  }
+}
+
+</style>
diff --git a/packages/dev-server/comp/checkbox.vue b/packages/dev-server/comp/checkbox.vue
new file mode 100644
index 0000000..1bb74d2
--- /dev/null
+++ b/packages/dev-server/comp/checkbox.vue
@@ -0,0 +1,111 @@
+<script>
+
+module.exports = {
+  props: {
+    value: Boolean,
+    label: String,
+    disabled: Boolean,
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  data: () => ({
+    focused: false,
+  }),
+
+  methods: {
+    onFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    onBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+    },
+  },
+}
+
+</script>
+
+<template>
+  <label class="marklet-checkbox" :class="{ focused, disabled, checked: value }">
+    <span class="box">
+      <span class="inner"></span>
+      <input type="checkbox" :disabled="disabled" :value="label" v-model="value"
+        @change="$emit('change', $event.target.checked)" @focus="onFocus" @blur="onBlur">
+    </span>
+    <span class="label" v-if="$slots.default || label">
+      <slot/>
+      <template v-if="!$slots.default">{{ label }}</template>
+    </span>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  display: inline-block;
+  transition: 0.3s ease;
+  line-height: 1em;
+
+  > .box {
+    outline: 0;
+    line-height: 1em;
+    vertical-align: sub;
+
+    > .inner {
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      transition: 0.3s ease;
+      border: 0.07em solid;
+      border-radius: 2px;
+      width: 1em;
+      height: 1em;
+    }
+
+    > .inner::after {
+      content: "";
+      box-sizing: content-box;
+      border: 0.07em solid;
+      border-left: 0;
+      border-top: 0;
+      height: 0.5em;
+      left: 0.29em;
+      top: 0.08em;
+      width: 0.21em;
+      position: absolute;
+      transform: rotate(45deg) scaleY(0);
+      transition: transform .15s ease-in .05s;
+      transform-origin: center;
+    }
+
+    > input {
+      position: absolute;
+      opacity: 0;
+      outline: 0;
+      margin: 0;
+      width: 0;
+      height: 0;
+      z-index: -1;
+    }
+  }
+
+  > .label {
+    line-height: 1em;
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
+  &.checked > .box > .inner::after {
+    transform: rotate(45deg) scaleY(1);
+  }
+}
+
+</style>
diff --git a/packages/dev-server/comp/edit.vue b/packages/dev-server/comp/edit.vue
deleted file mode 100644
index 8fe1e49..0000000
--- a/packages/dev-server/comp/edit.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-
-module.exports = {
-  data: () => ({
-    source: '',
-    nodes: [],
-  }),
-  watch: {
-    source(value) {
-      this.nodes = window.Marklet.parse(value)
-    }
-  },
-}
-
-</script>
-
-<template>
-  <div>
-    <textarea v-model="source"/>
-    <mkl-nodes :content="nodes"/>
-  </div>
-</template>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
new file mode 100644
index 0000000..2dc2aa2
--- /dev/null
+++ b/packages/dev-server/comp/editor.js
@@ -0,0 +1,130 @@
+const { DocumentLexer, defaultConfig } = require('@marklet/parser')
+
+module.exports = {
+  data: () => ({
+    nodes: [],
+    origin: '',
+    source: '',
+    loading: 1,
+    changed: false,
+    config: defaultConfig,
+  }),
+
+  watch: {
+    source(value) {
+      this.nodes = this._lexer.parse(value)
+    },
+    config: {
+      deep: true,
+      handler(value) {
+        this._lexer = new DocumentLexer(value)
+        this.nodes = this._lexer.parse(this.source)
+      },
+    },
+    loading(value) {
+      if (!value) {
+        this._editor.setModel(this._model)
+        this.$nextTick(() => this.layout())
+      }
+    },
+  },
+
+  created() {
+    this._lexer = new DocumentLexer(defaultConfig)
+
+    const source = localStorage.getItem('source')
+    if (typeof source === 'string') this.source = source
+
+    this.$eventBus.$on('server.config', (config) => {
+      this.config = Object.assign(defaultConfig, config)
+    })
+  },
+
+  mounted() {
+    this.$eventBus.$on('server.document', (doc) => {
+      this.openFile(doc)
+    })
+
+    this.$eventBus.$on('monaco.theme.loaded', (monaco) => {
+      monaco.editor.setTheme(this.theme)
+    })
+
+    this.$eventBus.$on('monaco.loaded', (monaco) => {
+      const model = monaco.editor.createModel(this.source, 'marklet')
+      model.onDidChangeContent(() => this.checkChange())
+      const nodes = this.nodes
+      this.nodes = []
+      this.$nextTick(() => this.nodes = nodes)
+      this._model = model
+
+      if (this._editor) return
+      this._editor = monaco.editor.create(this.$refs.editor, {
+        model: null,
+        language: 'marklet',
+        lineDecorationsWidth: 4,
+        scrollBeyondLastLine: false,
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 22,
+          verticalSliderSize: 12,
+        },
+      })
+      this._editor.onDidChangeCursorPosition((event) => {
+        this.row = event.position.lineNumber
+        this.column = event.position.column
+      })
+      this.loading = 0
+    })
+
+    addEventListener('beforeunload', () => {
+      localStorage.setItem('source', this.source)
+    })
+  },
+
+  methods: {
+    openFile(doc) {
+      if (this.loading) {
+        this.source = doc
+      } else {
+        this._model.setValue(doc)
+      }
+    },
+    save() {
+      this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
+    },
+    saveAs() {
+      this.$eventBus.$emit('client.message', 'saveAs', {
+        source: this.source,
+        name: '' // TODO: read file name
+      })
+    },
+    saveAll() {
+      // TODO: unclear requirement
+    },
+    checkChange(data) {
+      if (data !== undefined) this.origin = data
+      this.source = this._model.getValue()
+      this.changed = this.origin !== this.source
+    },
+    layout(deltaTime = 0) {
+      const now = performance.now(), self = this
+      this._editor._configuration.observeReferenceElement()
+      this._editor._view._actualRender()
+      if (!deltaTime) return
+      requestAnimationFrame(function layout(newTime) {
+        self._editor._configuration.observeReferenceElement()
+        self._editor._view._actualRender()
+        if (newTime - now < deltaTime) requestAnimationFrame(layout)
+      })
+    },
+    executeAction(id) {
+      if (!this._editor) return
+      const action = this._editor.getAction(id)
+      if (action) action.run(this._editor)
+    },
+    executeTrigger(id) {
+      if (!this._editor) return
+      this._editor.trigger(id, id)
+    },
+  }
+}
diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/menu/command.json
new file mode 100644
index 0000000..04bf83c
--- /dev/null
+++ b/packages/dev-server/comp/menu/command.json
@@ -0,0 +1,112 @@
+[
+  {
+    "method": "openFile",
+    "bind": "ctrl+o",
+    "name": "打开 ..."
+  },
+  {
+    "method": "save",
+    "bind": "ctrl+s",
+    "name": "保存"
+  },
+  {
+    "method": "saveAs",
+    "bind": "ctrl+shift+s",
+    "name": "另存为 ..."
+  },
+  {
+    "method": "saveAll",
+    "bind": "ctrl+a",
+    "name": "全部保存"
+  },
+  {
+    "method": "triggerArea",
+    "arguments": "explorer",
+    "key": "trigger-explorer",
+    "name": "资源管理器",
+    "checked": "$display.explorer.show"
+  },
+  {
+    "method": "triggerArea",
+    "arguments": "editor",
+    "key": "trigger-editor",
+    "name": "编辑器视图",
+    "checked": "$display.editor.show"
+  },
+  {
+    "method": "triggerArea",
+    "arguments": "document",
+    "key": "trigger-document",
+    "name": "预览视图",
+    "checked": "$display.document.show"
+  },
+  {
+    "method": "windowOpen",
+    "arguments": "https://github.com/obstudio/Marklet",
+    "key": "open-repository",
+    "name": "源代码仓库"
+  },
+  {
+    "method": "executeTrigger",
+    "arguments": "undo",
+    "key": "undo",
+    "bind": "!ctrl+z",
+    "name": "撤销"
+  },
+  {
+    "method": "executeTrigger",
+    "arguments": "redo",
+    "key": "redo",
+    "bind": "!ctrl+y",
+    "name": "恢复"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardCutAction",
+    "key": "cut",
+    "bind": "!ctrl+x",
+    "name": "剪切"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardCopyAction",
+    "key": "copy",
+    "bind": "!ctrl+c",
+    "name": "复制"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.clipboardPasteAction",
+    "key": "paste",
+    "bind": "!ctrl+v",
+    "name": "粘贴"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.quickCommand",
+    "key": "command-palette",
+    "bind": "!f1",
+    "name": "命令面板"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "actions.find",
+    "key": "find",
+    "bind": "!ctrl+f",
+    "name": "查找"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.nextMatchFindAction",
+    "key": "find-next",
+    "bind": "!f3",
+    "name": "查找下一个"
+  },
+  {
+    "method": "executeAction",
+    "arguments": "editor.action.previoustMatchFindAction",
+    "key": "find-previous",
+    "bind": "!shift+f3",
+    "name": "查找上一个"
+  }
+]
\ No newline at end of file
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
new file mode 100644
index 0000000..9fe9b7a
--- /dev/null
+++ b/packages/dev-server/comp/menu/index.js
@@ -0,0 +1,157 @@
+const Mousetrap = require('mousetrap')
+
+// TODO: improve this pattern maybe. 
+// Cause: firing event inside textarea is blocked by mousetrap by default.
+Mousetrap.prototype.stopCallback = () => false
+
+function toKebab(camel) {
+  return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
+}
+
+const commands = {}
+for (const command of require('./command.json')) {
+  const key = command.key ? command.key : toKebab(command.method)
+  commands[key] = command
+}
+
+const menus = require('./menus.json')
+const menuData = {}
+const menuKeys = Object.keys(menus)
+for (const key of menuKeys) {
+  menuData[key] = {
+    show: false,
+    content: menus[key],
+    embed: new Array(menus[key].length).fill(false)
+  }
+}
+
+module.exports = {
+  components: {
+    MarkletMenu: require('./menu-manager.vue'),
+  },
+
+  data() {
+    return {
+      menuData,
+      menubarMove: 0,
+      menubarActive: false,
+      altKey: false,
+    }
+  },
+
+  provide() {
+    return {
+      menuKeys,
+      commands,
+      $menu: this,
+    }
+  },
+
+  mounted() {
+    for (const key in commands) {
+      const command = commands[key]
+      if (!command.bind || command.bind.startsWith('!')) continue
+      Mousetrap.bind(command.bind, () => {
+        this.executeCommand(command)
+        return false
+      })
+    }
+    this.menuReference = {}
+    for (let index = 0; index < menuKeys.length; index++) {
+      this.menuReference[menuKeys[index]] = this.$refs.menus.$el.children[index]
+    }
+  },
+
+  methods: {
+    executeMethod(key, ...args) {
+      const method = this[key]
+      if (method instanceof Function) method(...args)
+    },
+    executeCommand(command) {
+      const method = this[command.method]
+      if (!(method instanceof Function)) {
+        console.error(`No method ${command.method} was found!`)
+        return
+      }
+      let args = command.arguments
+      if (args === undefined) args = []
+      if (!(args instanceof Array)) args = [args]
+      method(...args.map(arg => this.parseArgument(arg)))
+    },
+    parseArgument(arg) {
+      if (typeof arg === 'string' && arg.startsWith('$')) {
+        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this)
+      } else {
+        return arg
+      }
+    },
+    hideContextMenus() {
+      this.menubarActive = false
+      for (const key in this.menuData) {
+        this.menuData[key].show = false
+        for (let index = 0; index < this.menuData[key].embed.length; index++) {
+          this.menuData[key].embed.splice(index, 1, false)
+        }
+      }
+    },
+    showContextMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateMenuAtClient(event, style)
+      this.menuData[key].show = true
+    },
+    locateMenuAtClient(event, style) {
+      if (event.clientX + 200 > this.width) {
+        style.left = event.clientX - 200 - this.left + 'px'
+      } else {
+        style.left = event.clientX - this.left + 'px'
+      }
+      if (event.clientY - this.top > this.height / 2) {
+        style.top = ''
+        style.bottom = this.top + this.height - event.clientY + 'px'
+      } else {
+        style.top = event.clientY - this.top + 'px'
+        style.bottom = ''
+      }
+    },
+    hoverMenu(index, event) {
+      if (this.menubarActive && !this.menuData.menubar.embed[index]) {
+        this.showMenu(index, event)
+      }
+    },
+    showButtonMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateMenuAtButton(event, style)
+      this.menuData[key].show = true
+    },
+    showMenu(index, event) {
+      const style = this.menuReference.menubar.style
+      const last = this.menuData.menubar.embed.indexOf(true)
+      if (last === index) {
+        this.menubarActive = false
+        this.menuData.menubar.show = false
+        this.menuData.menubar.embed.splice(index, 1, false)
+        return
+      } else if (last === -1) {
+        this.menubarMove = 0
+      } else {
+        this.menubarMove = index - last
+      }
+      this.hideContextMenus()
+      this.locateMenuAtButton(event, style)
+      this.menubarActive = true
+      this.menuData.menubar.show = true
+      this.menuData.menubar.embed.splice(index, 1, true)
+    },
+    locateMenuAtButton(event, style) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      if (rect.left + 200 > this.width) {
+        style.left = rect.left + rect.width - 200 + 'px'
+      } else {
+        style.left = rect.left + 'px'
+      }
+      style.top = rect.top + rect.height + 'px'
+    },
+  },
+}
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
new file mode 100644
index 0000000..2305989
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -0,0 +1,51 @@
+<script>
+
+module.exports = {
+  inject: ['$menu'],
+  props: ['command'],
+
+  computed: {
+    disabled() {
+      if (!this.command.enabled) return
+      return !this.$menu.parseArgument(this.command.enabled)
+    },
+    binding() {
+      let binding = this.command.bind
+      if (!binding) return ''
+      if (binding.charAt(0) === '!') binding = binding.slice(1)
+      return binding.replace(/[a-z]+/g, word => {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      }).replace(/ /g, ', ')
+    },
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return
+      this.$menu.executeCommand(this.command)
+    }
+  },
+}
+
+</script>
+
+<template>
+  <div :class="['menu-item', { disabled }]" @click="handleClick">
+    <span class="label">{{ command.name }}</span>
+    <span class="binding">
+      <mkl-checkbox v-if="command.checked !== undefined"
+        :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
+      <template v-else>{{ binding }}</template>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+> .binding {
+  .marklet-checkbox {
+    font-size: 12px;
+  }
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu/menu-list.vue b/packages/dev-server/comp/menu/menu-list.vue
new file mode 100644
index 0000000..2abfeff
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-list.vue
@@ -0,0 +1,26 @@
+<script>
+
+module.exports = {
+  inject: ['$menu'],
+  props: ['list'],
+}
+
+</script>
+
+<template>
+  <transition-group name="marklet-menu-list">
+    <div v-for="(item, index) in list.data" :key="index"
+      :class="['menu-item', { active: item.key === list.current }]"
+      @click="$menu.executeMethod(list.switch, item.key)">
+      <span class="label">{{ list.prefix }}{{ item.name }}{{ list.postfix }}</span>
+    </div>
+  </transition-group>
+</template>
+
+<style lang="scss" scoped>
+
+.label {
+  &.active { font-weight: bold }
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/menu-manager.vue
new file mode 100644
index 0000000..0d3c409
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-manager.vue
@@ -0,0 +1,58 @@
+<script>
+
+module.exports = {
+  props: ['data'],
+  inject: ['menuKeys'],
+  components: {
+    MarkletMenuView: require('./menu-view.vue'),
+  },
+}
+
+</script>
+
+<template>
+  <div class="marklet-menu-manager">
+    <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
+      <marklet-menu-view class="marklet-menu" v-show="data[key].show"
+        :data="data[key].content" :embed="data[key].embed"/>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+}
+
+.marklet-menu {
+  z-index: 10;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: none;
+  padding: 2px 0;
+  position: absolute;
+  transition: 0.3s ease;
+}
+
+.marklet-menu-enter-active,
+.marklet-menu-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transform-origin: center top;
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.marklet-menu-enter,
+.marklet-menu-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
new file mode 100644
index 0000000..6ce7275
--- /dev/null
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -0,0 +1,76 @@
+<script>
+
+module.exports = {
+  name: 'marklet-menu-view',
+  inject: ['commands', '$menu'],
+  props: ['data', 'embed'],
+  components: {
+    MarkletMenuList: require('./menu-list.vue'),
+    MarkletMenuItem: require('./menu-item.vue'),
+  },
+}
+
+</script>
+
+<template>
+  <div>
+    <template v-for="(item, index) in data">
+      <template v-if="(item instanceof Object)">
+        <marklet-menu-view :key="index" v-show="embed[index]" :data="item.content"/>
+      </template>
+      <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
+        <div class="separator"/>
+      </div>
+      <marklet-menu-item :key="index" v-else-if="!item.startsWith('@')" :command="commands[item]"/>
+      <marklet-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  min-width: 200px;
+  user-select: none;
+}
+
+.menu-item {
+  padding: 0;
+  display: flex;
+  cursor: pointer;
+  font-size: 12px;
+
+  > .separator {
+    margin: 0.3em 0.5em;
+    padding: 1px 0 0 0;
+    border-bottom: 1px solid;
+    width: 100%;
+  }
+
+  > .caption {
+    font-size: 12px;
+    margin: 0.4em auto 0.2em;
+  }
+
+  > .label {
+    flex: 1 1 auto;
+    padding: 0.8em 1em;
+    line-height: 1.1em;
+    background: none;
+    display: inline-block;
+    margin: 0;
+  }
+
+  > .binding {
+    display: inline-block;
+    flex: 2 1 auto;
+    padding: 0.8em 1em;
+    line-height: 1.1em;
+    text-align: right;
+  }
+
+  &.disabled { cursor: default }
+}
+
+</style>
+
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
new file mode 100644
index 0000000..f27d715
--- /dev/null
+++ b/packages/dev-server/comp/menu/menus.json
@@ -0,0 +1,53 @@
+{
+  "menubar": [
+    {
+      "key": "file",
+      "name": "文件",
+      "bind": "F",
+      "content": [
+        "open-file",
+        "@separator",
+        "save",
+        "save-as",
+        "save-all"
+      ]
+    },
+    {
+      "key": "edit",
+      "name": "编辑",
+      "bind": "E",
+      "content": [
+        "undo",
+        "redo",
+        "@separator",
+        "cut",
+        "copy",
+        "paste",
+        "@separator",
+        "find",
+        "find-next",
+        "find-previous"
+      ]
+    },
+    {
+      "key": "view",
+      "name": "视图",
+      "bind": "V",
+      "content": [
+        "trigger-explorer",
+        "trigger-editor",
+        "trigger-document",
+        "@separator",
+        "@themes"
+      ]
+    },
+    {
+      "key": "link",
+      "name": "链接",
+      "bind": "L",
+      "content": [
+        "open-repository"
+      ]
+    }
+  ]
+}
diff --git a/packages/dev-server/comp/watch.vue b/packages/dev-server/comp/watch.vue
deleted file mode 100644
index 2ddfe7b..0000000
--- a/packages/dev-server/comp/watch.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-
-module.exports = {
-  data: () => ({
-    nodes: []
-  }),
-  created() {
-    this.$eventBus.$on('server.message.document', (data) => {
-      this.nodes = window.Marklet.parse(data)
-    })
-  }
-}
-
-</script>
-
-<template>
-  <div>
-    <mkl-nodes :content="nodes"/>
-  </div>
-</template>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index a0e9c11..e4b48cd 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/dev-server",
-  "version": "1.0.22",
+  "version": "1.1.2",
   "description": "A develop server for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -11,7 +11,12 @@
   "main": "dist/server.js",
   "typings": "dist/server.d.ts",
   "files": [
-    "dist"
+    "dist/server.js",
+    "dist/server.d.ts",
+    "dist/client.min.js",
+    "dist/client.min.css",
+    "dist/themes.min.css",
+    "dist/monaco.min.css"
   ],
   "repository": {
     "type": "git",
@@ -23,6 +28,8 @@
   "dependencies": {
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1",
+    "monaco-editor": "^0.14.3",
+    "mousetrap": "^1.6.2",
     "vue": "^2.5.17",
     "ws": "^6.0.0"
   }
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 169cdd6..82c9ff6 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -1,41 +1,66 @@
-import Vue from 'vue'
+import VueConstructor from 'vue'
+import Monaco from 'monaco-editor'
 import * as renderer from '@marklet/renderer'
-import { DocumentLexer, LexerConfig } from '@marklet/parser'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    $eventBus: Vue
-  }
+declare global {
+  export const Vue: typeof VueConstructor
 }
 
+Vue.use(renderer)
+Vue.component('mkl-checkbox', require('@/checkbox.vue'))
+
 const eventBus = new Vue()
 Vue.prototype.$eventBus = eventBus
-Vue.use(renderer)
 
-const client = new class WatchClient {
+eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
+  monaco.editor.defineTheme('dark', require('../themes/dark'))
+  monaco.editor.defineTheme('simple', require('../themes/simple'))
+  eventBus.$emit('monaco.theme.loaded', monaco)
+})
+
+const client = new class MarkletClient {
   private url: string
   private retry: boolean
-  private timeout: number
+  private _timeout: number
+  private _interval: number
   private ws: WebSocket
+  private msgQueue: string[]
+  private timerRef: number
 
   constructor({
     url = `ws://${location.host}/`,
     retry = true,
-    timeout = 5000
+    timeout = 5000,
+    interval = 1000,
   } = {}) {
     this.url = url
     this.retry = retry
-    this.timeout = timeout
-
+    this._timeout = timeout
+    this.msgQueue = []
     this.createWebSocket()
+    this.interval = interval
+  }
+
+  get interval() {
+    return this._interval
+  }
+
+  set interval(value: number) {
+    this._interval = value
+    window.clearInterval(this.timerRef)
+    this.timerRef = window.setInterval(() => {
+      while (this.msgQueue.length > 0 && this.ws.readyState === 1) {
+        this.ws.send(this.msgQueue.shift())
+      }
+    }, this._interval)
   }
 
   createWebSocket() {
     this.ws = new WebSocket(this.url)
-    this.ws.addEventListener('close', (e) => {
-      if (e.code !== 1000 && this.retry) {
+    this.ws.addEventListener('close', (event) => {
+      if (event.code !== 1000 && this.retry) {
         eventBus.$emit('ws.reconnect')
-        setTimeout(() => this.createWebSocket(), this.timeout)
+        setTimeout(() => this.createWebSocket(), this._timeout)
       } else {
         eventBus.$emit('ws.close')
       }
@@ -43,37 +68,39 @@ const client = new class WatchClient {
     this.ws.addEventListener('error', () => {
       eventBus.$emit('ws.error')
     })
-    this.ws.addEventListener('message', e => {
+    this.ws.addEventListener('message', (event) => {
       try {
-        const { type, data } = JSON.parse(e.data)
-        eventBus.$emit('server.message', type, data)
-        eventBus.$emit('server.message.' + type, data)
+        const { type, data } = JSON.parse(event.data)
+        eventBus.$emit('server.' + type, data)
       } catch (error) {
-        eventBus.$emit('server.error')
+        eventBus.$emit('server.error', error)
       }
     })
     this.ws.addEventListener('open', () => {
       eventBus.$emit('ws.open')
     })
+    eventBus.$on('client.message', (type: string, data: string | Object) => {
+      this.msgQueue.push(JSON.stringify({ type, data }))
+    })
   }
 
-  close() {
+  dispose() {
     if (this.ws.readyState < 2) this.ws.close()
+    clearInterval(this.timerRef)
   }
 }()
 
-addEventListener('beforeunload', () => client.close())
+addEventListener('beforeunload', () => client.dispose())
+
+const typeMap = {
+  edit: '编辑',
+  watch: '监视',
+}
 
 export const Marklet = {
-  components: {
-    watch: require('@/watch.vue'),
-    edit: require('@/edit.vue'),
-  },
-  parse(source: string, config: LexerConfig) {
-    return new DocumentLexer(config).parse(source)
-  },
-  start({ el, type }: { el: string | HTMLElement, type: 'watch' | 'edit' }) {
-    document.title = 'Marklet - ' + type
-    new Vue(this.components[type]).$mount(el)
+  app: require('@/app.vue'),
+  start(type: keyof typeof typeMap) {
+    document.title = 'Marklet - ' + typeMap[type]
+    return new Vue(this.app)
   }
 }
diff --git a/packages/dev-server/src/edit.html b/packages/dev-server/src/edit.html
new file mode 100644
index 0000000..350a7f8
--- /dev/null
+++ b/packages/dev-server/src/edit.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Marklet</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
+    <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
+    <script src="~/vue/dist/vue.runtime.min.js"></script>
+    <link href="client.min.css" rel="stylesheet">
+    <link href="themes.min.css" rel="stylesheet">
+    <link href="monaco.min.css" rel="stylesheet">
+    <script src="client.min.js"></script>
+    <script src="~/monaco-editor/min/vs/loader.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      Marklet.start('edit').$mount('#app')
+      require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
+      require(['vs/editor/editor.main'], () => {
+        Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
+        if (!Vue.prototype.$colorize) {
+          Vue.prototype.$colorize = (code, lang) => monaco.editor.colorize(code, lang)
+        }
+      })
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
deleted file mode 100644
index acb3782..0000000
--- a/packages/dev-server/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Marklet</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <link href="@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
-    <link href="client.min.css" rel="stylesheet">
-    <script src="client.min.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="start"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/dev-server/src/language.ts b/packages/dev-server/src/language.ts
new file mode 100644
index 0000000..4f2cdac
--- /dev/null
+++ b/packages/dev-server/src/language.ts
@@ -0,0 +1,22 @@
+import { LexerConfig } from '@marklet/parser'
+import Monaco from 'monaco-editor'
+
+export default function(config: LexerConfig = {}) {
+  const language: Monaco.languages.IMonarchLanguage = {
+    tokenizer: {
+      root: [
+        { include: 'topLevel' },
+      ],
+      topLevel: [
+        {
+          regex: /(#{1,4}) +([^\n]+?)( +#)?/,
+          action: {
+            token: 'heading'
+          }
+        }
+      ],
+    },
+  }
+
+  return language
+}
diff --git a/packages/app/comp/index.scss b/packages/dev-server/src/monaco.scss
similarity index 61%
rename from packages/app/comp/index.scss
rename to packages/dev-server/src/monaco.scss
index ef3896f..047ae73 100644
--- a/packages/app/comp/index.scss
+++ b/packages/dev-server/src/monaco.scss
@@ -1,22 +1,8 @@
-body {
-  overflow: hidden;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-}
-
-.no-transition {
-  transition: none !important;
-}
-
 .monaco-editor {
+  .decorationsOverviewRuler {
+    display: none;
+  }
+  
   .monaco-scrollable-element {
     > .scrollbar {
       transition: opacity 0.3s ease;
@@ -25,7 +11,7 @@ body {
         opacity: 0.5;
         cursor: pointer;
         border-radius: 6px;
-        background-color: #c0c4cc;
+        background-color: #606266 !important;
         transition: opacity 0.3s ease;
 
         &:hover {
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index cd365c8..7bf48c2 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -1,8 +1,12 @@
-import { Server as WSServer, OPEN as WSOPEN } from 'ws'
 import * as path from 'path'
 import * as http from 'http'
 import * as url from 'url'
 import * as fs from 'fs'
+import ws from 'ws'
+
+import { LexerConfig } from '@marklet/parser'
+
+export const DEFAULT_PORT = 10826
 
 declare module 'ws' {
   interface Server {
@@ -10,14 +14,18 @@ declare module 'ws' {
   }
 }
 
-WSServer.prototype.broadcast = function (data) {
+ws.Server.prototype.broadcast = function (data) {
   this.clients.forEach((client) => {
-    if (client.readyState === WSOPEN) {
+    if (client.readyState === ws.OPEN) {
       client.send(data)
     }
   })
 }
 
+function sendMsg(this: ws, type: string, data: object) {
+  this.send(JSON.stringify({ type, data }))
+}
+
 function toDocMessage(filename: string) {
   return JSON.stringify({
     type: 'document',
@@ -25,78 +33,97 @@ function toDocMessage(filename: string) {
   })
 }
 
-function createServer(type: 'edit' | 'watch') {
-  const httpServer = http.createServer((request, response) => {
-    let pathname = url.parse(request.url).pathname.slice(1)
-    if (!pathname) {
-      pathname = 'index.html'
-    } else if (pathname.startsWith('@marklet')) {
-      pathname = '../node_modules/' + pathname
-    } else if (pathname === 'start') {
-      response.writeHead(200, { 'Content-Type': 'text/javascript' })
-      response.write(`Marklet.start({ el: '#app', type: '${type}' })`)
-      response.end()
-      return
-    }
-    fs.readFile(path.join(__dirname, pathname), (error, data) => {
-      if (error) {
-        console.log(error)
+export type ServerType = 'watch' | 'edit'
+
+interface ServerOptions {
+  port?: number
+  config?: LexerConfig
+}
+
+class MarkletServer<T extends ServerType> {
+  type: T
+  port: number
+  wsServer: ws.Server
+  httpServer: http.Server
+
+  constructor(type: T, options: ServerOptions = {}) {
+    this.type = type
+    this.port = options.port || DEFAULT_PORT
+
+    this.httpServer = http.createServer((request, response) => {
+      function handleError(error: Error) {
+        console.error(error)
         response.writeHead(404, { 'Content-Type': 'text/html' })
+        response.end()
+      }
+      
+      function handleData(data: any, type: string) {
+        response.writeHead(200, { 'Content-Type': type })
+        response.write(data)
+        response.end()
+      }
+      
+      let pathname = url.parse(request.url).pathname.slice(1)
+      let filepath: string
+      if (pathname.startsWith('~/')) {
+        try {
+          filepath = require.resolve(pathname.slice(2))
+        } catch (error) {
+          handleError(error)
+          return
+        }
       } else {
-        const ext = path.extname(pathname)
+        filepath = path.join(__dirname, pathname || type + '.html')
+      }
+      fs.readFile(filepath, (error, data) => {
+        if (error) {
+          handleError(error)
+          return
+        }
+
+        const ext = path.extname(filepath)
         let contentType: string
         switch (ext) {
-          case '.css':
-            contentType = 'text/css'
-            break
-          case '.js':
-            contentType = 'text/javascript'
-            break
-          case '.html':
-            contentType = 'text/html'
-            break
-          default:
-            contentType = 'application/octet-stream'
+          case '.css': contentType = 'text/css'; break
+          case '.js': contentType = 'text/javascript'; break
+          case '.html': contentType = 'text/html'; break
+          default: contentType = 'application/octet-stream'
         }
-        response.writeHead(200, { 'Content-Type': contentType })
-        response.write(data.toString())
-      }
-      response.end()
+        handleData(data.toString(), contentType)
+      })
+    }).listen(this.port)
+
+    this.wsServer = new ws.Server({ server: this.httpServer })
+    this.wsServer.on('connection', (ws) => {
+      sendMsg.call(ws, 'config', options.config)
     })
-  })
-  const wsServer = new WSServer({ server: httpServer })
-  return {
-    httpServer,
-    wsServer
+
+    console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
 
-interface WatchOptions {
+export { MarkletServer as Server }
+
+export interface WatchOptions extends ServerOptions {
   source: string
-  port?: number
 }
 
-export function watch(options: WatchOptions): void {
-  const port = options.port || 8080
-  const { httpServer, wsServer } = createServer('watch')
-  httpServer.listen(port)
-  wsServer.on('connection', (ws) => {
+export function watch(options: WatchOptions): MarkletServer<'watch'> {
+  const server = new MarkletServer('watch', options)
+  server.wsServer.on('connection', (ws) => {
     ws.send(toDocMessage(options.source))
   })
   fs.watch(options.source, () => {
-    wsServer.broadcast(toDocMessage(options.source))
+    server.wsServer.broadcast(toDocMessage(options.source))
   })
-  console.log(`Server running at http://localhost:${port}/`)
+  return server
 }
 
-interface EditOptions {
+export interface EditOptions extends ServerOptions {
   source?: string
-  port?: number
 }
 
-export function edit(options: EditOptions): void {
-  const port = options.port || 8080
-  const { httpServer } = createServer('edit')
-  httpServer.listen(port)
-  console.log(`Server running at http://localhost:${port}/`)
+export function edit(options: EditOptions): MarkletServer<'edit'> {
+  const server = new MarkletServer('edit', options)
+  return server
 }
diff --git a/packages/dev-server/src/watch.html b/packages/dev-server/src/watch.html
new file mode 100644
index 0000000..8772b2d
--- /dev/null
+++ b/packages/dev-server/src/watch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Marklet</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
+    <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
+    <script src="~/vue/dist/vue.runtime.min.js"></script>
+    <link href="client.min.css" rel="stylesheet">
+    <link href="themes.min.css" rel="stylesheet">
+    <script src="client.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      Marklet.start('edit').$mount('#app')
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
new file mode 100644
index 0000000..8e25583
--- /dev/null
+++ b/packages/dev-server/themes/dark.scss
@@ -0,0 +1,85 @@
+$menu-bgcolor: #2d2f31;
+$menu-shadow: #000000;
+$active-color: #acdeff;
+
+&, > .explorer {
+  background-color: #272822;
+}
+
+> .menubar {
+  color: #c8c8c8;
+  background-color: #212220;
+
+  .item:hover { background-color: #3A3A3A }
+
+  .item.active {
+    background-color: $menu-bgcolor;
+    box-shadow: 0 0 8px $menu-shadow;
+  }
+}
+
+> .border {
+  background-color: #666666;
+
+  &:hover, &.active { background-color: #999999 }
+}
+
+.marklet-menu {
+  background-color: $menu-bgcolor;
+  box-shadow: 0 2px 8px $menu-shadow;
+
+  .menu-item {
+    .label { color: #bbbbbb }
+    .caption { color: #777777 }
+    .binding { color: #a5a5a5 }
+    .binding i:hover { color: #fafaf5 }
+    .separator { border-bottom-color: #888888 }
+
+    &:hover {
+      &:not(.disabled) { background-color: #3A3A3A }
+      .label { color: #e1e4e8 }
+      .binding { color: #c6cbd1 }
+    }
+
+    &.active {
+      .label {
+        color: #acdeff;
+        text-shadow: 0 0 0.15px #ACDDFF;
+      }
+    }
+
+    &.disabled {
+      .label { color: #777777 !important }
+      .binding { color: #666666 !important }
+    }
+  }
+}
+
+.marklet-checkbox {
+  color: #666666;
+
+  > .box {
+    > .inner {
+      background-color: #666666;
+      border-color: #444444;
+
+      &::after {
+        border-color: #666666;
+      }
+    }
+  }
+  
+  &.checked, &.focused {
+    > .box > .inner {
+      border-color: $active-color;
+    }
+  }
+
+  &.checked {
+    color: $active-color;
+
+    > .box > .inner {
+      background-color: $active-color;
+    }
+  }
+}
diff --git a/packages/dev-server/themes/dark.yaml b/packages/dev-server/themes/dark.yaml
new file mode 100644
index 0000000..ca9add3
--- /dev/null
+++ b/packages/dev-server/themes/dark.yaml
@@ -0,0 +1,76 @@
+base: vs-dark
+rules: []
+inherit: true
+
+colors:
+  dropdown.background: '#414339'
+  list.activeSelectionBackground: '#75715E'
+  list.focusBackground: '#414339'
+  dropdown.listBackground: '#1e1f1c'
+  list.inactiveSelectionBackground: '#414339'
+  list.hoverBackground: '#3e3d32'
+  list.dropBackground: '#414339'
+  list.highlightForeground: '#f8f8f2'
+  button.background: '#75715E'
+  editor.background: '#272822'
+  editor.foreground: '#f8f8f2'
+  selection.background: '#ccccc7'
+  editor.selectionHighlightBackground: '#575b6180'
+  editor.selectionBackground: '#878b9180'
+  editor.wordHighlightBackground: '#4a4a7680'
+  editor.wordHighlightStrongBackground: '#6a6a9680'
+  editor.lineHighlightBackground: '#3e3d32'
+  editorLineNumber.activeForeground: '#c2c2bf'
+  editorCursor.foreground: '#f8f8f0'
+  editorWhitespace.foreground: '#464741'
+  editorIndentGuide.background: '#464741'
+  editorIndentGuide.activeBackground: '#767771'
+  editorGroupHeader.tabsBackground: '#1e1f1c'
+  editorGroup.dropBackground: '#41433980'
+  tab.inactiveBackground: '#414339'
+  tab.border: '#1e1f1c'
+  tab.inactiveForeground: '#ccccc7'
+  widget.shadow: '#000000'
+  progressBar.background: '#75715E'
+  badge.background: '#75715E'
+  badge.foreground: '#f8f8f2'
+  editorLineNumber.foreground: '#90908a'
+  panelTitle.activeForeground: '#f8f8f2'
+  panelTitle.activeBorder: '#75715E'
+  panelTitle.inactiveForeground: '#75715E'
+  panel.border: '#414339'
+  titleBar.activeBackground: '#1e1f1c'
+  statusBar.background: '#414339'
+  statusBar.noFolderBackground: '#414339'
+  statusBar.debuggingBackground: '#75715E'
+  activityBar.background: '#272822'
+  activityBar.foreground: '#f8f8f2'
+  activityBar.dropBackground: '#414339'
+  sideBar.background: '#1e1f1c'
+  sideBarSectionHeader.background: '#272822'
+  pickerGroup.foreground: '#75715E'
+  input.background: '#414339'
+  inputOption.activeBorder: '#75715E'
+  focusBorder: '#75715E'
+  editorWidget.background: '#1e1f1c'
+  debugToolBar.background: '#1e1f1c'
+  diffEditor.insertedTextBackground: '#66852880'
+  diffEditor.removedTextBackground: '#90274A80'
+  inputValidation.errorBackground: '#90274A'
+  inputValidation.errorBorder: '#f92672'
+  inputValidation.warningBackground: '#848528'
+  inputValidation.warningBorder: '#e2e22e'
+  inputValidation.infoBackground: '#546190'
+  inputValidation.infoBorder: '#819aff'
+  editorHoverWidget.background: '#414339'
+  editorHoverWidget.border: '#75715E'
+  editorSuggestWidget.background: '#272822'
+  editorSuggestWidget.border: '#75715E'
+  editorGroup.border: '#414339'
+  peekView.border: '#75715E'
+  peekViewEditor.background: '#272822'
+  peekViewResult.background: '#1e1f1c'
+  peekViewTitle.background: '#1e1f1c'
+  peekViewResult.selectionBackground: '#414339'
+  peekViewResult.matchHighlightBackground: '#75715E'
+  peekViewEditor.matchHighlightBackground: '#75715E'
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
new file mode 100644
index 0000000..99fec64
--- /dev/null
+++ b/packages/dev-server/themes/simple.scss
@@ -0,0 +1,85 @@
+$menu-bgcolor: #ffffff;
+$menu-shadow: #888888;
+$active-color: #409eff;
+
+&, > .explorer {
+  background-color: #ffffff;
+}
+
+> .menubar {
+  color: #4d4d4d;
+  background-color: #fafbfc;
+
+  .item:hover { background-color: #c0c0c0 }
+
+  .item.active {
+    background-color: $menu-bgcolor;
+    box-shadow: 0 0 8px $menu-shadow;
+  }
+}
+
+> .border {
+  background-color: #dddddd;
+
+  &:hover, &.active { background-color: #aaaaaa }
+}
+
+.marklet-menu {
+  background-color: $menu-bgcolor;
+  box-shadow: 0 2px 8px $menu-shadow;
+
+  .menu-item {
+    .label { color: #383838 }
+    .caption { color: #bababa }
+    .binding { color: #808080 }
+    .binding i:hover { color: #000000 }
+    .separator { border-bottom-color: #b0b0b0 }
+
+    &:hover {
+      &:not(.disabled) { background-color: #e8e8e8 }
+      .label { color: #24292e }
+      .binding { color: #f5eaea }
+    }
+
+    &.active {
+      .label {
+        color: $active-color;
+        text-shadow: 0 0 0.15px #ACDDFF;
+      }
+    }
+
+    &.disabled {
+      .label { color: #bababa !important }
+      .binding { color: #c8c8c8 !important }
+    }
+  }
+}
+
+.marklet-checkbox {
+  color: #606266;
+
+  > .box {
+    > .inner {
+      background-color: #ffffff;
+      border-color: #dcdfe6;
+
+      &::after {
+        border-color: #ffffff;
+      }
+    }
+  }
+  
+  &.checked, &.focused {
+    > .box > .inner {
+      border-color: $active-color;
+    }
+  }
+
+  &.checked {
+    color: $active-color;
+
+    > .box > .inner {
+      background-color: $active-color;
+    }
+  }
+}
diff --git a/packages/dev-server/themes/simple.yaml b/packages/dev-server/themes/simple.yaml
new file mode 100644
index 0000000..8652b36
--- /dev/null
+++ b/packages/dev-server/themes/simple.yaml
@@ -0,0 +1,76 @@
+base: vs
+rules: []
+inherit: true
+
+colors:
+  dropdown.background: '#ffffff'
+  list.activeSelectionBackground: '#75715E'
+  list.focusBackground: '#ffffff'
+  dropdown.listBackground: '#efeff2'
+  list.inactiveSelectionBackground: '#E5EBF1'
+  list.hoverBackground: '#E8E8E8'
+  list.dropBackground: '#ffffff'
+  list.highlightForeground: '#007acc'
+  button.background: '#75715E'
+  editor.background: '#ffffff'
+  editor.foreground: '#24292e'
+  selection.background: '#ccccc7'
+  editor.selectionHighlightBackground: '#ADD6FF4D'
+  editor.selectionBackground: '#5badff80'
+  editor.wordHighlightBackground: '#4a4a7680'
+  editor.wordHighlightStrongBackground: '#6a6a9680'
+  editor.lineHighlightBackground: '#fffbdd'
+  editorLineNumber.activeForeground: '#0b0b59'
+  editorCursor.foreground: '#000000'
+  editorWhitespace.foreground: '#464741'
+  editorIndentGuide.background: '#eeeeee'
+  editorIndentGuide.activeBackground: '#939393'
+  editorGroupHeader.tabsBackground: '#efeff2'
+  editorGroup.dropBackground: '#41433980'
+  tab.inactiveBackground: '#fafbfc'
+  tab.border: '#efeff2'
+  tab.inactiveForeground: '#ccccc7'
+  widget.shadow: '#808080'
+  progressBar.background: '#75715E'
+  badge.background: '#75715E'
+  badge.foreground: '#f8f8f2'
+  editorLineNumber.foreground: '#cccccc'
+  panelTitle.activeForeground: '#f8f8f2'
+  panelTitle.activeBorder: '#75715E'
+  panelTitle.inactiveForeground: '#75715E'
+  panel.border: '#ffffff'
+  titleBar.activeBackground: '#fafbfc'
+  statusBar.background: '#fafbfc'
+  statusBar.noFolderBackground: '#fafbfc'
+  statusBar.debuggingBackground: '#fafbfc'
+  activityBar.background: '#24292e'
+  activityBar.foreground: '#fafbfc'
+  activityBar.dropBackground: '#ffffff'
+  sideBar.background: '#fafbfc'
+  sideBarSectionHeader.background: '#F1F2F3'
+  pickerGroup.foreground: '#75715E'
+  input.background: '#ffffff'
+  inputOption.activeBorder: '#75715E'
+  focusBorder: '#fafbfc'
+  editorWidget.background: '#efeff2'
+  debugToolBar.background: '#efeff2'
+  diffEditor.insertedTextBackground: '#66852880'
+  diffEditor.removedTextBackground: '#90274A80'
+  inputValidation.errorBackground: '#90274A'
+  inputValidation.errorBorder: '#f92672'
+  inputValidation.warningBackground: '#848528'
+  inputValidation.warningBorder: '#e2e22e'
+  inputValidation.infoBackground: '#546190'
+  inputValidation.infoBorder: '#819aff'
+  editorHoverWidget.background: '#ffffff'
+  editorHoverWidget.border: '#75715E'
+  editorSuggestWidget.background: '#F3F3F3'
+  editorSuggestWidget.border: '#75715E'
+  editorGroup.border: '#ffffff'
+  peekView.border: '#75715E'
+  peekViewEditor.background: '#272822'
+  peekViewResult.background: '#efeff2'
+  peekViewTitle.background: '#efeff2'
+  peekViewResult.selectionBackground: '#ffffff'
+  peekViewResult.matchHighlightBackground: '#75715E'
+  peekViewEditor.matchHighlightBackground: '#75715E'
diff --git a/packages/docs/README.md b/packages/docs/README.md
new file mode 100644
index 0000000..33ea174
--- /dev/null
+++ b/packages/docs/README.md
@@ -0,0 +1,3 @@
+# @marklet/docs
+
+Documentation for marklet.
diff --git a/packages/docs/marklet.yml b/packages/docs/marklet.yml
new file mode 100644
index 0000000..dee993a
--- /dev/null
+++ b/packages/docs/marklet.yml
@@ -0,0 +1,3 @@
+version: 1.0
+srcDir: src
+outDir: ../../docs/docs
diff --git a/packages/docs/package.json b/packages/docs/package.json
new file mode 100644
index 0000000..90d5a80
--- /dev/null
+++ b/packages/docs/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@marklet/docs",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "author": "shigma <1700011071@pku.edu.cn>",
+  "license": "MIT"
+}
diff --git a/packages/docs/src/index.mkl b/packages/docs/src/index.mkl
new file mode 100644
index 0000000..9c8859f
--- /dev/null
+++ b/packages/docs/src/index.mkl
@@ -0,0 +1,3 @@
+# Marklet
+
+A markup language designed for API manual pages.
diff --git a/packages/marklet/README.md b/packages/marklet/README.md
index 1f9910c..9ea7a4c 100644
--- a/packages/marklet/README.md
+++ b/packages/marklet/README.md
@@ -10,22 +10,22 @@ A markup language designed for API manual pages.
 ## Usage: CLI
 
 ```
-Usage: marklet [filepath|dirpath] [options]
+Usage: marklet [options] [command]
+
+A command line interface for marklet.
 
 Options:
+  -v, --version                       output the version number
+  -h, --help                          output usage information
 
-  -v, --version                      output the version number
-  -m, --mode [mode]                  Choose between parse, watch and edit mode (default: parse)
-  -s, --source [path]                Read text from file
-  -i, --input [text]                 Read text directly from stdin
-  -d, --dest [path]                  Write parsed data to file instead of stdin
-  -p, --port [port]                  Port for the development server
-  -l, --default-language [language]  Default language in code block
-  -H, --no-header-align              Disable header to align at center
-  -S, --no-section                   Disallow section syntax
-  -h, --help                         output usage information
+Commands:
+  parse [options] [filepath]          Parse a marklet file into marklet AST.
+  edit [options] [filepath|dirpath]   Edit a marklet file or project.
+  watch [options] [filepath|dirpath]  Watch a marklet file or project.
 ```
 
+See details [here](https://github.com/obstudio/Marklet/blob/master/packages/cli/README.md).
+
 ## Usage: Node
 
 ```shell
diff --git a/packages/marklet/package.json b/packages/marklet/package.json
index 147cebe..437fc02 100644
--- a/packages/marklet/package.json
+++ b/packages/marklet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markletjs",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A markup language designed for API manual pages.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -28,7 +28,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/cli": "^1.1.15",
+    "@marklet/cli": "^2.0.1",
     "@marklet/parser": "^1.5.1",
     "@marklet/renderer": "^1.3.1"
   }
diff --git a/packages/monaco/.eslintrc.yml b/packages/monaco/.eslintrc.yml
deleted file mode 100644
index 0ae919d..0000000
--- a/packages/monaco/.eslintrc.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-env: 
-  browser: true
\ No newline at end of file
diff --git a/packages/monaco/.npmignore b/packages/monaco/.npmignore
deleted file mode 100644
index f649af7..0000000
--- a/packages/monaco/.npmignore
+++ /dev/null
@@ -1 +0,0 @@
-.eslintrc.yml
\ No newline at end of file
diff --git a/packages/monaco/README.md b/packages/monaco/README.md
deleted file mode 100644
index faa16c5..0000000
--- a/packages/monaco/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# @marklet/monaco
-
-[![Build Status](https://travis-ci.com/obstudio/Marklet.svg?branch=dev)](https://travis-ci.com/obstudio/Marklet)
-[![dependency](https://img.shields.io/david/obstudio/Marklet.svg?path=packages%2Fmonaco)](https://github.com/obstudio/Marklet/blob/master/packages/monaco/package.json)
-[![npm](https://img.shields.io/npm/v/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@marklet/monaco.svg)](https://www.npmjs.com/package/@marklet/monaco)
-
-A monaco plugin for marklet.
diff --git a/packages/monaco/index.js b/packages/monaco/index.js
deleted file mode 100644
index 93ac922..0000000
--- a/packages/monaco/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const loader = require('monaco-editor/min/vs/loader')
-const isBrowser = typeof window === 'object' && window
-const amdRequire = isBrowser ? loader.require : loader
-const Marklet = require('./marklet')
-const path = require('path')
-const fs = require('fs')
-
-function resolveModulePath(filepath) {
-  for (const basepath of require.resolve.paths(__dirname)) {
-    const fullpath = path.resolve(basepath, filepath)
-    if (fs.existsSync(fullpath)) {
-      return 'file:///' + fullpath
-        .split(path.sep)
-        .map(name => name.replace(/#/g, '%23').replace(/ /g, '%20'))
-        .join('/')
-    }
-  }
-  throw new Error(`Cannot find module '${filepath}'`)
-}
-
-amdRequire.config({
-  baseUrl: resolveModulePath('monaco-editor/min')
-})
-
-// workaround monaco-css not understanding the environment
-if (isBrowser) window.module = undefined
-
-let monaco = null
-
-module.exports = new Promise((resolve, reject) => {
-  try {
-    amdRequire(['vs/editor/editor.main'], () => {
-      monaco = window.monaco
-      monaco.languages.register({
-        id: 'marklet',
-        extensions: ['mkl'],
-      })
-      monaco.languages.setMonarchTokensProvider('marklet', Marklet)
-      resolve(window.monaco)
-    })
-  } catch (error) {
-    reject(error)
-  }
-})
-
-module.exports.install = async function(Vue) {
-  Object.defineProperty(Vue.prototype, '$colorize', {
-    get: () => monaco ? (code, lang) => monaco.editor.colorize(code, lang) : undefined
-  })
-}
diff --git a/packages/monaco/marklet.js b/packages/monaco/marklet.js
deleted file mode 100644
index 37e2cc4..0000000
--- a/packages/monaco/marklet.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-  tokenizer: {
-    root: [
-      { include: 'topLevel' },
-    ],
-    topLevel: [
-      {
-        regex: /(#{1,4}) +([^\n]+?)( +#)?/,
-        action: {
-          token: 'heading'
-        }
-      }
-    ],
-  },
-}
diff --git a/packages/monaco/package.json b/packages/monaco/package.json
deleted file mode 100644
index 3de5bad..0000000
--- a/packages/monaco/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "@marklet/monaco",
-  "version": "1.2.1",
-  "description": "A monaco plugin for marklet.",
-  "author": "jjyyxx <1449843302@qq.com>",
-  "contributors": [
-    "shigma <1700011071@pku.edu.cn>"
-  ],
-  "homepage": "https://github.com/obstudio/Marklet/tree/dev/packages/monaco",
-  "license": "MIT",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/obstudio/Marklet.git"
-  },
-  "bugs": {
-    "url": "https://github.com/obstudio/Marklet/issues"
-  },
-  "dependencies": {
-    "monaco-editor": "^0.14.3"
-  }
-}
\ No newline at end of file
diff --git a/packages/parser/src/document.ts b/packages/parser/src/document.ts
index 572c8e8..ad126eb 100644
--- a/packages/parser/src/document.ts
+++ b/packages/parser/src/document.ts
@@ -184,6 +184,7 @@ export default class MarkletDocumentLexer extends DocumentLexer {
         eol: /[ \t]*(?:\n|$)/,
         cell: /\S(?: {0,3}\S)*/,
       },
+      requireBound: config.require_bound,
       config: {
         tab_indent: 2,
         header_align: true,
diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts
index b4d73b6..65d0fc1 100644
--- a/packages/parser/src/index.ts
+++ b/packages/parser/src/index.ts
@@ -9,6 +9,14 @@ interface MarkletLexerConfig extends LexerConfig {
   allow_section?: boolean
   /** default language in code block */
   default_language?: string
+  /** assign start/end to tokens */
+  require_bound?: boolean
+}
+
+export const defaultConfig: MarkletLexerConfig = {
+  header_align: true,
+  allow_section: true,
+  default_language: '',
 }
 
 export interface ParseOptions {
diff --git a/packages/renderer/comp/codeblock.vue b/packages/renderer/comp/codeblock.vue
index ce07ae5..5f24b76 100644
--- a/packages/renderer/comp/codeblock.vue
+++ b/packages/renderer/comp/codeblock.vue
@@ -31,7 +31,7 @@ module.exports = {
 </script>
 
 <template>
-  <div class="codeblock" v-html="html"/>
+  <div class="mkl-codeblock" v-html="html"/>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/renderer/comp/collapse.vue b/packages/renderer/comp/collapse.vue
index 8557f5d..082cb1c 100644
--- a/packages/renderer/comp/collapse.vue
+++ b/packages/renderer/comp/collapse.vue
@@ -71,10 +71,9 @@ module.exports = {
   background-color: transparent;
   width: -webkit-fill-available;
   transition: background-color 0.3s ease;
-  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 16px;
 
   > .header {
-    color: #303133;
     padding: 8px 16px;
     font-size: 20px;
     line-height: 1.5em;
@@ -93,7 +92,6 @@ module.exports = {
   }
 }
 
-&.header:hover { background-color: #f5f7fa }
 &.closed:not(.header) { border-bottom: none }
 
 </style>
diff --git a/packages/renderer/comp/input.vue b/packages/renderer/comp/input.vue
new file mode 100644
index 0000000..b917b53
--- /dev/null
+++ b/packages/renderer/comp/input.vue
@@ -0,0 +1,137 @@
+<script>
+
+module.exports = {
+  props: {
+    prefixIcon: String,
+    suffixIcon: String,
+    placeholder: String,
+    disabled: Boolean,
+    validate: Function,
+    value: [ String, Number ],
+    type: { default: 'text' },
+    round: { default: false },
+  },
+
+  data: () => ({
+    focused: false,
+    invalid: false,
+  }),
+
+  computed: {
+    inputStyle() {
+      return {
+        paddingLeft: Boolean(this.prefixIcon) + 1 + 'em',
+        paddingRight: Boolean(this.suffixIcon) + 1 + 'em',
+      }
+    },
+  },
+
+  methods: {
+    onInput(event) {
+      this.value = event.target.value
+      if (this.validate) {
+        this.invalid = !this.validate(this.value)
+      }
+      this.$emit('input', this.value)
+    },
+    onFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    onBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+    },
+  }
+}
+
+</script>
+
+<template>
+  <div class="mkl-input" :class="{ focused, disabled }">
+    <div class="prepend" v-if="$slots.prepend">
+      <slot name="prepend"/>
+    </div>
+    <i v-if="prefixIcon" :class="'icon-' + prefixIcon" class="prefix"/>
+    <input :value="value" :type="type" :style="inputStyle" :placeholder="placeholder"
+      @input="onInput" @focus="onFocus" @blur="onBlur" @keydown.enter.stop="$emit('enter', $event)"
+      :class="{ round, invalid, 'has-append': $slots.append, 'has-prepend': $slots.prepend }"/>
+    <i v-if="suffixIcon" :class="'icon-' + suffixIcon" class="suffix"/>
+    <div class="append" v-if="$slots.append">
+      <slot name="append"/>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+@mixin Xpend($name, $dir1, $dir2) {
+  > input.has-#{$name} {
+    border-top-#{$dir1}-radius: 0;
+    border-bottom-#{$dir1}-radius: 0;
+  }
+
+  > .#{$name} {
+    border-top-#{$dir2}-radius: 0;
+    border-bottom-#{$dir2}-radius: 0;
+    border-#{$dir2}: 0;
+  }
+}
+
+& {
+  height: 2em;
+  font-size: 16px;
+  position: relative;
+  transition: 0.3s ease;
+  display: inline-table;
+  background-color: inherit;
+  width: -webkit-fill-available;
+
+  > i.prefix, > i.suffix {
+    color: #c0c4cc;
+    top: 50%;
+    position: absolute;
+    margin-top: -0.5em;
+  }
+
+  > i.prefix { left: 10px }
+  > i.suffix { right: 10px }
+
+  > input {
+    padding: 0;
+    width: 100%;
+    outline: none;
+    font-size: 1em;
+    height: inherit;
+    display: table-cell;
+    border-radius: 0.3em;
+    transition: 0.3s ease;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    background-color: #ffffff;
+    border: 1px solid #dcdfe6;
+
+    &.round { border-radius: 1em }
+    &:hover { border-color: #c0c4cc }
+    &:focus { border-color: #409eff }
+    &.invalid { border-color: #f56c6c !important }
+    &::-webkit-input-placeholder { color: #c0c4cc }
+  }
+
+  > .prepend, > .append {
+    color: #909399;
+    vertical-align: middle;
+    background-color: inherit;
+    display: table-cell;
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 0.3em;
+    padding: 0 20px;
+    white-space: nowrap;
+  }
+
+  @include Xpend(prepend, left, right);
+  @include Xpend(append, right, left);
+}
+
+</style>
diff --git a/packages/renderer/comp/scroll.vue b/packages/renderer/comp/scroll.vue
index 3200a4a..243156d 100644
--- a/packages/renderer/comp/scroll.vue
+++ b/packages/renderer/comp/scroll.vue
@@ -173,7 +173,7 @@ module.exports = {
     cursor: pointer;
     position: absolute;
     pointer-events: auto;
-    background-color: #c0c4cc;
+    background-color: #606266;
     transition: opacity 0.8s ease;
 
     &:hover, &.active { opacity: 1 }
diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts
index b11a64e..2f2a0f7 100644
--- a/packages/renderer/index.d.ts
+++ b/packages/renderer/index.d.ts
@@ -1,5 +1,11 @@
 import { VueConstructor } from 'vue'
 import { TokenLike } from '@marklet/core'
 
+interface MarkletTheme {
+  key: string
+  name: string
+}
+
+export const themes: MarkletTheme[]
 export function install(Vue: VueConstructor): void
 export function embed(element: string | HTMLElement, content?: TokenLike[]): void
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 9a77942..cbf0bf5 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -21,10 +21,13 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/core": "^3.2.2"
+    "@marklet/core": "^3.2.2",
+    "neat-scroll": "^2.0.1"
+  },
+  "devDependencies": {
+    "vue": "^2.5.17"
   },
   "peerDependencies": {
-    "neat-scroll": "^2.0.1",
     "vue": "^2.5.17"
   }
 }
\ No newline at end of file
diff --git a/packages/renderer/src/index.js b/packages/renderer/src/index.js
index 9ce956e..e513cc4 100644
--- a/packages/renderer/src/index.js
+++ b/packages/renderer/src/index.js
@@ -1,23 +1,32 @@
 let _Vue = null, ASTNodes = null
 
+const components = {
+  'collapse-transition': require('@/transitions/collapse-transition.vue'),
+  'mkl-codeblock': require('@/codeblock.vue'),
+  'mkl-collapse': require('@/collapse.vue'),
+  'mkl-heading': require('@/heading.vue'),
+  'mkl-inlinelist': require('@/inlinelist.vue'),
+  'mkl-input': require('@/input.vue'),
+  'mkl-list-item': require('@/list-item.vue'),
+  'mkl-list': require('@/list.vue'),
+  'mkl-nodes': require('@/nodes.vue'),
+  'mkl-paragraph': require('@/paragraph.vue'),
+  'mkl-quote': require('@/quote.vue'),
+  'mkl-scroll': require('@/scroll.vue'),
+  'mkl-section': require('@/section.vue'),
+  'mkl-separator': require('@/separator.vue'),
+  'mkl-table': require('@/table.vue'),
+  'mkl-usages': require('@/usages.vue'),
+}
+
 const Renderer = {
+  components,
+  themes: require('../themes'),
   install(Vue) {
     _Vue = Vue
-    Vue.component('collapse-transition', require('../temp/transitions/collapse-transition.vue'))
-    Vue.component('mkl-codeblock', require('../temp/codeblock.vue'))
-    Vue.component('mkl-collapse', require('../temp/collapse.vue'))
-    Vue.component('mkl-heading', require('../temp/heading.vue'))
-    Vue.component('mkl-inlinelist', require('../temp/inlinelist.vue'))
-    Vue.component('mkl-list-item', require('../temp/list-item.vue'))
-    Vue.component('mkl-list', require('../temp/list.vue'))
-    Vue.component('mkl-nodes', require('../temp/nodes.vue'))
-    Vue.component('mkl-paragraph', require('../temp/paragraph.vue'))
-    Vue.component('mkl-quote', require('../temp/quote.vue'))
-    Vue.component('mkl-scroll', require('../temp/scroll.vue'))
-    Vue.component('mkl-section', require('../temp/section.vue'))
-    Vue.component('mkl-separator', require('../temp/separator.vue'))
-    Vue.component('mkl-table', require('../temp/table.vue'))
-    Vue.component('mkl-usages', require('../temp/usages.vue'))
+    for (const key in components) {
+      Vue.component(key, components[key])
+    }
   },
   embed(element, content = []) {
     if (!_Vue) {
@@ -27,7 +36,7 @@ const Renderer = {
         throw new Error('No vue constructor was found.')
       }
     }
-    if (!ASTNodes) ASTNodes = _Vue.extend(require('../temp/nodes.vue'))
+    if (!ASTNodes) ASTNodes = _Vue.extend(components['mkl-nodes'])
     new ASTNodes({ propsData: { content } }).$mount(element)
   }
 }
diff --git a/packages/renderer/themes/dark.scss b/packages/renderer/themes/dark.scss
new file mode 100644
index 0000000..e898a76
--- /dev/null
+++ b/packages/renderer/themes/dark.scss
@@ -0,0 +1,53 @@
+& {
+  .document {
+    color: #fafaf5;
+    background-color: #272822;
+
+    blockquote {
+      color: #c6cbd1;
+      border-left-color: #c0c0c0;
+      background-color: #3d3d3d;
+      &.r { border-left-color: #F92672; background-color: #423939 }
+      &.g { border-left-color: #96E22E; background-color: #394239 }
+      &.b { border-left-color: #66D9EF; background-color: #393942 }
+    }
+
+    .usage blockquote {
+      border-color: #2D2F3F !important;
+      background-color: #393942;
+      &:not(:last-child) { border-bottom-color: #393952 }
+      &:not(:first-child) { border-top-color: #393952 }
+
+      > span:first-child {
+        color: #e1e4e8;
+        em { color: #9697a8 }
+      }
+    }
+
+    pre { background-color: #202020 }
+    h1 { border-bottom: 4px solid #454545 }
+    h2 { border-bottom: 2px solid #454545 }
+    hr { border-bottom: 1px solid #202020; background-color: #282828 }
+    
+    table {
+      th, td { border: 1px solid #a0a0a0 }
+      tr { background-color: #282828; border-top: 1px solid #a0a0a0 }
+      tr :nth-child(2n) { background-color: #202020 }
+    }
+
+    a { color: #7fcfff }
+    img { background-color: transparent }
+    code { background-color: #3d3d3d }
+    span.comment { color: #c6cbd1 }
+
+    .codeblock {
+      background-color: #383933;
+      &::-webkit-scrollbar-thumb {
+        background-color: #555555;
+        box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
+        &:hover { background-color: #616161 }
+        &:window-inactive { background-color: #353535; box-shadow: none }
+      }
+    }
+  }
+}
diff --git a/packages/renderer/themes/index.json b/packages/renderer/themes/index.json
new file mode 100644
index 0000000..733e5cb
--- /dev/null
+++ b/packages/renderer/themes/index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "key": "dark",
+    "name": "暗色"
+  },
+  {
+    "key": "simple",
+    "name": "简约"
+  }
+]
\ No newline at end of file
diff --git a/packages/renderer/themes/simple.scss b/packages/renderer/themes/simple.scss
new file mode 100644
index 0000000..fc76774
--- /dev/null
+++ b/packages/renderer/themes/simple.scss
@@ -0,0 +1,52 @@
+& {
+  .document {
+    color: #24292e;
+    background-color: #ffffff;
+
+    blockquote {
+      color: #606060;
+      border-left-color: #c0c0c0;
+      background-color: #e6e6e6;
+      &.r { border-left-color: #F92672; background-color: #eae3e3 }
+      &.g { border-left-color: #96E22E; background-color: #e3eae3 }
+      &.b { border-left-color: #66D9EF; background-color: #e3e3ea }
+    }
+
+    .usage blockquote {
+      border-color: #f6f6f6 !important;
+      background-color: #e0e0e0;
+      &:not(:last-child) { border-bottom-color: #e0e0e0 }
+      &:not(:first-child) { border-top-color: #e0e0e0 }
+
+      > span:first-child {
+        color: #24292e;
+        em { color: #808080 }
+      }
+    }
+
+    h1 { border-bottom: 4px solid #bababa }
+    h2 { border-bottom: 2px solid #bababa }
+    hr { border-bottom: 1px solid #d0d0d0; background-color: #c8c8c8 }
+    
+    table {
+      th, td { border: 1px solid #636363 }
+      tr { background-color: #e0e0e0; border-top: 1px solid #636363 }
+      tr :nth-child(2n) { background-color: #e8e8e8 }
+    }
+
+    a { color: #409eff }
+    img { background-color: transparent }
+    code { background-color: #e0e0e0 }
+    span.comment { color: #454749 }
+
+    .codeblock {
+      background-color: #e0e0e0;
+      &::-webkit-scrollbar-thumb {
+        background-color: #c0c0c0;
+        box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
+        &:hover { background-color: #a8a8a8 }
+        &:window-inactive { background-color: #d0d0d0; box-shadow: none }
+      }
+    }
+  }
+}
diff --git a/packages/test/data/demo.mkl b/packages/test/data/demo.mkl
index c6a57d5..612a5ea 100644
--- a/packages/test/data/demo.mkl
+++ b/packages/test/data/demo.mkl
@@ -2,4 +2,29 @@
 
 text **bold** `123`
 
-> quote
\ No newline at end of file
+> quote
+
+```c
+int code = 2;
+```
+
+-.-.-
+
++ an + inline + list
+
+^^ Section 1.1
+
+- item 1
+- item 2
+  - item 2.1
+    - item 2.1.1
+- item 3
+  1. item 3.1
+  2. item 3.2
+
+## centered #
+
+=    *<    >
+*居中*    左对齐    _右对齐_
+看上去    -很-    正确
+OH    YEAH    ♪    看不到我吧