diff --git a/.babelrc b/.babelrc
new file mode 100755
index 00000000..3a280ba3
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}
diff --git a/.editorconfig b/.editorconfig
new file mode 100755
index 00000000..9d08a1a8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintignore b/.eslintignore
new file mode 100755
index 00000000..e1fcc9c4
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100755
index 00000000..2e2e2118
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,25 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 00000000..541a820f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/.postcssrc.js b/.postcssrc.js
new file mode 100755
index 00000000..249472da
--- /dev/null
+++ b/.postcssrc.js
@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
+  }
+}
diff --git a/README.md b/README.md
new file mode 100755
index 00000000..f2437a1b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,21 @@
+# iview-dashboard
+
+> A management system framework based on iview
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/build/build.js b/build/build.js
new file mode 100755
index 00000000..2b648b81
--- /dev/null
+++ b/build/build.js
@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // if you are using ts-loader, setting this to true will make tyescript errors show up during build
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
diff --git a/build/check-versions.js b/build/check-versions.js
new file mode 100755
index 00000000..3ef972a0
--- /dev/null
+++ b/build/check-versions.js
@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}
diff --git a/build/utils.js b/build/utils.js
new file mode 100755
index 00000000..e534fb0f
--- /dev/null
+++ b/build/utils.js
@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
new file mode 100755
index 00000000..33ed58bc
--- /dev/null
+++ b/build/vue-loader.conf.js
@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
new file mode 100755
index 00000000..787195a2
--- /dev/null
+++ b/build/webpack.base.conf.js
@@ -0,0 +1,96 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.scss$/,
+        loaders: ["style", "css", "sass"]
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
new file mode 100755
index 00000000..03e94282
--- /dev/null
+++ b/build/webpack.dev.conf.js
@@ -0,0 +1,80 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
new file mode 100755
index 00000000..5b53b9a0
--- /dev/null
+++ b/build/webpack.prod.conf.js
@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
diff --git a/config/dev.env.js b/config/dev.env.js
new file mode 100755
index 00000000..1e22973a
--- /dev/null
+++ b/config/dev.env.js
@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
diff --git a/config/index.js b/config/index.js
new file mode 100755
index 00000000..924e1faf
--- /dev/null
+++ b/config/index.js
@@ -0,0 +1,81 @@
+'use strict'
+// Template version: 1.2.7
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
diff --git a/config/prod.env.js b/config/prod.env.js
new file mode 100755
index 00000000..a6f99761
--- /dev/null
+++ b/config/prod.env.js
@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}
diff --git a/index.html b/index.html
new file mode 100755
index 00000000..972fdf0d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>iview-dashboard</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100755
index 00000000..5b264471
--- /dev/null
+++ b/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "iview-dashboard",
+  "version": "1.0.0",
+  "description": "A management system framework based on iview",
+  "author": "李杨 <1711467488@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.17.1",
+    "clipboard-polyfill": "^2.4.1",
+    "countup.js": "^1.9.3",
+    "echarts": "^3.8.5",
+    "element-ui": "^2.0.11",
+    "github-markdown-css": "^2.10.0",
+    "highlight.js": "^9.12.0",
+    "js-cookie": "^2.2.0",
+    "marked": "^0.3.9",
+    "mockjs": "^1.0.1-beta3",
+    "papaparse": "^4.3.6",
+    "simplemde": "^1.11.2",
+    "vue": "^2.5.2",
+    "vue-grid-layout": "^2.1.11",
+    "vue-router": "^3.0.1",
+    "vue-splitpane": "^1.0.2",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^3.0.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.7.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100755
index 00000000..40d47299
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+
+<style lang="scss">
+// 公用 class
+@import '~@/assets/style/public-class.scss';
+</style>
diff --git a/src/assets/library/font-awesome-4.7.0/HELP-US-OUT.txt b/src/assets/library/font-awesome-4.7.0/HELP-US-OUT.txt
new file mode 100644
index 00000000..83d083dd
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/HELP-US-OUT.txt
@@ -0,0 +1,7 @@
+I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
+Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
+comprehensive icon sets or copy and paste your own.
+
+Please. Check it out.
+
+-Dave Gandy
diff --git a/src/assets/library/font-awesome-4.7.0/css/font-awesome.css.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/css/font-awesome.css.REMOVED.git-id
new file mode 100644
index 00000000..26afdda5
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/css/font-awesome.css.REMOVED.git-id
@@ -0,0 +1 @@
+ee906a8196d0fbd581c27a9d5615db4c250860f2
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/css/font-awesome.min.css.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/css/font-awesome.min.css.REMOVED.git-id
new file mode 100644
index 00000000..4a16710d
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/css/font-awesome.min.css.REMOVED.git-id
@@ -0,0 +1 @@
+540440ce89f2a408aa699b65100e18f15e0f09ca
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/FontAwesome.otf.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/FontAwesome.otf.REMOVED.git-id
new file mode 100644
index 00000000..44d928d3
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/FontAwesome.otf.REMOVED.git-id
@@ -0,0 +1 @@
+401ec0f36e4f73b8efa40bd6f604fe80d286db70
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.eot.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.eot.REMOVED.git-id
new file mode 100644
index 00000000..cd56730a
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.eot.REMOVED.git-id
@@ -0,0 +1 @@
+e9f60ca953f93e35eab4108bd414bc02ddcf3928
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.svg.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.svg.REMOVED.git-id
new file mode 100644
index 00000000..9fe56c70
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.svg.REMOVED.git-id
@@ -0,0 +1 @@
+855c845e538b65548118279537a04eab2ec6ef0d
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf.REMOVED.git-id
new file mode 100644
index 00000000..4d8cdba6
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf.REMOVED.git-id
@@ -0,0 +1 @@
+35acda2fa1196aad98c2adf4378a7611dd713aa3
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff.REMOVED.git-id
new file mode 100644
index 00000000..0eaf735f
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff.REMOVED.git-id
@@ -0,0 +1 @@
+400014a4b06eee3d0c0d54402a47ab2601b2862b
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2.REMOVED.git-id
new file mode 100644
index 00000000..a252c5bb
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2.REMOVED.git-id
@@ -0,0 +1 @@
+4d13fc60404b91e398a37200c4a77b645cfd9586
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/less/animated.less b/src/assets/library/font-awesome-4.7.0/less/animated.less
new file mode 100644
index 00000000..66ad52a5
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/animated.less
@@ -0,0 +1,34 @@
+// Animated Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.@{fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/bordered-pulled.less b/src/assets/library/font-awesome-4.7.0/less/bordered-pulled.less
new file mode 100644
index 00000000..f1c8ad75
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/bordered-pulled.less
@@ -0,0 +1,25 @@
+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em @fa-border-color;
+  border-radius: .1em;
+}
+
+.@{fa-css-prefix}-pull-left { float: left; }
+.@{fa-css-prefix}-pull-right { float: right; }
+
+.@{fa-css-prefix} {
+  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/core.less b/src/assets/library/font-awesome-4.7.0/less/core.less
new file mode 100644
index 00000000..c577ac84
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/core.less
@@ -0,0 +1,12 @@
+// Base Class Definition
+// -------------------------
+
+.@{fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/fixed-width.less b/src/assets/library/font-awesome-4.7.0/less/fixed-width.less
new file mode 100644
index 00000000..110289f2
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/fixed-width.less
@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/font-awesome.less b/src/assets/library/font-awesome-4.7.0/less/font-awesome.less
new file mode 100644
index 00000000..c3677def
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/font-awesome.less
@@ -0,0 +1,18 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables.less";
+@import "mixins.less";
+@import "path.less";
+@import "core.less";
+@import "larger.less";
+@import "fixed-width.less";
+@import "list.less";
+@import "bordered-pulled.less";
+@import "animated.less";
+@import "rotated-flipped.less";
+@import "stacked.less";
+@import "icons.less";
+@import "screen-reader.less";
diff --git a/src/assets/library/font-awesome-4.7.0/less/icons.less.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/less/icons.less.REMOVED.git-id
new file mode 100644
index 00000000..569da2bd
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/icons.less.REMOVED.git-id
@@ -0,0 +1 @@
+159d600425c73c282be34f94af12179f091a16d2
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/less/larger.less b/src/assets/library/font-awesome-4.7.0/less/larger.less
new file mode 100644
index 00000000..c9d64677
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/larger.less
@@ -0,0 +1,13 @@
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }
diff --git a/src/assets/library/font-awesome-4.7.0/less/list.less b/src/assets/library/font-awesome-4.7.0/less/list.less
new file mode 100644
index 00000000..0b440382
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/list.less
@@ -0,0 +1,19 @@
+// List Icons
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-li-width;
+  width: @fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: (-@fa-li-width + (4em / 14));
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/mixins.less b/src/assets/library/font-awesome-4.7.0/less/mixins.less
new file mode 100644
index 00000000..beef231d
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/mixins.less
@@ -0,0 +1,60 @@
+// Mixins
+// --------------------------
+
+.fa-icon() {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+.fa-icon-rotate(@degrees, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+
+.fa-icon-flip(@horiz, @vert, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
+  -webkit-transform: scale(@horiz, @vert);
+      -ms-transform: scale(@horiz, @vert);
+          transform: scale(@horiz, @vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable() {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/path.less b/src/assets/library/font-awesome-4.7.0/less/path.less
new file mode 100644
index 00000000..835be41f
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/path.less
@@ -0,0 +1,15 @@
+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
+    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
+    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
+    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
+    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
+  // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/rotated-flipped.less b/src/assets/library/font-awesome-4.7.0/less/rotated-flipped.less
new file mode 100644
index 00000000..f6ba8147
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/rotated-flipped.less
@@ -0,0 +1,20 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .@{fa-css-prefix}-rotate-90,
+:root .@{fa-css-prefix}-rotate-180,
+:root .@{fa-css-prefix}-rotate-270,
+:root .@{fa-css-prefix}-flip-horizontal,
+:root .@{fa-css-prefix}-flip-vertical {
+  filter: none;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/less/screen-reader.less b/src/assets/library/font-awesome-4.7.0/less/screen-reader.less
new file mode 100644
index 00000000..11c18819
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/screen-reader.less
@@ -0,0 +1,5 @@
+// Screen Readers
+// -------------------------
+
+.sr-only { .sr-only(); }
+.sr-only-focusable { .sr-only-focusable(); }
diff --git a/src/assets/library/font-awesome-4.7.0/less/stacked.less b/src/assets/library/font-awesome-4.7.0/less/stacked.less
new file mode 100644
index 00000000..fc53fb0e
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/stacked.less
@@ -0,0 +1,20 @@
+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-1x { line-height: inherit; }
+.@{fa-css-prefix}-stack-2x { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }
diff --git a/src/assets/library/font-awesome-4.7.0/less/variables.less.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/less/variables.less.REMOVED.git-id
new file mode 100644
index 00000000..03e96eb1
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/less/variables.less.REMOVED.git-id
@@ -0,0 +1 @@
+7ddbbc0115f5b017bae9f401651f00d824a396b2
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_animated.scss b/src/assets/library/font-awesome-4.7.0/scss/_animated.scss
new file mode 100644
index 00000000..8a020dbf
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_animated.scss
@@ -0,0 +1,34 @@
+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_bordered-pulled.scss b/src/assets/library/font-awesome-4.7.0/scss/_bordered-pulled.scss
new file mode 100644
index 00000000..d4b85a02
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_bordered-pulled.scss
@@ -0,0 +1,25 @@
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_core.scss b/src/assets/library/font-awesome-4.7.0/scss/_core.scss
new file mode 100644
index 00000000..7425ef85
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_core.scss
@@ -0,0 +1,12 @@
+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_fixed-width.scss b/src/assets/library/font-awesome-4.7.0/scss/_fixed-width.scss
new file mode 100644
index 00000000..b221c981
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_fixed-width.scss
@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_icons.scss.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/scss/_icons.scss.REMOVED.git-id
new file mode 100644
index 00000000..8eb1f301
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_icons.scss.REMOVED.git-id
@@ -0,0 +1 @@
+e63e702c4d9c28fb78922cefa5daf91858b12c9a
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_larger.scss b/src/assets/library/font-awesome-4.7.0/scss/_larger.scss
new file mode 100644
index 00000000..41e9a818
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_larger.scss
@@ -0,0 +1,13 @@
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_list.scss b/src/assets/library/font-awesome-4.7.0/scss/_list.scss
new file mode 100644
index 00000000..7d1e4d54
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_list.scss
@@ -0,0 +1,19 @@
+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_mixins.scss b/src/assets/library/font-awesome-4.7.0/scss/_mixins.scss
new file mode 100644
index 00000000..c3bbd574
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_mixins.scss
@@ -0,0 +1,60 @@
+// Mixins
+// --------------------------
+
+@mixin fa-icon() {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  -webkit-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_path.scss b/src/assets/library/font-awesome-4.7.0/scss/_path.scss
new file mode 100644
index 00000000..bb457c23
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_path.scss
@@ -0,0 +1,15 @@
+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_rotated-flipped.scss b/src/assets/library/font-awesome-4.7.0/scss/_rotated-flipped.scss
new file mode 100644
index 00000000..a3558fd0
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_rotated-flipped.scss
@@ -0,0 +1,20 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .#{$fa-css-prefix}-rotate-90,
+:root .#{$fa-css-prefix}-rotate-180,
+:root .#{$fa-css-prefix}-rotate-270,
+:root .#{$fa-css-prefix}-flip-horizontal,
+:root .#{$fa-css-prefix}-flip-vertical {
+  filter: none;
+}
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_screen-reader.scss b/src/assets/library/font-awesome-4.7.0/scss/_screen-reader.scss
new file mode 100644
index 00000000..637426f0
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_screen-reader.scss
@@ -0,0 +1,5 @@
+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only(); }
+.sr-only-focusable { @include sr-only-focusable(); }
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_stacked.scss b/src/assets/library/font-awesome-4.7.0/scss/_stacked.scss
new file mode 100644
index 00000000..aef74036
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_stacked.scss
@@ -0,0 +1,20 @@
+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }
diff --git a/src/assets/library/font-awesome-4.7.0/scss/_variables.scss.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0/scss/_variables.scss.REMOVED.git-id
new file mode 100644
index 00000000..a9e9de93
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/_variables.scss.REMOVED.git-id
@@ -0,0 +1 @@
+498fc4a087c614614166df2e9f08bb5e0071daf4
\ No newline at end of file
diff --git a/src/assets/library/font-awesome-4.7.0/scss/font-awesome.scss b/src/assets/library/font-awesome-4.7.0/scss/font-awesome.scss
new file mode 100644
index 00000000..f1c83aaa
--- /dev/null
+++ b/src/assets/library/font-awesome-4.7.0/scss/font-awesome.scss
@@ -0,0 +1,18 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";
diff --git a/src/assets/library/highlight/styles/agate.css b/src/assets/library/highlight/styles/agate.css
new file mode 100644
index 00000000..8d64547c
--- /dev/null
+++ b/src/assets/library/highlight/styles/agate.css
@@ -0,0 +1,108 @@
+/*!
+ * Agate by Taufik Nurrohman <https://github.com/tovic>
+ * ----------------------------------------------------
+ *
+ * #ade5fc
+ * #a2fca2
+ * #c6b4f0
+ * #d36363
+ * #fcc28c
+ * #fc9b9b
+ * #ffa
+ * #fff
+ * #333
+ * #62c8f3
+ * #888
+ *
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #333;
+  color: white;
+}
+
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-code,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-tag {
+  color: #62c8f3;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ade5fc;
+}
+
+.hljs-string,
+.hljs-bullet {
+  color: #a2fca2;
+}
+
+.hljs-type,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-quote,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #ffa;
+}
+
+.hljs-number,
+.hljs-symbol,
+.hljs-bullet {
+  color: #d36363;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #fcc28c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-code {
+  color: #888;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #c6b4f0;
+}
+
+.hljs-meta {
+  color: #fc9b9b;
+}
+
+.hljs-deletion {
+  background-color: #fc9b9b;
+  color: #333;
+}
+
+.hljs-addition {
+  background-color: #a2fca2;
+  color: #333;
+}
+
+.hljs a {
+  color: inherit;
+}
+
+.hljs a:focus,
+.hljs a:hover {
+  color: inherit;
+  text-decoration: underline;
+}
diff --git a/src/assets/library/highlight/styles/androidstudio.css b/src/assets/library/highlight/styles/androidstudio.css
new file mode 100644
index 00000000..bc8e473b
--- /dev/null
+++ b/src/assets/library/highlight/styles/androidstudio.css
@@ -0,0 +1,66 @@
+/*
+Date: 24 Fev 2015
+Author: Pedro Oliveira <kanytu@gmail . com>
+*/
+
+.hljs {
+  color: #a9b7c6;
+  background: #282b2e;
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet {
+  color: #6897BB;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-deletion {
+  color: #cc7832;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link {
+  color: #629755;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #808080;
+}
+
+.hljs-meta {
+  color: #bbb529;
+}
+
+.hljs-string,
+.hljs-attribute,
+.hljs-addition {
+  color: #6A8759;
+}
+
+.hljs-section,
+.hljs-title,
+.hljs-type {
+  color: #ffc66d;
+}
+
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #e8bf6a;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/arduino-light.css b/src/assets/library/highlight/styles/arduino-light.css
new file mode 100644
index 00000000..4b8b7fd3
--- /dev/null
+++ b/src/assets/library/highlight/styles/arduino-light.css
@@ -0,0 +1,88 @@
+/*
+
+Arduino® Light Theme - Stefania Mellai <s.mellai@arduino.cc>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #FFFFFF;
+}
+
+.hljs,
+.hljs-subst {
+  color: #434f54;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-name {
+  color: #00979D;
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #D35400;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #00979D;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #005C5F;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: rgba(149,165,166,.8);
+}
+
+.hljs-meta-keyword {
+  color: #728E00;
+}
+
+.hljs-meta {
+  color: #728E00;
+  color: #434f54;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-function {
+  color: #728E00;
+}
+
+.hljs-number {
+  color: #8A7B52;  
+}
diff --git a/src/assets/library/highlight/styles/arta.css b/src/assets/library/highlight/styles/arta.css
new file mode 100644
index 00000000..75ef3a9e
--- /dev/null
+++ b/src/assets/library/highlight/styles/arta.css
@@ -0,0 +1,73 @@
+/*
+Date: 17.V.2011
+Author: pumbur <pumbur@pumbur.net>
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #222;
+}
+
+.hljs,
+.hljs-subst {
+  color: #aaa;
+}
+
+.hljs-section {
+  color: #fff;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #444;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-regexp {
+  color: #ffcc33;
+}
+
+.hljs-number,
+.hljs-addition {
+  color: #00cc66;
+}
+
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-link {
+  color: #32aaee;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #6644aa;
+}
+
+.hljs-title,
+.hljs-variable,
+.hljs-deletion,
+.hljs-template-tag {
+  color: #bb1166;
+}
+
+.hljs-section,
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/ascetic.css b/src/assets/library/highlight/styles/ascetic.css
new file mode 100644
index 00000000..48397e88
--- /dev/null
+++ b/src/assets/library/highlight/styles/ascetic.css
@@ -0,0 +1,45 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-section,
+.hljs-addition,
+.hljs-attribute,
+.hljs-link {
+  color: #888;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #ccc;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/atelier-cave-dark.css b/src/assets/library/highlight/styles/atelier-cave-dark.css
new file mode 100644
index 00000000..65428f3b
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-cave-dark.css
@@ -0,0 +1,83 @@
+/* Base16 Atelier Cave Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Cave Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7e7887;
+}
+
+/* Atelier-Cave Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-regexp,
+.hljs-link,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #be4678;
+}
+
+/* Atelier-Cave Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #aa573c;
+}
+
+/* Atelier-Cave Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #2a9292;
+}
+
+/* Atelier-Cave Blue */
+.hljs-title,
+.hljs-section {
+  color: #576ddb;
+}
+
+/* Atelier-Cave Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #955ae7;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #19171c;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #be4678;
+}
+
+.hljs-addition {
+  background-color: #2a9292;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #19171c;
+  color: #8b8792;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-cave-light.css b/src/assets/library/highlight/styles/atelier-cave-light.css
new file mode 100644
index 00000000..b419f9fd
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-cave-light.css
@@ -0,0 +1,85 @@
+/* Base16 Atelier Cave Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Cave Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #655f6d;
+}
+
+/* Atelier-Cave Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #be4678;
+}
+
+/* Atelier-Cave Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #aa573c;
+}
+
+/* Atelier-Cave Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #2a9292;
+}
+
+/* Atelier-Cave Blue */
+.hljs-title,
+.hljs-section {
+  color: #576ddb;
+}
+
+/* Atelier-Cave Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #955ae7;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #19171c;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #be4678;
+}
+
+.hljs-addition {
+  background-color: #2a9292;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #efecf4;
+  color: #585260;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-dune-dark.css b/src/assets/library/highlight/styles/atelier-dune-dark.css
new file mode 100644
index 00000000..1684f522
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-dune-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Dune Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Dune Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #999580;
+}
+
+/* Atelier-Dune Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d73737;
+}
+
+/* Atelier-Dune Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b65611;
+}
+
+/* Atelier-Dune Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #60ac39;
+}
+
+/* Atelier-Dune Blue */
+.hljs-title,
+.hljs-section {
+  color: #6684e1;
+}
+
+/* Atelier-Dune Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b854d4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #20201d;
+  color: #a6a28c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-dune-light.css b/src/assets/library/highlight/styles/atelier-dune-light.css
new file mode 100644
index 00000000..547719de
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-dune-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Dune Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Dune Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7d7a68;
+}
+
+/* Atelier-Dune Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d73737;
+}
+
+/* Atelier-Dune Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b65611;
+}
+
+/* Atelier-Dune Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #60ac39;
+}
+
+/* Atelier-Dune Blue */
+.hljs-title,
+.hljs-section {
+  color: #6684e1;
+}
+
+/* Atelier-Dune Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b854d4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #fefbec;
+  color: #6e6b5e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-estuary-dark.css b/src/assets/library/highlight/styles/atelier-estuary-dark.css
new file mode 100644
index 00000000..a5e50718
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-estuary-dark.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Estuary Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Estuary Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #878573;
+}
+
+/* Atelier-Estuary Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ba6236;
+}
+
+/* Atelier-Estuary Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ae7313;
+}
+
+/* Atelier-Estuary Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7d9726;
+}
+
+/* Atelier-Estuary Blue */
+.hljs-title,
+.hljs-section {
+  color: #36a166;
+}
+
+/* Atelier-Estuary Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #5f9182;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #22221b;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ba6236;
+}
+
+.hljs-addition {
+  background-color: #7d9726;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #22221b;
+  color: #929181;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-estuary-light.css b/src/assets/library/highlight/styles/atelier-estuary-light.css
new file mode 100644
index 00000000..1daee5d9
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-estuary-light.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Estuary Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Estuary Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #6c6b5a;
+}
+
+/* Atelier-Estuary Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ba6236;
+}
+
+/* Atelier-Estuary Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ae7313;
+}
+
+/* Atelier-Estuary Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7d9726;
+}
+
+/* Atelier-Estuary Blue */
+.hljs-title,
+.hljs-section {
+  color: #36a166;
+}
+
+/* Atelier-Estuary Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #5f9182;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #22221b;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ba6236;
+}
+
+.hljs-addition {
+  background-color: #7d9726;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f4f3ec;
+  color: #5f5e4e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-forest-dark.css b/src/assets/library/highlight/styles/atelier-forest-dark.css
new file mode 100644
index 00000000..0ef4fae3
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-forest-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Forest Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Forest Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #9c9491;
+}
+
+/* Atelier-Forest Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #f22c40;
+}
+
+/* Atelier-Forest Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #df5320;
+}
+
+/* Atelier-Forest Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7b9726;
+}
+
+/* Atelier-Forest Blue */
+.hljs-title,
+.hljs-section {
+  color: #407ee7;
+}
+
+/* Atelier-Forest Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6666ea;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1b1918;
+  color: #a8a19f;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-forest-light.css b/src/assets/library/highlight/styles/atelier-forest-light.css
new file mode 100644
index 00000000..bbedde18
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-forest-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Forest Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Forest Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #766e6b;
+}
+
+/* Atelier-Forest Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #f22c40;
+}
+
+/* Atelier-Forest Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #df5320;
+}
+
+/* Atelier-Forest Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7b9726;
+}
+
+/* Atelier-Forest Blue */
+.hljs-title,
+.hljs-section {
+  color: #407ee7;
+}
+
+/* Atelier-Forest Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6666ea;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f1efee;
+  color: #68615e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-heath-dark.css b/src/assets/library/highlight/styles/atelier-heath-dark.css
new file mode 100644
index 00000000..fe01ff72
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-heath-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Heath Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Heath Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #9e8f9e;
+}
+
+/* Atelier-Heath Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ca402b;
+}
+
+/* Atelier-Heath Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #a65926;
+}
+
+/* Atelier-Heath Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #918b3b;
+}
+
+/* Atelier-Heath Blue */
+.hljs-title,
+.hljs-section {
+  color: #516aec;
+}
+
+/* Atelier-Heath Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #7b59c0;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1b181b;
+  color: #ab9bab;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-heath-light.css b/src/assets/library/highlight/styles/atelier-heath-light.css
new file mode 100644
index 00000000..ee43786d
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-heath-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Heath Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Heath Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #776977;
+}
+
+/* Atelier-Heath Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ca402b;
+}
+
+/* Atelier-Heath Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #a65926;
+}
+
+/* Atelier-Heath Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #918b3b;
+}
+
+/* Atelier-Heath Blue */
+.hljs-title,
+.hljs-section {
+  color: #516aec;
+}
+
+/* Atelier-Heath Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #7b59c0;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f7f3f7;
+  color: #695d69;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-lakeside-dark.css b/src/assets/library/highlight/styles/atelier-lakeside-dark.css
new file mode 100644
index 00000000..a937d3bf
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-lakeside-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Lakeside Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Lakeside Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7195a8;
+}
+
+/* Atelier-Lakeside Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d22d72;
+}
+
+/* Atelier-Lakeside Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #935c25;
+}
+
+/* Atelier-Lakeside Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #568c3b;
+}
+
+/* Atelier-Lakeside Blue */
+.hljs-title,
+.hljs-section {
+  color: #257fad;
+}
+
+/* Atelier-Lakeside Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6b6bb8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #161b1d;
+  color: #7ea2b4;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-lakeside-light.css b/src/assets/library/highlight/styles/atelier-lakeside-light.css
new file mode 100644
index 00000000..6c7e8f9e
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-lakeside-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Lakeside Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Lakeside Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #5a7b8c;
+}
+
+/* Atelier-Lakeside Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d22d72;
+}
+
+/* Atelier-Lakeside Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #935c25;
+}
+
+/* Atelier-Lakeside Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #568c3b;
+}
+
+/* Atelier-Lakeside Blue */
+.hljs-title,
+.hljs-section {
+  color: #257fad;
+}
+
+/* Atelier-Lakeside Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6b6bb8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #ebf8ff;
+  color: #516d7b;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-plateau-dark.css b/src/assets/library/highlight/styles/atelier-plateau-dark.css
new file mode 100644
index 00000000..3bb05269
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-plateau-dark.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Plateau Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Plateau Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7e7777;
+}
+
+/* Atelier-Plateau Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ca4949;
+}
+
+/* Atelier-Plateau Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b45a3c;
+}
+
+/* Atelier-Plateau Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #4b8b8b;
+}
+
+/* Atelier-Plateau Blue */
+.hljs-title,
+.hljs-section {
+  color: #7272ca;
+}
+
+/* Atelier-Plateau Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #8464c4;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #1b1818;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ca4949;
+}
+
+.hljs-addition {
+  background-color: #4b8b8b;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1b1818;
+  color: #8a8585;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-plateau-light.css b/src/assets/library/highlight/styles/atelier-plateau-light.css
new file mode 100644
index 00000000..5f0222be
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-plateau-light.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Plateau Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Plateau Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #655d5d;
+}
+
+/* Atelier-Plateau Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ca4949;
+}
+
+/* Atelier-Plateau Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b45a3c;
+}
+
+/* Atelier-Plateau Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #4b8b8b;
+}
+
+/* Atelier-Plateau Blue */
+.hljs-title,
+.hljs-section {
+  color: #7272ca;
+}
+
+/* Atelier-Plateau Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #8464c4;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #1b1818;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ca4949;
+}
+
+.hljs-addition {
+  background-color: #4b8b8b;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f4ecec;
+  color: #585050;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-savanna-dark.css b/src/assets/library/highlight/styles/atelier-savanna-dark.css
new file mode 100644
index 00000000..38f83143
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-savanna-dark.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Savanna Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Savanna Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #78877d;
+}
+
+/* Atelier-Savanna Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #b16139;
+}
+
+/* Atelier-Savanna Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #9f713c;
+}
+
+/* Atelier-Savanna Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #489963;
+}
+
+/* Atelier-Savanna Blue */
+.hljs-title,
+.hljs-section {
+  color: #478c90;
+}
+
+/* Atelier-Savanna Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #55859b;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #171c19;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #b16139;
+}
+
+.hljs-addition {
+  background-color: #489963;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #171c19;
+  color: #87928a;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-savanna-light.css b/src/assets/library/highlight/styles/atelier-savanna-light.css
new file mode 100644
index 00000000..1ccd7c68
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-savanna-light.css
@@ -0,0 +1,84 @@
+/* Base16 Atelier Savanna Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Savanna Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #5f6d64;
+}
+
+/* Atelier-Savanna Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #b16139;
+}
+
+/* Atelier-Savanna Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #9f713c;
+}
+
+/* Atelier-Savanna Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #489963;
+}
+
+/* Atelier-Savanna Blue */
+.hljs-title,
+.hljs-section {
+  color: #478c90;
+}
+
+/* Atelier-Savanna Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #55859b;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #171c19;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #b16139;
+}
+
+.hljs-addition {
+  background-color: #489963;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #ecf4ee;
+  color: #526057;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-seaside-dark.css b/src/assets/library/highlight/styles/atelier-seaside-dark.css
new file mode 100644
index 00000000..df29949c
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-seaside-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Seaside Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Seaside Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #809980;
+}
+
+/* Atelier-Seaside Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #e6193c;
+}
+
+/* Atelier-Seaside Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #87711d;
+}
+
+/* Atelier-Seaside Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #29a329;
+}
+
+/* Atelier-Seaside Blue */
+.hljs-title,
+.hljs-section {
+  color: #3d62f5;
+}
+
+/* Atelier-Seaside Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #ad2bee;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #131513;
+  color: #8ca68c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-seaside-light.css b/src/assets/library/highlight/styles/atelier-seaside-light.css
new file mode 100644
index 00000000..9d960f29
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-seaside-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Seaside Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Seaside Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #687d68;
+}
+
+/* Atelier-Seaside Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #e6193c;
+}
+
+/* Atelier-Seaside Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #87711d;
+}
+
+/* Atelier-Seaside Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #29a329;
+}
+
+/* Atelier-Seaside Blue */
+.hljs-title,
+.hljs-section {
+  color: #3d62f5;
+}
+
+/* Atelier-Seaside Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #ad2bee;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f4fbf4;
+  color: #5e6e5e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-sulphurpool-dark.css b/src/assets/library/highlight/styles/atelier-sulphurpool-dark.css
new file mode 100644
index 00000000..c2ab7938
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-sulphurpool-dark.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Sulphurpool Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Sulphurpool Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #898ea4;
+}
+
+/* Atelier-Sulphurpool Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #c94922;
+}
+
+/* Atelier-Sulphurpool Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #c76b29;
+}
+
+/* Atelier-Sulphurpool Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #ac9739;
+}
+
+/* Atelier-Sulphurpool Blue */
+.hljs-title,
+.hljs-section {
+  color: #3d8fd1;
+}
+
+/* Atelier-Sulphurpool Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6679cc;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #202746;
+  color: #979db4;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atelier-sulphurpool-light.css b/src/assets/library/highlight/styles/atelier-sulphurpool-light.css
new file mode 100644
index 00000000..96c47d08
--- /dev/null
+++ b/src/assets/library/highlight/styles/atelier-sulphurpool-light.css
@@ -0,0 +1,69 @@
+/* Base16 Atelier Sulphurpool Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Sulphurpool Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #6b7394;
+}
+
+/* Atelier-Sulphurpool Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #c94922;
+}
+
+/* Atelier-Sulphurpool Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #c76b29;
+}
+
+/* Atelier-Sulphurpool Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #ac9739;
+}
+
+/* Atelier-Sulphurpool Blue */
+.hljs-title,
+.hljs-section {
+  color: #3d8fd1;
+}
+
+/* Atelier-Sulphurpool Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6679cc;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f5f7ff;
+  color: #5e6687;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/atom-one-dark.css b/src/assets/library/highlight/styles/atom-one-dark.css
new file mode 100644
index 00000000..1616aafe
--- /dev/null
+++ b/src/assets/library/highlight/styles/atom-one-dark.css
@@ -0,0 +1,96 @@
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/src/assets/library/highlight/styles/atom-one-light.css b/src/assets/library/highlight/styles/atom-one-light.css
new file mode 100644
index 00000000..d5bd1d2a
--- /dev/null
+++ b/src/assets/library/highlight/styles/atom-one-light.css
@@ -0,0 +1,96 @@
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #383a42;
+  background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #a626a4;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e45649;
+}
+
+.hljs-literal {
+  color: #0184bb;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #c18401;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #986801;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #4078f2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/src/assets/library/highlight/styles/brown-paper.css b/src/assets/library/highlight/styles/brown-paper.css
new file mode 100644
index 00000000..f0197b92
--- /dev/null
+++ b/src/assets/library/highlight/styles/brown-paper.css
@@ -0,0 +1,64 @@
+/*
+
+Brown Paper style from goldblog.com.ua (c) Zaripov Yura <yur4ik7@ukr.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background:#b7a68e url(./brown-papersq.png);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color:#005599;
+  font-weight:bold;
+}
+
+.hljs,
+.hljs-subst {
+  color: #363c69;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-link,
+.hljs-name {
+  color: #2c009f;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #802022;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/brown-papersq.png.REMOVED.git-id b/src/assets/library/highlight/styles/brown-papersq.png.REMOVED.git-id
new file mode 100644
index 00000000..881dda64
--- /dev/null
+++ b/src/assets/library/highlight/styles/brown-papersq.png.REMOVED.git-id
@@ -0,0 +1 @@
+3813903dbf9fa7b1fb5bd11d9534c06667d9056f
\ No newline at end of file
diff --git a/src/assets/library/highlight/styles/codepen-embed.css b/src/assets/library/highlight/styles/codepen-embed.css
new file mode 100644
index 00000000..195c4a07
--- /dev/null
+++ b/src/assets/library/highlight/styles/codepen-embed.css
@@ -0,0 +1,60 @@
+/*
+  codepen.io Embed Theme
+  Author: Justin Perry <http://github.com/ourmaninamsterdam>
+  Original theme - https://github.com/chriskempson/tomorrow-theme
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #222;
+  color: #fff;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #777;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-regexp,
+.hljs-meta,
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-params,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-deletion {
+  color: #ab875d;
+}
+
+.hljs-section,
+.hljs-title,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-type,
+.hljs-attribute {
+  color: #9b869b;
+}
+
+.hljs-string,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #8f9c6c;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/color-brewer.css b/src/assets/library/highlight/styles/color-brewer.css
new file mode 100644
index 00000000..7934d986
--- /dev/null
+++ b/src/assets/library/highlight/styles/color-brewer.css
@@ -0,0 +1,71 @@
+/*
+
+Colorbrewer theme
+Original: https://github.com/mbostock/colorbrewer-theme (c) Mike Bostock <mike@ocks.org>
+Ported by Fabrício Tavares de Oliveira
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+}
+
+.hljs,
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-symbol,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #756bb1;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #636363;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-bullet,
+.hljs-link {
+  color: #31a354;
+}
+
+.hljs-deletion,
+.hljs-variable {
+  color: #88f;
+}
+
+
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-doctag,
+.hljs-type,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-strong {
+  color: #3182bd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-attribute {
+  color: #e6550d;
+}
diff --git a/src/assets/library/highlight/styles/darcula.css b/src/assets/library/highlight/styles/darcula.css
new file mode 100644
index 00000000..be182d0b
--- /dev/null
+++ b/src/assets/library/highlight/styles/darcula.css
@@ -0,0 +1,77 @@
+/*
+
+Darcula color scheme from the JetBrains family of IDEs
+
+*/
+
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #2b2b2b;
+}
+
+.hljs {
+  color: #bababa;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-link,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #6896ba;
+}
+
+.hljs-code,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-attribute,
+.hljs-name,
+.hljs-variable {
+  color: #cb7832;
+}
+
+.hljs-params {
+  color: #b9b9b9;
+}
+
+.hljs-string {
+  color: #6a8759;
+}
+
+.hljs-subst,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-symbol,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #e0c46c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #7f7f7f;
+}
diff --git a/src/assets/library/highlight/styles/dark.css b/src/assets/library/highlight/styles/dark.css
new file mode 100644
index 00000000..b4724f5f
--- /dev/null
+++ b/src/assets/library/highlight/styles/dark.css
@@ -0,0 +1,63 @@
+/*
+
+Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #444;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-section,
+.hljs-link {
+  color: white;
+}
+
+.hljs,
+.hljs-subst {
+  color: #ddd;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-name,
+.hljs-type,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #d88;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #777;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/darkula.css b/src/assets/library/highlight/styles/darkula.css
new file mode 100644
index 00000000..f4646c3c
--- /dev/null
+++ b/src/assets/library/highlight/styles/darkula.css
@@ -0,0 +1,6 @@
+/*
+  Deprecated due to a typo in the name and left here for compatibility purpose only.
+  Please use darcula.css instead.
+*/
+
+@import url('darcula.css');
diff --git a/src/assets/library/highlight/styles/default.css b/src/assets/library/highlight/styles/default.css
new file mode 100644
index 00000000..f1bfade3
--- /dev/null
+++ b/src/assets/library/highlight/styles/default.css
@@ -0,0 +1,99 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0;
+}
+
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+  color: #78A960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #397300;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/docco.css b/src/assets/library/highlight/styles/docco.css
new file mode 100644
index 00000000..db366be3
--- /dev/null
+++ b/src/assets/library/highlight/styles/docco.css
@@ -0,0 +1,97 @@
+/*
+Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine (@thingsinjars)
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #000;
+  background: #f8f8ff;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #408080;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-subst {
+  color: #954121;
+}
+
+.hljs-number {
+  color: #40a070;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #219161;
+}
+
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-section,
+.hljs-type {
+  color: #19469d;
+}
+
+.hljs-params {
+  color: #00f;
+}
+
+.hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #008080;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #b68;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/dracula.css b/src/assets/library/highlight/styles/dracula.css
new file mode 100644
index 00000000..d591db68
--- /dev/null
+++ b/src/assets/library/highlight/styles/dracula.css
@@ -0,0 +1,76 @@
+/*
+
+Dracula Theme v1.2.0
+
+https://github.com/zenorocha/dracula-theme
+
+Copyright 2015, All rights reserved
+
+Code licensed under the MIT license
+http://zenorocha.mit-license.org
+
+@author Éverton Ribeiro <nuxlli@gmail.com>
+@author Zeno Rocha <hi@zenorocha.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-function .hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-name,
+.hljs-type,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/far.css b/src/assets/library/highlight/styles/far.css
new file mode 100644
index 00000000..2b3f87b5
--- /dev/null
+++ b/src/assets/library/highlight/styles/far.css
@@ -0,0 +1,71 @@
+/*
+
+FAR Style (c) MajestiC <majestic2k@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #000080;
+}
+
+.hljs,
+.hljs-subst {
+  color: #0ff;
+}
+
+.hljs-string,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #ff0;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-type,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-variable {
+  color: #fff;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-doctag,
+.hljs-deletion {
+  color: #888;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: #0f0;
+}
+
+.hljs-meta {
+  color: #008080;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/foundation.css b/src/assets/library/highlight/styles/foundation.css
new file mode 100644
index 00000000..f1fe64b3
--- /dev/null
+++ b/src/assets/library/highlight/styles/foundation.css
@@ -0,0 +1,88 @@
+/*
+Description: Foundation 4 docs style for highlight.js
+Author: Dan Allen <dan.j.allen@gmail.com>
+Website: http://foundation.zurb.com/docs/
+Version: 1.0
+Date: 2013-04-02
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #eee; color: black;
+}
+
+.hljs-link,
+.hljs-emphasis,
+.hljs-attribute,
+.hljs-addition {
+  color: #070;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong,
+.hljs-string,
+.hljs-deletion {
+  color: #d14;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-quote,
+.hljs-comment {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-section,
+.hljs-title {
+  color: #900;
+}
+
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #458;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #336699;
+}
+
+.hljs-bullet {
+  color: #997700;
+}
+
+.hljs-meta {
+  color: #3344bb;
+}
+
+.hljs-code,
+.hljs-number,
+.hljs-literal,
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #099;
+}
+
+.hljs-regexp {
+  background-color: #fff0ff;
+  color: #880088;
+}
+
+.hljs-symbol {
+  color: #990073;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #007700;
+}
diff --git a/src/assets/library/highlight/styles/github-gist.css b/src/assets/library/highlight/styles/github-gist.css
new file mode 100644
index 00000000..155f0b91
--- /dev/null
+++ b/src/assets/library/highlight/styles/github-gist.css
@@ -0,0 +1,71 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/src/assets/library/highlight/styles/github.css b/src/assets/library/highlight/styles/github.css
new file mode 100644
index 00000000..791932b8
--- /dev/null
+++ b/src/assets/library/highlight/styles/github.css
@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/googlecode.css b/src/assets/library/highlight/styles/googlecode.css
new file mode 100644
index 00000000..884ad635
--- /dev/null
+++ b/src/assets/library/highlight/styles/googlecode.css
@@ -0,0 +1,89 @@
+/*
+
+Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #800;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-title,
+.hljs-name {
+  color: #008;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660;
+}
+
+.hljs-string,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-regexp {
+  color: #080;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-meta,
+.hljs-number,
+.hljs-link {
+  color: #066;
+}
+
+.hljs-title,
+.hljs-doctag,
+.hljs-type,
+.hljs-attr,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-params {
+  color: #606;
+}
+
+.hljs-attribute,
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #9B703F
+}
+
+.hljs-addition {
+  background-color: #baeeba;
+}
+
+.hljs-deletion {
+  background-color: #ffc8bd;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/grayscale.css b/src/assets/library/highlight/styles/grayscale.css
new file mode 100644
index 00000000..5376f340
--- /dev/null
+++ b/src/assets/library/highlight/styles/grayscale.css
@@ -0,0 +1,101 @@
+/*
+
+grayscale style (c) MY Sun <simonmysun@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #fff;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #777;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal {
+  color: #777;
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-formula {
+  color: #333;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVQIW2O8e/fufwYGBgZBQUEQxcCIIfDu3Tuwivfv30NUoAsAALHpFMMLqZlPAAAAAElFTkSuQmCC) repeat;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #000;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-name {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-tag {
+  color: #333;
+}
+
+.hljs-regexp {
+    color: #333;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAN37979r6yszIgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQDexSef15DBCwAAAABJRU5ErkJggg==) repeat;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #000;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAO7d+/+z4gsBhJwdXVlhAvCBECKwIIwAbhKZBUwBQA6hBpm5efZsgAAAABJRU5ErkJggg==) repeat;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #000;
+  text-decoration: underline;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: #fff;
+  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAE0lEQVQIW2MMDQ39zzhz5kwIAQAyxweWgUHd1AAAAABJRU5ErkJggg==) repeat;
+}
+
+.hljs-addition {
+  color: #000;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALUlEQVQYV2N89+7dfwYk8P79ewZBQUFkIQZGOiu6e/cuiptQHAPl0NtNxAQBAM97Oejj3Dg7AAAAAElFTkSuQmCC) repeat;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/gruvbox-dark.css b/src/assets/library/highlight/styles/gruvbox-dark.css
new file mode 100644
index 00000000..f563811a
--- /dev/null
+++ b/src/assets/library/highlight/styles/gruvbox-dark.css
@@ -0,0 +1,108 @@
+/*
+
+Gruvbox style (dark) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox)
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282828;
+}
+
+.hljs,
+.hljs-subst {
+  color: #ebdbb2;
+}
+
+/* Gruvbox Red */
+.hljs-deletion,
+.hljs-formula,
+.hljs-keyword,
+.hljs-link,
+.hljs-selector-tag {
+  color: #fb4934;
+}
+
+/* Gruvbox Blue */
+.hljs-built_in,
+.hljs-emphasis,
+.hljs-name,
+.hljs-quote,
+.hljs-strong,
+.hljs-title,
+.hljs-variable {
+  color: #83a598;
+}
+
+/* Gruvbox Yellow */
+.hljs-attr,
+.hljs-params,
+.hljs-template-tag,
+.hljs-type {
+  color: #fabd2f;
+}
+
+/* Gruvbox Purple */
+.hljs-builtin-name,
+.hljs-doctag,
+.hljs-literal,
+.hljs-number {
+  color: #8f3f71;
+}
+
+/* Gruvbox Orange */
+.hljs-code,
+.hljs-meta,
+.hljs-regexp,
+.hljs-selector-id,
+.hljs-template-variable {
+  color: #fe8019;
+}
+
+/* Gruvbox Green */
+.hljs-addition,
+.hljs-meta-string,
+.hljs-section,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-string,
+.hljs-symbol {
+  color: #b8bb26;
+}
+
+/* Gruvbox Aqua */
+.hljs-attribute,
+.hljs-bullet,
+.hljs-class,
+.hljs-function,
+.hljs-function .hljs-keyword,
+.hljs-meta-keyword,
+.hljs-selector-pseudo,
+.hljs-tag {
+  color: #8ec07c;
+}
+
+/* Gruvbox Gray */
+.hljs-comment {
+  color: #928374;
+}
+
+/* Gruvbox Purple */
+.hljs-link_label,
+.hljs-literal,
+.hljs-number {
+  color: #d3869b;
+}
+
+.hljs-comment,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-section,
+.hljs-strong,
+.hljs-tag {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/gruvbox-light.css b/src/assets/library/highlight/styles/gruvbox-light.css
new file mode 100644
index 00000000..ff45468e
--- /dev/null
+++ b/src/assets/library/highlight/styles/gruvbox-light.css
@@ -0,0 +1,108 @@
+/*
+
+Gruvbox style (light) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox)
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fbf1c7;
+}
+
+.hljs,
+.hljs-subst {
+  color: #3c3836;
+}
+
+/* Gruvbox Red */
+.hljs-deletion,
+.hljs-formula,
+.hljs-keyword,
+.hljs-link,
+.hljs-selector-tag {
+  color: #9d0006;
+}
+
+/* Gruvbox Blue */
+.hljs-built_in,
+.hljs-emphasis,
+.hljs-name,
+.hljs-quote,
+.hljs-strong,
+.hljs-title,
+.hljs-variable {
+  color: #076678;
+}
+
+/* Gruvbox Yellow */
+.hljs-attr,
+.hljs-params,
+.hljs-template-tag,
+.hljs-type {
+  color: #b57614;
+}
+
+/* Gruvbox Purple */
+.hljs-builtin-name,
+.hljs-doctag,
+.hljs-literal,
+.hljs-number {
+  color: #8f3f71;
+}
+
+/* Gruvbox Orange */
+.hljs-code,
+.hljs-meta,
+.hljs-regexp,
+.hljs-selector-id,
+.hljs-template-variable {
+  color: #af3a03;
+}
+
+/* Gruvbox Green */
+.hljs-addition,
+.hljs-meta-string,
+.hljs-section,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-string,
+.hljs-symbol {
+  color: #79740e;
+}
+
+/* Gruvbox Aqua */
+.hljs-attribute,
+.hljs-bullet,
+.hljs-class,
+.hljs-function,
+.hljs-function .hljs-keyword,
+.hljs-meta-keyword,
+.hljs-selector-pseudo,
+.hljs-tag {
+  color: #427b58;
+}
+
+/* Gruvbox Gray */
+.hljs-comment {
+  color: #928374;
+}
+
+/* Gruvbox Purple */
+.hljs-link_label,
+.hljs-literal,
+.hljs-number {
+  color: #8f3f71;
+}
+
+.hljs-comment,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-section,
+.hljs-strong,
+.hljs-tag {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/hopscotch.css b/src/assets/library/highlight/styles/hopscotch.css
new file mode 100644
index 00000000..32e60d23
--- /dev/null
+++ b/src/assets/library/highlight/styles/hopscotch.css
@@ -0,0 +1,83 @@
+/*
+ * Hopscotch
+ * by Jan T. Sott
+ * https://github.com/idleberg/Hopscotch
+ *
+ * This work is licensed under the Creative Commons CC0 1.0 Universal License
+ */
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #989498;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-link,
+.hljs-deletion {
+  color: #dd464c;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #fd8b19;
+}
+
+/* Yellow */
+.hljs-class .hljs-title {
+  color: #fdcc59;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #8fc13e;
+}
+
+/* Aqua */
+.hljs-meta {
+  color: #149b93;
+}
+
+/* Blue */
+.hljs-function,
+.hljs-section,
+.hljs-title {
+  color: #1290bf;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #c85e7c;
+}
+
+.hljs {
+  display: block;
+  background: #322931;
+  color: #b9b5b8;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/hybrid.css b/src/assets/library/highlight/styles/hybrid.css
new file mode 100644
index 00000000..29735a18
--- /dev/null
+++ b/src/assets/library/highlight/styles/hybrid.css
@@ -0,0 +1,102 @@
+/*
+
+vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
+
+*/
+
+/*background color*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1d1f21;
+}
+
+/*selection color*/
+.hljs::selection,
+.hljs span::selection {
+  background: #373b41;
+}
+
+.hljs::-moz-selection,
+.hljs span::-moz-selection {
+  background: #373b41;
+}
+
+/*foreground color*/
+.hljs {
+  color: #c5c8c6;
+}
+
+/*color: fg_yellow*/
+.hljs-title,
+.hljs-name {
+  color: #f0c674;
+}
+
+/*color: fg_comment*/
+.hljs-comment,
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: #707880;
+}
+
+/*color: fg_red*/
+.hljs-number,
+.hljs-symbol,
+.hljs-literal,
+.hljs-deletion,
+.hljs-link {
+ color: #cc6666
+}
+
+/*color: fg_green*/
+.hljs-string,
+.hljs-doctag,
+.hljs-addition,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #b5bd68;
+}
+
+/*color: fg_purple*/
+.hljs-attribute,
+.hljs-code,
+.hljs-selector-id {
+ color: #b294bb;
+}
+
+/*color: fg_blue*/
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-bullet,
+.hljs-tag {
+ color: #81a2be;
+}
+
+/*color: fg_aqua*/
+.hljs-subst,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #8abeb7;
+}
+
+/*color: fg_orange*/
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-quote,
+.hljs-section,
+.hljs-selector-class {
+  color: #de935f;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/idea.css b/src/assets/library/highlight/styles/idea.css
new file mode 100644
index 00000000..3bf1892b
--- /dev/null
+++ b/src/assets/library/highlight/styles/idea.css
@@ -0,0 +1,97 @@
+/*
+
+Intellij Idea-like styling (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #000;
+  background: #fff;
+}
+
+.hljs-subst,
+.hljs-title {
+  font-weight: normal;
+  color: #000;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #808080;
+  font-style: italic;
+}
+
+.hljs-meta {
+  color: #808000;
+}
+
+.hljs-tag {
+  background: #efefef;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-literal,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type,
+.hljs-selector-id,
+.hljs-selector-class {
+  font-weight: bold;
+  color: #000080;
+}
+
+.hljs-attribute,
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: bold;
+  color: #0000ff;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: normal;
+}
+
+.hljs-string {
+  color: #008000;
+  font-weight: bold;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-formula {
+  color: #000;
+  background: #d0eded;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  text-decoration: underline;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660e7a;
+}
+
+.hljs-addition {
+  background: #baeeba;
+}
+
+.hljs-deletion {
+  background: #ffc8bd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/ir-black.css b/src/assets/library/highlight/styles/ir-black.css
new file mode 100644
index 00000000..bd4c755e
--- /dev/null
+++ b/src/assets/library/highlight/styles/ir-black.css
@@ -0,0 +1,73 @@
+/*
+  IR_Black style (c) Vasily Mikhailitchenko <vaskas@programica.ru>
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #000;
+  color: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #7c7c7c;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag,
+.hljs-name {
+  color: #96cbfe;
+}
+
+.hljs-attribute,
+.hljs-selector-id {
+  color: #ffffb6;
+}
+
+.hljs-string,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition {
+  color: #a8ff60;
+}
+
+.hljs-subst {
+  color: #daefa3;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #e9c062;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-doctag {
+  color: #ffffb6;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-literal {
+  color: #c6c5fe;
+}
+
+.hljs-number,
+.hljs-deletion {
+  color:#ff73fd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/kimbie.dark.css b/src/assets/library/highlight/styles/kimbie.dark.css
new file mode 100644
index 00000000..d139cb5d
--- /dev/null
+++ b/src/assets/library/highlight/styles/kimbie.dark.css
@@ -0,0 +1,74 @@
+/*
+    Name:     Kimbie (dark)
+    Author:   Jan T. Sott
+    License:  Creative Commons Attribution-ShareAlike 4.0 Unported License
+    URL:      https://github.com/idleberg/Kimbie-highlight.js
+*/
+
+/* Kimbie Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #d6baad;
+}
+
+/* Kimbie Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-meta {
+  color: #dc3958;
+}
+
+/* Kimbie Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-deletion,
+.hljs-link {
+  color: #f79a32;
+}
+
+/* Kimbie Yellow */
+.hljs-title,
+.hljs-section,
+.hljs-attribute {
+  color: #f06431;
+}
+
+/* Kimbie Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #889b4a;
+}
+
+/* Kimbie Purple */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-function {
+  color: #98676a;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #221a0f;
+  color: #d3af86;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/kimbie.light.css b/src/assets/library/highlight/styles/kimbie.light.css
new file mode 100644
index 00000000..04ff6ed3
--- /dev/null
+++ b/src/assets/library/highlight/styles/kimbie.light.css
@@ -0,0 +1,74 @@
+/*
+    Name:     Kimbie (light)
+    Author:   Jan T. Sott
+    License:  Creative Commons Attribution-ShareAlike 4.0 Unported License
+    URL:      https://github.com/idleberg/Kimbie-highlight.js
+*/
+
+/* Kimbie Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #a57a4c;
+}
+
+/* Kimbie Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-meta {
+  color: #dc3958;
+}
+
+/* Kimbie Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-deletion,
+.hljs-link {
+  color: #f79a32;
+}
+
+/* Kimbie Yellow */
+.hljs-title,
+.hljs-section,
+.hljs-attribute {
+  color: #f06431;
+}
+
+/* Kimbie Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #889b4a;
+}
+
+/* Kimbie Purple */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-function {
+  color: #98676a;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #fbebd4;
+  color: #84613d;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/magula.css b/src/assets/library/highlight/styles/magula.css
new file mode 100644
index 00000000..44dee5e8
--- /dev/null
+++ b/src/assets/library/highlight/styles/magula.css
@@ -0,0 +1,70 @@
+/*
+Description: Magula style for highligh.js
+Author: Ruslan Keba <rukeba@gmail.com>
+Website: http://rukeba.com/
+Version: 1.0
+Date: 2009-01-03
+Music: Aphex Twin / Xtal
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background-color: #f4f4f4;
+}
+
+.hljs,
+.hljs-subst {
+  color: black;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #050;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #777;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-type,
+.hljs-link {
+  color: #800;
+}
+
+.hljs-deletion,
+.hljs-meta {
+  color: #00e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-tag,
+.hljs-name {
+  font-weight: bold;
+  color: navy;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/mono-blue.css b/src/assets/library/highlight/styles/mono-blue.css
new file mode 100644
index 00000000..884c97c7
--- /dev/null
+++ b/src/assets/library/highlight/styles/mono-blue.css
@@ -0,0 +1,59 @@
+/*
+  Five-color theme from a single blue hue.
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #eaeef3;
+}
+
+.hljs {
+  color: #00193a;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: #738191;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-addition,
+.hljs-tag,
+.hljs-quote,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #0048ab;
+}
+
+.hljs-meta,
+.hljs-subst,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-attribute,
+.hljs-deletion,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-bullet {
+  color: #4c81c9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/monokai-sublime.css b/src/assets/library/highlight/styles/monokai-sublime.css
new file mode 100644
index 00000000..2864170d
--- /dev/null
+++ b/src/assets/library/highlight/styles/monokai-sublime.css
@@ -0,0 +1,83 @@
+/*
+
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #23241f;
+}
+
+.hljs,
+.hljs-tag,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-attr {
+  color: #f92672;
+}
+
+.hljs-symbol,
+.hljs-attribute {
+  color: #66d9ef;
+}
+
+.hljs-params,
+.hljs-class .hljs-title {
+  color: #f8f8f2;
+}
+
+.hljs-string,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+  color: #e6db74;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
diff --git a/src/assets/library/highlight/styles/monokai.css b/src/assets/library/highlight/styles/monokai.css
new file mode 100644
index 00000000..775d53f9
--- /dev/null
+++ b/src/assets/library/highlight/styles/monokai.css
@@ -0,0 +1,70 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #272822; color: #ddd;
+}
+
+.hljs-tag,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-name {
+  color: #f92672;
+}
+
+.hljs-code {
+  color: #66d9ef;
+}
+
+.hljs-class .hljs-title {
+  color: white;
+}
+
+.hljs-attribute,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db;
+}
+
+.hljs-string,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/obsidian.css b/src/assets/library/highlight/styles/obsidian.css
new file mode 100644
index 00000000..356630fa
--- /dev/null
+++ b/src/assets/library/highlight/styles/obsidian.css
@@ -0,0 +1,88 @@
+/**
+ * Obsidian style
+ * ported by Alexander Marenin (http://github.com/ioncreature)
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282b2e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-selector-id {
+  color: #93c763;
+}
+
+.hljs-number {
+  color: #ffcd22;
+}
+
+.hljs {
+  color: #e0e2e4;
+}
+
+.hljs-attribute {
+  color: #668bb0;
+}
+
+.hljs-code,
+.hljs-class .hljs-title,
+.hljs-section {
+  color: white;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #d39745;
+}
+
+.hljs-meta {
+  color: #557182;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-bullet,
+.hljs-subst,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #8cbbad;
+}
+
+.hljs-string,
+.hljs-symbol {
+  color: #ec7600;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #818e96;
+}
+
+.hljs-selector-class {
+  color: #A082BD
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/ocean.css b/src/assets/library/highlight/styles/ocean.css
new file mode 100644
index 00000000..5901581b
--- /dev/null
+++ b/src/assets/library/highlight/styles/ocean.css
@@ -0,0 +1,74 @@
+/* Ocean Dark Theme */
+/* https://github.com/gavsiu */
+/* Original theme - https://github.com/chriskempson/base16 */
+
+/* Ocean Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #65737e;
+}
+
+/* Ocean Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #bf616a;
+}
+
+/* Ocean Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #d08770;
+}
+
+/* Ocean Yellow */
+.hljs-attribute {
+  color: #ebcb8b;
+}
+
+/* Ocean Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #a3be8c;
+}
+
+/* Ocean Blue */
+.hljs-title,
+.hljs-section {
+  color: #8fa1b3;
+}
+
+/* Ocean Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b48ead;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #2b303b;
+  color: #c0c5ce;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/paraiso-dark.css b/src/assets/library/highlight/styles/paraiso-dark.css
new file mode 100644
index 00000000..e7292401
--- /dev/null
+++ b/src/assets/library/highlight/styles/paraiso-dark.css
@@ -0,0 +1,72 @@
+/*
+    Paraíso (dark)
+    Created by Jan T. Sott (http://github.com/idleberg)
+    Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
+*/
+
+/* Paraíso Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #8d8687;
+}
+
+/* Paraíso Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-link,
+.hljs-meta {
+  color: #ef6155;
+}
+
+/* Paraíso Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-deletion {
+  color: #f99b15;
+}
+
+/* Paraíso Yellow */
+.hljs-title,
+.hljs-section,
+.hljs-attribute {
+  color: #fec418;
+}
+
+/* Paraíso Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #48b685;
+}
+
+/* Paraíso Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #815ba4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #2f1e2e;
+  color: #a39e9b;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/paraiso-light.css b/src/assets/library/highlight/styles/paraiso-light.css
new file mode 100644
index 00000000..944857cd
--- /dev/null
+++ b/src/assets/library/highlight/styles/paraiso-light.css
@@ -0,0 +1,72 @@
+/*
+    Paraíso (light)
+    Created by Jan T. Sott (http://github.com/idleberg)
+    Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
+*/
+
+/* Paraíso Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #776e71;
+}
+
+/* Paraíso Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-link,
+.hljs-meta {
+  color: #ef6155;
+}
+
+/* Paraíso Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-deletion {
+  color: #f99b15;
+}
+
+/* Paraíso Yellow */
+.hljs-title,
+.hljs-section,
+.hljs-attribute {
+  color: #fec418;
+}
+
+/* Paraíso Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #48b685;
+}
+
+/* Paraíso Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #815ba4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #e7e9db;
+  color: #4f424c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/pojoaque.css b/src/assets/library/highlight/styles/pojoaque.css
new file mode 100644
index 00000000..2e07847b
--- /dev/null
+++ b/src/assets/library/highlight/styles/pojoaque.css
@@ -0,0 +1,83 @@
+/*
+
+Pojoaque Style by Jason Tate
+http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
+Based on Solarized Style from http://ethanschoonover.com/solarized
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #dccf8f;
+  background: url(./pojoaque.jpg) repeat scroll left top #181914;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-addition {
+  color: #b64926;
+}
+
+.hljs-number,
+.hljs-string,
+.hljs-doctag,
+.hljs-regexp {
+  color: #468966;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-name {
+  color: #ffb03b;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-tag {
+  color: #b58900;
+}
+
+.hljs-attribute {
+  color: #b89859;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-subst,
+.hljs-meta {
+  color: #cb4b16;
+}
+
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d3a60c;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/purebasic.css b/src/assets/library/highlight/styles/purebasic.css
new file mode 100644
index 00000000..5ce9b9e0
--- /dev/null
+++ b/src/assets/library/highlight/styles/purebasic.css
@@ -0,0 +1,96 @@
+/*
+
+PureBASIC native IDE style ( version 1.0 - April 2016 )
+
+by Tristano Ajmone <tajmone@gmail.com>
+
+Public Domain
+
+NOTE_1:	PureBASIC code syntax highlighting only applies the following classes:
+			.hljs-comment
+			.hljs-function
+			.hljs-keywords
+			.hljs-string
+			.hljs-symbol
+
+		Other classes are added here for the benefit of styling other languages with the look and feel of PureBASIC native IDE style.
+		If you need to customize a stylesheet for PureBASIC only, remove all non-relevant classes -- PureBASIC-related classes are followed by
+		a "--- used for PureBASIC ... ---" comment on same line.
+
+NOTE_2:	Color names provided in comments were derived using "Name that Color" online tool:
+			http://chir.ag/projects/name-that-color
+*/
+
+.hljs { /* Common set of rules required by highlight.js (don'r remove!) */
+	display: block;
+	overflow-x: auto;
+	padding: 0.5em;
+	background: #FFFFDF; /* Half and Half (approx.) */
+/* --- Uncomment to add PureBASIC native IDE styled font!
+	font-family: Consolas;
+*/
+}
+
+.hljs, /* --- used for PureBASIC base color --- */
+.hljs-type,  /* --- used for PureBASIC Procedures return type --- */
+.hljs-function, /* --- used for wrapping PureBASIC Procedures definitions --- */
+.hljs-name,
+.hljs-number,
+.hljs-attr,
+.hljs-params,
+.hljs-subst {
+	color: #000000; /* Black */
+}
+
+.hljs-comment, /* --- used for PureBASIC Comments --- */
+.hljs-regexp,
+.hljs-section,
+.hljs-selector-pseudo,
+.hljs-addition {
+	color: #00AAAA; /* Persian Green (approx.) */
+}
+
+.hljs-title, /* --- used for PureBASIC Procedures Names --- */
+.hljs-tag,
+.hljs-variable,
+.hljs-code  {
+	color: #006666; /* Blue Stone (approx.) */
+}
+
+.hljs-keyword, /* --- used for PureBASIC Keywords --- */
+.hljs-class,
+.hljs-meta-keyword,
+.hljs-selector-class,
+.hljs-built_in,
+.hljs-builtin-name {
+	color: #006666; /* Blue Stone (approx.) */
+	font-weight: bold;
+}
+
+.hljs-string, /* --- used for PureBASIC Strings --- */
+.hljs-selector-attr {
+	color: #0080FF; /* Azure Radiance (approx.) */
+}
+
+.hljs-symbol, /* --- used for PureBASIC Constants --- */
+.hljs-link,
+.hljs-deletion,
+.hljs-attribute {
+	color: #924B72; /* Cannon Pink (approx.) */
+}
+
+.hljs-meta,
+.hljs-literal,
+.hljs-selector-id {
+	color: #924B72; /* Cannon Pink (approx.) */
+	font-weight: bold;
+}
+
+.hljs-strong,
+.hljs-name {
+	font-weight: bold;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/qtcreator_dark.css b/src/assets/library/highlight/styles/qtcreator_dark.css
new file mode 100644
index 00000000..7aa56a36
--- /dev/null
+++ b/src/assets/library/highlight/styles/qtcreator_dark.css
@@ -0,0 +1,83 @@
+/*
+
+Qt Creator dark color scheme
+
+*/
+
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #000000;
+}
+
+.hljs,
+.hljs-subst,
+.hljs-tag,
+.hljs-title {
+  color: #aaaaaa;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #ff55ff;
+}
+
+.hljs-code
+.hljs-selector-class {
+  color: #aaaaff;
+}
+
+.hljs-emphasis,
+.hljs-stronge,
+.hljs-type {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-function,
+.hljs-section,
+.hljs-symbol,
+.hljs-name {
+  color: #ffff55;
+}
+
+.hljs-attribute {
+  color: #ff5555;
+}
+
+.hljs-variable,
+.hljs-params,
+.hljs-class .hljs-title {
+  color: #8888ff;
+}
+
+.hljs-string,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition,
+.hljs-link {
+  color: #ff55ff;
+}
+
+.hljs-comment,
+.hljs-meta,
+.hljs-deletion {
+  color: #55ffff;
+}
diff --git a/src/assets/library/highlight/styles/qtcreator_light.css b/src/assets/library/highlight/styles/qtcreator_light.css
new file mode 100644
index 00000000..1efa2c66
--- /dev/null
+++ b/src/assets/library/highlight/styles/qtcreator_light.css
@@ -0,0 +1,83 @@
+/*
+
+Qt Creator light color scheme
+
+*/
+
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #ffffff;
+}
+
+.hljs,
+.hljs-subst,
+.hljs-tag,
+.hljs-title {
+  color: #000000;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #000000;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #000080;
+}
+
+.hljs-code
+.hljs-selector-class {
+  color: #800080;
+}
+
+.hljs-emphasis,
+.hljs-stronge,
+.hljs-type {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-function,
+.hljs-section,
+.hljs-symbol,
+.hljs-name {
+  color: #808000;
+}
+
+.hljs-attribute {
+  color: #800000;
+}
+
+.hljs-variable,
+.hljs-params,
+.hljs-class .hljs-title {
+  color: #0055AF;
+}
+
+.hljs-string,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition,
+.hljs-link {
+  color: #008000;
+}
+
+.hljs-comment,
+.hljs-meta,
+.hljs-deletion {
+  color: #008000;
+}
diff --git a/src/assets/library/highlight/styles/railscasts.css b/src/assets/library/highlight/styles/railscasts.css
new file mode 100644
index 00000000..008cdc5b
--- /dev/null
+++ b/src/assets/library/highlight/styles/railscasts.css
@@ -0,0 +1,106 @@
+/*
+
+Railscasts-like style (c) Visoft, Inc. (Damien White)
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #232323;
+  color: #e6e1dc;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #bc9458;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #c26230;
+}
+
+.hljs-string,
+.hljs-number,
+.hljs-regexp,
+.hljs-variable,
+.hljs-template-variable {
+  color: #a5c261;
+}
+
+.hljs-subst {
+  color: #519f50;
+}
+
+.hljs-tag,
+.hljs-name {
+  color: #e8bf6a;
+}
+
+.hljs-type {
+  color: #da4939;
+}
+
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-attr,
+.hljs-link {
+  color: #6d9cbe;
+}
+
+.hljs-params {
+  color: #d0d0ff;
+}
+
+.hljs-attribute {
+  color: #cda869;
+}
+
+.hljs-meta {
+  color: #9b859d;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #ffc66d;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  color: #e6e1dc;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-selector-class {
+  color: #9b703f;
+}
+
+.hljs-selector-id {
+  color: #8b98ab;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/src/assets/library/highlight/styles/rainbow.css b/src/assets/library/highlight/styles/rainbow.css
new file mode 100644
index 00000000..905eb8ef
--- /dev/null
+++ b/src/assets/library/highlight/styles/rainbow.css
@@ -0,0 +1,85 @@
+/*
+
+Style with support for rainbow parens
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #474949;
+  color: #d1d9e1;
+}
+
+
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-type,
+.hljs-addition {
+  color: #cc99cc;
+}
+
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #f99157;
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-regexp {
+  color: #8abeb7;
+}
+
+.hljs-title,
+.hljs-name,
+.hljs-section,
+.hljs-built_in {
+  color: #b5bd68;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-class .hljs-title {
+   color: #ffcc66;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-link {
+  color: #f99157;
+}
+
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #eee8d5;
+}
+
+.hljs-attr,
+.hljs-attribute {
+  color: #81a2be;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/routeros.css b/src/assets/library/highlight/styles/routeros.css
new file mode 100644
index 00000000..ebe23990
--- /dev/null
+++ b/src/assets/library/highlight/styles/routeros.css
@@ -0,0 +1,108 @@
+/*
+
+ highlight.js style for Microtik RouterOS script
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0;
+}
+
+/* Base color: saturation 0; */
+
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+.hljs-attribute {
+  color: #0E9A00;
+}    
+
+.hljs-function {
+  color: #99069A;
+}
+
+.hljs-builtin-name {
+  color: #99069A;
+}
+
+/* User color: hue: 0 */
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+
+/* Language color: hue: 90; */
+
+.hljs-literal {
+  color: #78A960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #0C9A9A;
+}
+
+
+/* Meta color: hue: 200 */
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+
+/* Misc effects */
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/school-book.css b/src/assets/library/highlight/styles/school-book.css
new file mode 100644
index 00000000..964b51d8
--- /dev/null
+++ b/src/assets/library/highlight/styles/school-book.css
@@ -0,0 +1,72 @@
+/*
+
+School Book style from goldblog.com.ua (c) Zaripov Yura <yur4ik7@ukr.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 15px 0.5em 0.5em 30px;
+  font-size: 11px;
+  line-height:16px;
+}
+
+pre{
+  background:#f6f6ae url(./school-book.png);
+  border-top: solid 2px #d2e8b9;
+  border-bottom: solid 1px #d2e8b9;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color:#005599;
+  font-weight:bold;
+}
+
+.hljs,
+.hljs-subst {
+  color: #3e5915;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-link {
+  color: #2c009f;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #e60415;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-name,
+.hljs-selector-id,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/solarized-dark.css b/src/assets/library/highlight/styles/solarized-dark.css
new file mode 100644
index 00000000..b4c0da1f
--- /dev/null
+++ b/src/assets/library/highlight/styles/solarized-dark.css
@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #002b36;
+  color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/solarized-light.css b/src/assets/library/highlight/styles/solarized-light.css
new file mode 100644
index 00000000..fdcfcc72
--- /dev/null
+++ b/src/assets/library/highlight/styles/solarized-light.css
@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fdf6e3;
+  color: #657b83;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #93a1a1;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #eee8d5;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/sunburst.css b/src/assets/library/highlight/styles/sunburst.css
new file mode 100644
index 00000000..f56dd5e9
--- /dev/null
+++ b/src/assets/library/highlight/styles/sunburst.css
@@ -0,0 +1,102 @@
+/*
+
+Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #000;
+  color: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #aeaeae;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #e28964;
+}
+
+.hljs-string {
+  color: #65b042;
+}
+
+.hljs-subst {
+  color: #daefa3;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #e9c062;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-tag,
+.hljs-name {
+  color: #89bdff;
+}
+
+.hljs-class .hljs-title,
+.hljs-doctag {
+  text-decoration: underline;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-number {
+  color: #3387cc;
+}
+
+.hljs-params,
+.hljs-variable,
+.hljs-template-variable {
+  color: #3e87e3;
+}
+
+.hljs-attribute {
+  color: #cda869;
+}
+
+.hljs-meta {
+  color: #8996a8;
+}
+
+.hljs-formula {
+  background-color: #0e2231;
+  color: #f8f8f8;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #253b22;
+  color: #f8f8f8;
+}
+
+.hljs-deletion {
+  background-color: #420e09;
+  color: #f8f8f8;
+}
+
+.hljs-selector-class {
+  color: #9b703f;
+}
+
+.hljs-selector-id {
+  color: #8b98ab;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/tomorrow-night-blue.css b/src/assets/library/highlight/styles/tomorrow-night-blue.css
new file mode 100644
index 00000000..78e59cc8
--- /dev/null
+++ b/src/assets/library/highlight/styles/tomorrow-night-blue.css
@@ -0,0 +1,75 @@
+/* Tomorrow Night Blue Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7285b7;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #ff9da4;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #ffc58f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #ffeead;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #d1f1a9;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #bbdaff;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #ebbbff;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #002451;
+  color: white;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/tomorrow-night-bright.css b/src/assets/library/highlight/styles/tomorrow-night-bright.css
new file mode 100644
index 00000000..e05af8ae
--- /dev/null
+++ b/src/assets/library/highlight/styles/tomorrow-night-bright.css
@@ -0,0 +1,74 @@
+/* Tomorrow Night Bright Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #d54e53;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #e78c45;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #e7c547;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #b9ca4a;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #7aa6da;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #c397d8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: black;
+  color: #eaeaea;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/tomorrow-night-eighties.css b/src/assets/library/highlight/styles/tomorrow-night-eighties.css
new file mode 100644
index 00000000..08fd51c7
--- /dev/null
+++ b/src/assets/library/highlight/styles/tomorrow-night-eighties.css
@@ -0,0 +1,74 @@
+/* Tomorrow Night Eighties Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #999999;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #f2777a;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #f99157;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #ffcc66;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #99cc99;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #6699cc;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #cc99cc;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #2d2d2d;
+  color: #cccccc;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/tomorrow-night.css b/src/assets/library/highlight/styles/tomorrow-night.css
new file mode 100644
index 00000000..ddd270a4
--- /dev/null
+++ b/src/assets/library/highlight/styles/tomorrow-night.css
@@ -0,0 +1,75 @@
+/* Tomorrow Night Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #cc6666;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #de935f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #f0c674;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #b5bd68;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #81a2be;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b294bb;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1d1f21;
+  color: #c5c8c6;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/tomorrow.css b/src/assets/library/highlight/styles/tomorrow.css
new file mode 100644
index 00000000..026a62fe
--- /dev/null
+++ b/src/assets/library/highlight/styles/tomorrow.css
@@ -0,0 +1,72 @@
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #8e908c;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #c82829;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #f5871f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #eab700;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #718c00;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #4271ae;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #8959a8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/vs.css b/src/assets/library/highlight/styles/vs.css
new file mode 100644
index 00000000..c5d07d31
--- /dev/null
+++ b/src/assets/library/highlight/styles/vs.css
@@ -0,0 +1,68 @@
+/*
+
+Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
+
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-variable {
+  color: #008000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-name,
+.hljs-tag {
+  color: #00f;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-literal,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-addition {
+  color: #a31515;
+}
+
+.hljs-deletion,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-meta {
+  color: #2b91af;
+}
+
+.hljs-doctag {
+  color: #808080;
+}
+
+.hljs-attr {
+  color: #f00;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #00b0e8;
+}
+
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/highlight/styles/vs2015.css b/src/assets/library/highlight/styles/vs2015.css
new file mode 100644
index 00000000..d1d9be3c
--- /dev/null
+++ b/src/assets/library/highlight/styles/vs2015.css
@@ -0,0 +1,115 @@
+/*
+ * Visual Studio 2015 dark style
+ * Author: Nicolas LLOBERA <nllobera@gmail.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1E1E1E;
+  color: #DCDCDC;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name {
+  color: #569CD6;
+}
+.hljs-link {
+  color: #569CD6;
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #4EC9B0;
+}
+
+.hljs-number,
+.hljs-class {
+  color: #B8D7A3;
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: #D69D85;
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: #9A5334;
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: #DCDCDC;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #57A64A;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  color: #608B4E;
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: #9B9B9B;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #BD63C5;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: #9CDCFE;
+}
+
+.hljs-section {
+  color: gold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/*.hljs-code {
+  font-family:'Monospace';
+}*/
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #D7BA7D;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  display: inline-block;
+  width: 100%;
+}
diff --git a/src/assets/library/highlight/styles/xcode.css b/src/assets/library/highlight/styles/xcode.css
new file mode 100644
index 00000000..43dddad8
--- /dev/null
+++ b/src/assets/library/highlight/styles/xcode.css
@@ -0,0 +1,93 @@
+/*
+
+XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+  color: black;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #006a00;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #aa0d91;
+}
+
+.hljs-name {
+  color: #008;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660;
+}
+
+.hljs-string {
+  color: #c41a16;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #080;
+}
+
+.hljs-title,
+.hljs-tag,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-number,
+.hljs-meta {
+  color: #1c00cf;
+}
+
+.hljs-section,
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-attr,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-params {
+  color: #5c2699;
+}
+
+.hljs-attribute,
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #baeeba;
+}
+
+.hljs-deletion {
+  background-color: #ffc8bd;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #9b703f;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/assets/library/highlight/styles/xt256.css b/src/assets/library/highlight/styles/xt256.css
new file mode 100644
index 00000000..58df82cb
--- /dev/null
+++ b/src/assets/library/highlight/styles/xt256.css
@@ -0,0 +1,92 @@
+
+/*
+  xt256.css
+
+  Contact: initbar [at] protonmail [dot] ch
+         : github.com/initbar
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: #eaeaea;
+  background: #000;
+  padding: 0.5;
+}
+
+.hljs-subst {
+  color: #eaeaea;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-builtin-name,
+.hljs-type {
+  color: #eaeaea;
+}
+
+.hljs-params {
+  color: #da0000;
+}
+
+.hljs-literal,
+.hljs-number,
+.hljs-name {
+  color: #ff0000;
+  font-weight: bolder;
+}
+
+.hljs-comment {
+  color: #969896;
+}
+
+.hljs-selector-id,
+.hljs-quote {
+  color: #00ffff;
+}
+
+.hljs-template-variable,
+.hljs-variable,
+.hljs-title {
+  color: #00ffff;
+  font-weight: bold;
+}
+
+.hljs-selector-class,
+.hljs-keyword,
+.hljs-symbol {
+  color: #fff000;
+}
+
+.hljs-string,
+.hljs-bullet {
+  color: #00ff00;
+}
+
+.hljs-tag,
+.hljs-section {
+  color: #000fff;
+}
+
+.hljs-selector-tag {
+  color: #000fff;
+  font-weight: bold;
+}
+
+.hljs-attribute,
+.hljs-built_in,
+.hljs-regexp,
+.hljs-link {
+  color: #ff00ff;
+}
+
+.hljs-meta {
+  color: #fff;
+  font-weight: bolder;
+}
diff --git a/src/assets/library/highlight/styles/zenburn.css b/src/assets/library/highlight/styles/zenburn.css
new file mode 100644
index 00000000..07be5020
--- /dev/null
+++ b/src/assets/library/highlight/styles/zenburn.css
@@ -0,0 +1,80 @@
+/*
+
+Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
+based on dark.css by Ivan Sagalaev
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #3f3f3f;
+  color: #dcdcdc;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag {
+  color: #e3ceab;
+}
+
+.hljs-template-tag {
+  color: #dcdcdc;
+}
+
+.hljs-number {
+  color: #8cd0d3;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute {
+  color: #efdcbc;
+}
+
+.hljs-literal {
+  color: #efefaf;
+}
+
+.hljs-subst {
+  color: #8f8f8f;
+}
+
+.hljs-title,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-section,
+.hljs-type {
+  color: #efef8f;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #dca3a3;
+}
+
+.hljs-deletion,
+.hljs-string,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #cc9393;
+}
+
+.hljs-addition,
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #7f9f7f;
+}
+
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/src/assets/library/tool/tool.js b/src/assets/library/tool/tool.js
new file mode 100644
index 00000000..866d828f
--- /dev/null
+++ b/src/assets/library/tool/tool.js
@@ -0,0 +1,21 @@
+export const clone = (obj) => {
+  var o
+  if (typeof obj === 'object') {
+    if (obj === null) {
+      o = null
+    } else {
+      if (obj instanceof Array) {
+        o = []
+        for (var i = 0, len = obj.length; i < len; i++) {
+          o.push(clone(obj[i]))
+        }
+      } else {
+        o = {}
+        for (var j in obj) {
+          o[j] = clone(obj[j])
+        }
+      }
+    }
+  } else { o = obj }
+  return o
+}
diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
new file mode 100644
index 00000000..5fc4354c
--- /dev/null
+++ b/src/assets/style/fixed/base.scss
@@ -0,0 +1,10 @@
+// 优化显示
+
+body {
+  margin: 0px;
+}
+
+pre {
+  margin: 0px;
+  border-radius: $border-radius;
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/element.scss b/src/assets/style/fixed/element.scss
new file mode 100644
index 00000000..185cadd1
--- /dev/null
+++ b/src/assets/style/fixed/element.scss
@@ -0,0 +1 @@
+// element 样式补丁
\ No newline at end of file
diff --git a/src/assets/style/fixed/markdown.scss b/src/assets/style/fixed/markdown.scss
new file mode 100644
index 00000000..61deecdf
--- /dev/null
+++ b/src/assets/style/fixed/markdown.scss
@@ -0,0 +1,7 @@
+// markdown 样式补丁
+
+.markdown-body {
+  ul {
+    list-style: disc;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/vue-grid-layout.scss b/src/assets/style/fixed/vue-grid-layout.scss
new file mode 100644
index 00000000..22577cd0
--- /dev/null
+++ b/src/assets/style/fixed/vue-grid-layout.scss
@@ -0,0 +1,12 @@
+// vue-splitpane 样式补丁
+
+@import '~@/assets/style/unit/_color.scss';
+
+.vue-grid-item {
+  &.vue-grid-placeholder {
+    border: 1px solid $color-border-1;
+    background-color: rgba(#FFF, .3);
+    opacity: 1;
+    border-radius: $border-radius;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/style/fixed/vue-splitpane.scss b/src/assets/style/fixed/vue-splitpane.scss
new file mode 100644
index 00000000..0202352b
--- /dev/null
+++ b/src/assets/style/fixed/vue-splitpane.scss
@@ -0,0 +1,8 @@
+// vue-splitpane 样式补丁
+
+@import '~@/assets/style/unit/_color.scss';
+
+.splitter-pane-resizer {
+  background-color: $color-border-1 !important;
+  opacity: 1 !important;
+}
\ No newline at end of file
diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
new file mode 100644
index 00000000..81fe76c8
--- /dev/null
+++ b/src/assets/style/public-class.scss
@@ -0,0 +1,41 @@
+@import 'public';
+
+// 补丁 base
+@import '~@/assets/style/fixed/base.scss';
+// 补丁 element
+@import '~@/assets/style/fixed/element.scss';
+// 补丁 markdown
+@import '~@/assets/style/fixed/markdown.scss';
+// 补丁 vue-splitpane
+@import '~@/assets/style/fixed/vue-splitpane.scss';
+// 补丁 vue-grid-layout
+@import '~@/assets/style/fixed/vue-grid-layout.scss';
+
+// 在这里写公用的class
+// 注意 这个文件里只写class
+// mixin等内容请在 public.scss 里书写
+
+html, body {
+  height: 100%;
+  background-color: $color-bg;
+  #app {
+    height: 100%;
+  }
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+
+// 下边距
+.mb {
+  margin-bottom: $margin;
+}
+.mb-0 {
+  margin-bottom: 0px;
+}
diff --git a/src/assets/style/public.scss b/src/assets/style/public.scss
new file mode 100644
index 00000000..6029ca0e
--- /dev/null
+++ b/src/assets/style/public.scss
@@ -0,0 +1,17 @@
+@import '~@/assets/style/unit/_color.scss';
+@import '~@/assets/style/unit/_size.scss';
+
+// 禁止用户选中 鼠标变为手形
+%unable-select {
+  user-select: none;
+  cursor: pointer;
+}
+
+%card {
+  border: 1px solid #dddee1;
+  border-color: #e9eaec;
+  background: #fff;
+  border-radius: $border-radius;
+  font-size: 14px;
+  position: relative;
+}
\ No newline at end of file
diff --git a/src/assets/style/theme/default.scss b/src/assets/style/theme/default.scss
new file mode 100644
index 00000000..da461cf9
--- /dev/null
+++ b/src/assets/style/theme/default.scss
@@ -0,0 +1,29 @@
+@import '~@/assets/style/public.scss';
+
+// 默认主题
+.layout-main {
+  &.default {
+    // [全局设置]
+    // 关闭所有卡片的阴影
+    .el-card {
+      box-shadow: none;
+      &:hover {
+        box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+      }
+    }
+    height: 100vh;
+    width: 100vw;
+    // [布局]
+    .el-header {
+      padding: 0px;
+    }
+    .el-container {
+      .el-aside {
+        
+      }
+      .el-main {
+
+      }
+    }
+  }
+}
diff --git a/src/assets/style/unit/_color.scss b/src/assets/style/unit/_color.scss
new file mode 100644
index 00000000..6eb123af
--- /dev/null
+++ b/src/assets/style/unit/_color.scss
@@ -0,0 +1,23 @@
+// 主色
+$color-primary: #409EFF;
+
+// 辅助色
+$color-info: #909399;
+$color-success: #67C23A;
+$color-warning: #E6A23C;
+$color-danger: #F56C6C;
+
+// 文字
+$color-text-main: #303133;
+$color-text-normal: #606266;
+$color-text-sub: #909399;
+$color-text-placehoder: #C0C4CC;
+
+// 边框
+$color-border-1: #DCDFE6;
+$color-border-2: #E4E7ED;
+$color-border-3: #EBEEF5;
+$color-border-4: #F2F6FC;
+
+// 背景
+$color-bg: #f8f8f9;
\ No newline at end of file
diff --git a/src/assets/style/unit/_size.scss b/src/assets/style/unit/_size.scss
new file mode 100644
index 00000000..e380177e
--- /dev/null
+++ b/src/assets/style/unit/_size.scss
@@ -0,0 +1,2 @@
+$margin: 20px;
+$border-radius: 4px;
\ No newline at end of file
diff --git a/src/components/charts/chartsMixin.js b/src/components/charts/chartsMixin.js
new file mode 100644
index 00000000..6d5aece8
--- /dev/null
+++ b/src/components/charts/chartsMixin.js
@@ -0,0 +1,3 @@
+export default {
+  props: {}
+}
diff --git a/src/components/charts/pie/1.vue b/src/components/charts/pie/1.vue
new file mode 100644
index 00000000..d6689e66
--- /dev/null
+++ b/src/components/charts/pie/1.vue
@@ -0,0 +1,124 @@
+<template>
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import chartsMixin from '@/components/charts/chartsMixin.js'
+export default {
+  mixins: [
+    chartsMixin
+  ],
+  props: {
+    name: { default: '未命名图表' },
+    data: {
+      default: () => {
+        return []
+      }
+    },
+    ready: { default: true },
+    size: {
+      default: () => {
+        return {
+          height: 300,
+          width: 300
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    style () {
+      return {
+        height: this.size.height + 'px',
+        width: this.size.width + 'px'
+      }
+    }
+  },
+  watch: {
+    ready (value) {
+      if (value) {
+        console.log(`pie/type1 [${this.name}] [ready]`)
+        this.init()
+      }
+    },
+    size (value) {
+      if (this.chart === null) {
+        return
+      }
+      this.dispose()
+      this.init()
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    dispose () {
+      // 销毁
+      this.chart.dispose()
+    },
+    init () {
+      let option = {
+        title: {
+          text: this.name,
+          textStyle: {
+            color: '#FFF'
+          },
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        dataRange: {
+          show: false,
+          color: [
+            '#51F0E0',
+            '#7351F0',
+            '#51F06F',
+            '#51C4F0',
+            '#5451F0',
+            '#B751F0'
+          ]
+        },
+        legend: {
+          show: false
+        },
+        toolbox: {
+          show: false
+        },
+        calculable: true,
+        series: [
+          {
+            name: '面积模式',
+            type: 'pie',
+            radius: [30, 110],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            data: [
+              { value: 10, name: 'rose1' },
+              { value: 5, name: 'rose2' },
+              { value: 15, name: 'rose3' },
+              { value: 25, name: 'rose4' },
+              { value: 20, name: 'rose5' },
+              { value: 35, name: 'rose6' },
+              { value: 30, name: 'rose7' },
+              { value: 40, name: 'rose8' }
+            ]
+          }
+        ]
+      }
+      this.$nextTick(() => {
+        this.chart = echarts.init(this.$refs.chart)
+        this.chart.setOption(option)
+        console.log(`pie/type1 [${this.name}] [图表实例化完毕]`)
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/core/Container/index.vue b/src/components/core/Container/index.vue
new file mode 100644
index 00000000..b0ee6941
--- /dev/null
+++ b/src/components/core/Container/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container-component">
+    <!-- [card] 卡片容器 -->
+    <el-card v-if="type === 'card'">
+      <div v-if="$slots.header" slot="header">
+        <slot name="header"></slot>
+      </div>
+      <slot></slot>
+    </el-card>
+    <!-- [ghost] 隐形的容器 -->
+    <div v-if="type === 'ghost'">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'card'
+    }
+  }
+}
+</script>
diff --git a/src/components/core/CountUp/index.vue b/src/components/core/CountUp/index.vue
new file mode 100644
index 00000000..3e312d2f
--- /dev/null
+++ b/src/components/core/CountUp/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <span></span>
+</template>
+
+<script>
+import CountUp from 'countup.js'
+export default {
+  props: {
+    start: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    options: {
+      type: Object,
+      required: false,
+      default () {
+        return {}
+      }
+    },
+    callback: {
+      type: Function,
+      required: false,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      c: null
+    }
+  },
+  watch: {
+    end (value) {
+      if (this.c && this.c.update) {
+        this.c.update(value)
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      if (!this.c) {
+        this.c = new CountUp(
+          this.$el,
+          this.start,
+          this.end,
+          this.decimals,
+          this.duration,
+          this.options
+        )
+        this.c.start(() => {
+          this.callback(this.c)
+        })
+      }
+    },
+    destroy () {
+      this.c = null
+    }
+  },
+  beforeDestroy () {
+    this.destroy()
+  },
+  start (callback) {
+    if (this.c && this.c.start) {
+      this.c.start(() => {
+        callback && callback(this.c)
+      })
+    }
+  },
+  pauseResume () {
+    if (this.c && this.c.pauseResume) {
+      this.c.pauseResume()
+    }
+  },
+  reset () {
+    if (this.c && this.c.reset) {
+      this.c.reset()
+    }
+  },
+  update (newEndVal) {
+    if (this.c && this.c.update) {
+      this.c.update(newEndVal)
+    }
+  }
+}
+</script>
diff --git a/src/components/core/Highlight/index.vue b/src/components/core/Highlight/index.vue
new file mode 100644
index 00000000..d164bd35
--- /dev/null
+++ b/src/components/core/Highlight/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <pre v-html="highlightHTML"></pre>
+</template>
+
+<script>
+// https://highlightjs.org/usage/
+// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
+import highlight from 'highlight.js'
+export default {
+  props: {
+    code: {
+      type: String,
+      required: false,
+      default: `console.log('Hello')`
+    }
+  },
+  data () {
+    return {
+      highlightHTML: ''
+    }
+  },
+  mounted () {
+    this.highlight()
+  },
+  watch: {
+    code () {
+      this.highlight()
+    }
+  },
+  methods: {
+    highlight () {
+      this.highlightHTML = highlight.highlightAuto(this.code).value
+    }
+  }
+}
+</script>
diff --git a/src/components/core/MainLayout/_headerMenu.vue b/src/components/core/MainLayout/_headerMenu.vue
new file mode 100644
index 00000000..519b4c07
--- /dev/null
+++ b/src/components/core/MainLayout/_headerMenu.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-menu class="el-menu-demo" mode="horizontal">
+    <el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
+    <el-menu-item
+      v-for="(item, index) in menu"
+      :key="index"
+      :index="String(index)"
+      @click.native="active(item)">
+      {{item.title}}
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { menu, router } from '@/router/menu/index.js'
+export default {
+  data () {
+    return {
+      menu,
+      router
+    }
+  },
+  computed: {
+    // 当前路由的name
+    routeName () {
+      return this.$route.name
+    },
+    // 当前路由是否是顶级菜单
+    // 顶级菜单就是在顶栏里显示的菜单
+    // 二级菜单是在侧边栏显示的菜单
+    // 三级菜单是二级菜单展开的
+    routeIsTopLevel () {
+      return !!this.router.find(e => e.name === this.routeName)
+    },
+    // 不管当前路由是不是顶级菜单 都返回这个路由所属的顶级菜单对象的name
+    // 如果返回 undefined 代表这个路由不是在菜单里显示的路由
+    routeTopLevel () {
+      if (this.routeIsTopLevel) {
+        return this.routeName
+      } else {
+        const find = this.router.find(e => {
+          return e.children.find(child => {
+            return child.name === this.routeName
+          })
+        })
+        return find ? find.name : undefined
+      }
+    },
+    // 返回当前对象对应的顶级菜单 这个菜单可以在侧边栏菜单中直接使用
+    // 如果返回 undefined 代表这个路由没有对应的一级路由也就没有菜单
+    routeTopLevelMenu () {
+      if (this.routeTopLevel) {
+        return this.menu.find(e => e.name === this.routeTopLevel).children
+      } else {
+        return undefined
+      }
+    }
+  },
+  watch: {
+    routeName () {
+      this.doSetSideMenu()
+    }
+  },
+  mounted () {
+    this.doSetSideMenu()
+  },
+  methods: {
+    ...mapMutations([
+      'setSideMenu'
+    ]),
+    // 更新一次侧边栏
+    doSetSideMenu () {
+      if (this.routeTopLevelMenu) {
+        this.setSideMenu({
+          sideMenu: this.routeTopLevelMenu
+        })
+      }
+    },
+    // 跳转到某个路由
+    active (item) {
+      this.$router.push({
+        name: item.name
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/core/MainLayout/_siderMenu.vue b/src/components/core/MainLayout/_siderMenu.vue
new file mode 100644
index 00000000..51a7e62e
--- /dev/null
+++ b/src/components/core/MainLayout/_siderMenu.vue
@@ -0,0 +1,50 @@
+<template>
+  <el-menu class="el-menu-vertical-demo" v-bind="elMenu">
+    <el-submenu
+      v-for="(menu, index) in sideMenu"
+      :key="index"
+      :index="`${menu.title}${index}`">
+      <template slot="title">
+        <i v-if="menu.icon" :class="'fa fa-' + menu.icon"></i>
+        <span slot="title">{{menu.title}}</span>
+      </template>
+      <el-menu-item
+        v-for="(menuItem, menuItemIndex) in menu.children"
+        :key="menuItemIndex"
+        :index="`${menuItem.name}${menuItemIndex}`"
+        @click.native="$router.push({name: menuItem.name})">
+        <i v-if="menu.icon" :class="'fa fa-' + menuItem.icon"></i>
+        {{menuItem.title}}
+      </el-menu-item>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { menu, router } from '@/router/menu/index.js'
+export default {
+  data () {
+    return {
+      menu,
+      router,
+      elMenu: {
+        collapse: false,
+        uniqueOpened: true
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      sideMenu: state => state.menu.sideMenu
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+</style>
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/MainLayout/index.vue
new file mode 100644
index 00000000..b3f504cf
--- /dev/null
+++ b/src/components/core/MainLayout/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-container class="layout-main" :class="theme">
+    <el-header>
+      <HeaderMenu></HeaderMenu>
+    </el-header>
+    <el-container>
+      <el-aside style="width: 200px;">
+        <SiderMenu></SiderMenu>
+      </el-aside>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import SiderMenu from '@/components/core/MainLayout/_siderMenu.vue'
+import HeaderMenu from '@/components/core/MainLayout/_headerMenu.vue'
+export default {
+  components: {
+    SiderMenu,
+    HeaderMenu
+  },
+  data () {
+    return {
+      theme: 'default'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// 主题
+@import '~@/assets/style/theme/default.scss';
+</style>
+
diff --git a/src/components/core/Markdown/index.vue b/src/components/core/Markdown/index.vue
new file mode 100644
index 00000000..7444ee4b
--- /dev/null
+++ b/src/components/core/Markdown/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="component-markdown">
+    <div class="spin-group" v-if="!markedHTML">
+      <div>正在加载</div>
+    </div>
+    <div class="markdown-body" v-html="markedHTML"></div>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+export default {
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    md: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      getReadmePublicPath: '',
+      markedHTML: ''
+    }
+  },
+  mounted () {
+    if (this.url) {
+      this.initWithUrl()
+    } else if (this.md) {
+      this.initWithMd()
+    } else {
+      console.log('not mounted init')
+    }
+  },
+  methods: {
+    // 使用 md 初始化
+    initWithMd () {
+      this.markedHTML = this.marked(this.md)
+      console.log(this.markedHTML)
+    },
+    // 使用 url 初始化
+    async initWithUrl () {
+      this.markedHTML = await this.getReadme(this.url)
+    },
+    // 从 url 加载原始数据
+    async getReadme (name) {
+      const { data } = await this.$axios.get(name)
+      return this.marked(data)
+    },
+    marked (data) {
+      return marked(data, {
+        highlight: (code) => highlight.highlightAuto(code).value
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.component-markdown {
+  .spin-group {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: $color-primary;
+  }
+}
+</style>
+
diff --git a/src/components/core/SimpleMDE/backup.vue b/src/components/core/SimpleMDE/backup.vue
new file mode 100644
index 00000000..4ced691c
--- /dev/null
+++ b/src/components/core/SimpleMDE/backup.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="markdown-editor">
+    <textarea></textarea>
+  </div>
+</template>
+
+<script>
+import SimpleMDE from 'simplemde'
+import marked from 'marked'
+
+export default {
+  name: 'markdown-editor',
+  props: {
+    value: String,
+    previewClass: String,
+    autoinit: {
+      type: Boolean,
+      default () {
+        return true
+      }
+    },
+    highlight: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    sanitize: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    configs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  mounted () {
+    if (this.autoinit) this.initialize()
+  },
+  activated () {
+    const editor = this.simplemde
+    if (!editor) return
+    const isActive = editor.isSideBySideActive() || editor.isPreviewActive()
+    if (isActive) editor.toggleFullScreen()
+  },
+  methods: {
+    initialize () {
+      const configs = {
+        element: this.$el.firstElementChild,
+        initialValue: this.value,
+        renderingConfig: {}
+      }
+      Object.assign(configs, this.configs)
+
+      // 判断是否开启代码高亮
+      if (this.highlight) {
+        configs.renderingConfig.codeSyntaxHighlighting = true
+      }
+
+      // 设置是否渲染输入的html
+      marked.setOptions({ sanitize: this.sanitize })
+
+      // 实例化编辑器
+      this.simplemde = new SimpleMDE(configs)
+
+      // 添加自定义 previewClass
+      const className = this.previewClass || ''
+      this.addPreviewClass(className)
+
+      // 绑定事件
+      this.bindingEvents()
+    },
+    bindingEvents () {
+      this.simplemde.codemirror.on('change', () => {
+        this.$emit('input', this.simplemde.value())
+      })
+    },
+    addPreviewClass (className) {
+      const wrapper = this.simplemde.codemirror.getWrapperElement()
+      const preview = document.createElement('div')
+      wrapper.nextSibling.className += ` ${className}`
+      preview.className = `editor-preview ${className}`
+      wrapper.appendChild(preview)
+    }
+  },
+  destroyed () {
+    this.simplemde = null
+  },
+  watch: {
+    value (val) {
+      if (val === this.simplemde.value()) return
+      this.simplemde.value(val)
+    }
+  }
+}
+</script>
+
+<style>
+.markdown-editor .markdown-body {
+  padding: 0.5em
+}
+
+.markdown-editor .editor-preview-active, .markdown-editor .editor-preview-active-side {
+  display: block
+}
+</style>
diff --git a/src/components/core/SimpleMDE/index.vue b/src/components/core/SimpleMDE/index.vue
new file mode 100644
index 00000000..d920576d
--- /dev/null
+++ b/src/components/core/SimpleMDE/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="markdown-editor">
+    <textarea ref="mde"></textarea>
+  </div>
+</template>
+
+<script>
+import SimpleMDE from 'simplemde'
+export default {
+  data () {
+    return {
+      mde: null
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  destroyed () {
+    this.mde = null
+  },
+  methods: {
+    init () {
+      this.mde = new SimpleMDE({
+        element: this.$refs.mde
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.markdown-editor {
+  .markdown-body {
+    padding: 0.5em;
+  }
+}
+.markdown-editor {
+  .editor-preview-active {
+    display: block;
+  }
+  .editor-preview-active-side {
+    display: block;
+  }
+}
+</style>
diff --git a/src/components/demo/GithubLink/index.vue b/src/components/demo/GithubLink/index.vue
new file mode 100644
index 00000000..f6ee0ab1
--- /dev/null
+++ b/src/components/demo/GithubLink/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-tooltip :content="url" :placement="tooltipPlacement">
+    <a :href="url" target="_blank">
+      View in Github
+      <span class="fa fa-github"></span>
+    </a>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      default: 'https://github.com/FairyEver'
+    },
+    tooltipPlacement: {
+      default: 'top-end'
+    }
+  }
+}
+</script>
+
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 00000000..6b68cde0
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,50 @@
+import Vue from 'vue'
+
+import {GridLayout, GridItem} from 'vue-grid-layout'
+
+import SplitPane from 'vue-splitpane'
+
+// 名称：网格布局组件
+// 用途：实现网格布局
+Vue.component('GridLayout', GridLayout)
+Vue.component('GridItem', GridItem)
+
+// 名称：可调节的布局切分组件
+// 用途：像codepen类似的布局
+Vue.component('SplitPane', SplitPane)
+
+// 名称：页面容器
+// 用途：每个页面的最外层元素，统一样式
+Vue.component('Container', resolve => {
+  require(['@/components/core/Container/index.vue'], resolve)
+})
+
+// 名称：markdown加载器
+// 用途：加载一个markdown文件
+Vue.component('Markdown', resolve => {
+  require(['@/components/core/Markdown/index.vue'], resolve)
+})
+
+// 名称：github 链接
+// 用途：本质上这就是一个 github 的链接
+Vue.component('GithubLink', resolve => {
+  require(['@/components/demo/GithubLink/index.vue'], resolve)
+})
+
+// 名称：SimpleMDE markdown 编辑器
+// 用途：SimpleMDE markdown 编辑器
+Vue.component('SimpleMDE', resolve => {
+  require(['@/components/core/SimpleMDE/index.vue'], resolve)
+})
+
+// 名称：数字动画
+// 用途：数字动画
+Vue.component('CountUp', resolve => {
+  require(['@/components/core/CountUp/index.vue'], resolve)
+})
+
+// 名称：代码高亮
+// 用途：代码高亮
+Vue.component('Highlight', resolve => {
+  require(['@/components/core/Highlight/index.vue'], resolve)
+})
diff --git a/src/main.js b/src/main.js
new file mode 100755
index 00000000..b836020e
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+// font-awesome
+import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
+
+// simplemde css
+import 'simplemde/dist/simplemde.min.css'
+
+// markdown主题
+import 'github-markdown-css'
+
+// 代码高亮主题
+import '@/assets/library/highlight/styles/atom-one-light.css'
+
+// 全局注册的组件
+import '@/components'
+
+// 异步请求库
+import '@/plugin/axios'
+
+// vuex
+import store from '@/store/index.js'
+
+Vue.use(ElementUI)
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  store,
+  router,
+  template: '<App/>',
+  components: { App }
+})
diff --git a/src/pages/demo/charts/pie/1.vue b/src/pages/demo/charts/pie/1.vue
new file mode 100644
index 00000000..a1bcdcd5
--- /dev/null
+++ b/src/pages/demo/charts/pie/1.vue
@@ -0,0 +1,14 @@
+<template>
+  <Container type="ghost">
+    <Chart></Chart>
+  </Container>
+</template>
+
+<script>
+import Chart from '@/components/charts/pie/1.vue'
+export default {
+  components: {
+    Chart
+  }
+}
+</script>
diff --git a/src/pages/demo/charts/pie/2.vue b/src/pages/demo/charts/pie/2.vue
new file mode 100644
index 00000000..d6bbb90d
--- /dev/null
+++ b/src/pages/demo/charts/pie/2.vue
@@ -0,0 +1,5 @@
+<template>
+  <Container type="ghost">
+    pie 2
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/index/index.vue b/src/pages/demo/index/index.vue
new file mode 100644
index 00000000..4cd0ad78
--- /dev/null
+++ b/src/pages/demo/index/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <Container type="ghost">
+    index
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/clipboard-polyfill/demo.vue b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
new file mode 100644
index 00000000..827b428c
--- /dev/null
+++ b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
@@ -0,0 +1,71 @@
+<template>
+  <Container>
+    <GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="mb">
+          <el-input v-model="text" style="width: 200px;"></el-input>
+          <el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
+        </div>
+        <el-button @click="copyHtml()">将 <span v-html="html"></span> 连带样式一起复制进剪贴板，然后去 Word 文档内粘贴</el-button>
+      </el-col>
+      <el-col :span="12">
+        <el-alert
+          class="mb"
+          title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
+          type="warning"
+          show-icon>
+        </el-alert>
+        <div class="mb">
+          <el-tooltip content="需要 IE 浏览器" placement="top">
+            <el-button @click="readText">readText( )</el-button>
+          </el-tooltip>
+          <el-tooltip content="需要 IE 浏览器" placement="top">
+            <el-button @click="read">read( )</el-button>
+          </el-tooltip>
+        </div>
+        <el-input type="textarea" placeholder="在这里检验你的剪贴板 ( text/plain 数据 )"></el-input>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import clipboard from 'clipboard-polyfill'
+export default {
+  data () {
+    return {
+      text: 'Hello ~',
+      html: '<span style="background-color: #19be6b; color: #f8f8f9;">Hello</span><span style="background-color: #495060; color: #f8f8f9;">World</span>'
+    }
+  },
+  methods: {
+    copyText () {
+      clipboard.writeText(this.text)
+    },
+    copyHtml () {
+      var dt = new clipboard.DT()
+      dt.setData('text/html', this.html)
+      clipboard.write(dt)
+    },
+    readText () {
+      clipboard.readText().then((res) => {
+        console.log(res)
+        this.$Message.success('读取成功 返回结果请查看控制台')
+      }, (err) => {
+        console.log(err)
+        this.$Message.error('错误信息已经打印到控制台')
+      })
+    },
+    read () {
+      clipboard.read().then((res) => {
+        console.log(res)
+        this.$Message.success('读取成功 返回结果请查看控制台')
+      }, (err) => {
+        console.log(err)
+        this.$Message.error('错误信息已经打印到控制台')
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/clipboard-polyfill/readme.vue b/src/pages/demo/plugins/clipboard-polyfill/readme.vue
new file mode 100644
index 00000000..f2452d51
--- /dev/null
+++ b/src/pages/demo/plugins/clipboard-polyfill/readme.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/lgarron/clipboard-polyfill/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/countup/demo.vue b/src/pages/demo/plugins/countup/demo.vue
new file mode 100644
index 00000000..5bfed81e
--- /dev/null
+++ b/src/pages/demo/plugins/countup/demo.vue
@@ -0,0 +1,87 @@
+<template>
+  <Container type="ghost" class="demo-plugin-countup-demo">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">只设置目标数字</p>
+          <CountUp :end="100"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">设置起止数值</p>
+          <CountUp :start="14" :end="100"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">小数位数</p>
+          <CountUp :end="100.00" :decimals="2"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">动画时长</p>
+          <CountUp :end="100" :duration="6"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">回调函数</p>
+          <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">结束一秒后更新数值</p>
+          <CountUp :end="end" :callback="update"></CountUp>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 回调函数使用
+      className: '',
+      // 更新数值用
+      end: 50
+    }
+  },
+  methods: {
+    update () {
+      setTimeout(() => {
+        this.end = 100
+      }, 1000)
+    }
+  }
+}
+</script>
+
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.demo-plugin-countup-demo {
+  .el-card {
+    @extend %unable-select;
+    margin-bottom: 10px;
+    .el-card__body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span {
+        font-size: 40px;
+        &.end {
+          padding: 0px 20px;
+          border-radius: $border-radius;
+          background-color: $color-success;
+          color: #FFF;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/demo/plugins/countup/readme.vue b/src/pages/demo/plugins/countup/readme.vue
new file mode 100644
index 00000000..c665778c
--- /dev/null
+++ b/src/pages/demo/plugins/countup/readme.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/inorganik/countUp.js"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/inorganik/countUp.js/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/highlight/code/css.js b/src/pages/demo/plugins/highlight/code/css.js
new file mode 100644
index 00000000..f41e0a90
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/code/css.js
@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+}
+.my-card {
+  height: 300px;
+  width: 300px;
+}`
diff --git a/src/pages/demo/plugins/highlight/code/html.js b/src/pages/demo/plugins/highlight/code/html.js
new file mode 100644
index 00000000..739a2b9d
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/code/html.js
@@ -0,0 +1,8 @@
+export default `<ul>
+  <li class="li-1"><p>Hello</p></li>
+  <li>
+    <span style="color: red;">
+      Hello
+    </span>
+  </li>
+</ul>`
diff --git a/src/pages/demo/plugins/highlight/code/javascript.js b/src/pages/demo/plugins/highlight/code/javascript.js
new file mode 100644
index 00000000..ce752335
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/code/javascript.js
@@ -0,0 +1,3 @@
+export default `[].forEach.call($$("*"), a => {
+  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
+})`
diff --git a/src/pages/demo/plugins/highlight/code/scss.js b/src/pages/demo/plugins/highlight/code/scss.js
new file mode 100644
index 00000000..d914909c
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/code/scss.js
@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+  .my-card {
+    height: 300px;
+    width: 300px;
+  }
+}`
diff --git a/src/pages/demo/plugins/highlight/demo.vue b/src/pages/demo/plugins/highlight/demo.vue
new file mode 100644
index 00000000..aa5f3397
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/demo.vue
@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <p slot="title">javascript</p>
+      <Highlight :code="codeJavascript"></Highlight>
+    </el-card>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">css</p>
+          <Highlight :code="codeCSS"></Highlight>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">scss</p>
+          <Highlight :code="codeSCSS"></Highlight>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">html</p>
+          <Highlight :code="codeHTML"></Highlight>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import codeJavascript from './code/javascript'
+import codeCSS from './code/css'
+import codeSCSS from './code/scss'
+import codeHTML from './code/html'
+export default {
+  data () {
+    return {
+      codeJavascript,
+      codeCSS,
+      codeSCSS,
+      codeHTML
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/plugins/highlight/readme.vue b/src/pages/demo/plugins/highlight/readme.vue
new file mode 100644
index 00000000..2889a9c0
--- /dev/null
+++ b/src/pages/demo/plugins/highlight/readme.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/isagalaev/highlight.js"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/isagalaev/highlight.js/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/js-cookie/demo.vue b/src/pages/demo/plugins/js-cookie/demo.vue
new file mode 100644
index 00000000..8f4b3b7e
--- /dev/null
+++ b/src/pages/demo/plugins/js-cookie/demo.vue
@@ -0,0 +1,52 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <p slot="title">基本读写删</p>
+      <el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
+      <el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
+      <el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
+    </el-card>
+    <el-card class="mb">
+      <p slot="title">设置有效期</p>
+      <el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
+      <el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
+      <el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
+    </el-card>
+    <el-card class="mb">
+      <p slot="title">获取所有可以获得的数据</p>
+      <el-button type="info" @click="getAll">getAll</el-button>
+    </el-card>
+  </Container>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+export default {
+  methods: {
+    set (name = 'default-name', value = 'default-value') {
+      Cookies.set(name, value)
+      this.$Message.info(`设置数据 ${name} = ${value}`)
+    },
+    setExpires (name = 'default-name', value = 'default-value', expires = 1) {
+      Cookies.set(name, value, {
+        expires
+      })
+      this.$Message.info(`设置数据 ${name} = ${value} 有效期 ${expires} 天`)
+    },
+    get (name = 'default-name') {
+      const value = Cookies.get(name)
+      this.$Message.info(`获取数据 ${name} = ${value}`)
+    },
+    getAll () {
+      const value = Cookies.get()
+      console.log(value)
+      this.$Message.info('结果已经打印到控制台')
+    },
+    remove (name = 'default-name') {
+      Cookies.remove(name)
+      this.$Message.info(`删除数据 ${name}`)
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/plugins/js-cookie/readme.vue b/src/pages/demo/plugins/js-cookie/readme.vue
new file mode 100644
index 00000000..ac07572f
--- /dev/null
+++ b/src/pages/demo/plugins/js-cookie/readme.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/js-cookie/js-cookie"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/js-cookie/js-cookie/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/marked/demo.vue b/src/pages/demo/plugins/marked/demo.vue
new file mode 100644
index 00000000..6ef9189a
--- /dev/null
+++ b/src/pages/demo/plugins/marked/demo.vue
@@ -0,0 +1,40 @@
+<template>
+  <Container type="ghost">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 源码</p>
+          <pre>{{mdSource}}</pre>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 解析结果</p>
+          <div class="markdown-body" v-html="markedHTML"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import marked from 'marked'
+export default {
+  data () {
+    return {
+      mdSource: '',
+      markedHTML: ''
+    }
+  },
+  async mounted () {
+    this.mdSource = await this.getReadme(this.url)
+    this.markedHTML = marked(this.mdSource)
+  },
+  methods: {
+    async getReadme () {
+      const { data } = await this.$axios.get('/static/markdownFiles/demo/baseMarkdowmFile.md')
+      return data
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/marked/demoHighlight.vue b/src/pages/demo/plugins/marked/demoHighlight.vue
new file mode 100644
index 00000000..0e558f69
--- /dev/null
+++ b/src/pages/demo/plugins/marked/demoHighlight.vue
@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 源码</p>
+          <pre>{{mdSource}}</pre>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 解析结果 代码高亮显示</p>
+          <div class="markdown-body" v-html="markedHTML"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+export default {
+  data () {
+    return {
+      mdSource: '',
+      markedHTML: ''
+    }
+  },
+  async mounted () {
+    this.mdSource = await this.getReadme(this.url)
+    this.markedHTML = marked(this.mdSource, {
+      highlight: (code) => {
+        return highlight.highlightAuto(code).value
+      }
+    })
+  },
+  methods: {
+    async getReadme () {
+      const { data } = await this.$axios.get('/static/markdownFiles/demo/baseMarkdowmFile.md')
+      return data
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/marked/readme.vue b/src/pages/demo/plugins/marked/readme.vue
new file mode 100644
index 00000000..ec897bf0
--- /dev/null
+++ b/src/pages/demo/plugins/marked/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/chjj/marked"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/chjj/marked/master/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue b/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
new file mode 100644
index 00000000..3e7ff7f0
--- /dev/null
+++ b/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-card class="mb">
+    <div slot="header" class="clearfix">
+      <el-button type="text" size="mini">{{title}}</el-button>
+      <el-tooltip content="重新 mock 数据" placement="top-end">
+        <el-button type="primary" size="mini" @click="$emit('reload')" style="float: right;">刷新</el-button>
+      </el-tooltip>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="col col-l">
+          <Highlight :code="code"></Highlight>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="col col-r">
+          <Highlight :code="mock"></Highlight>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Mock Demo'
+    },
+    code: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    mock: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.col {
+  padding: $margin;
+  border-radius: $border-radius;
+  border-width: 1px;
+  border-style: solid;
+}
+.col-l {
+  background-color: lighten($color-info, 40%);
+  border-color: lighten($color-info, 35%);
+}
+.col-r {
+  background-color: lighten($color-success, 47%);
+  border-color: lighten($color-success, 40%);
+}
+</style>
+
+
diff --git a/src/pages/demo/plugins/mock/data/settingDPD.js b/src/pages/demo/plugins/mock/data/settingDPD.js
new file mode 100644
index 00000000..67de3913
--- /dev/null
+++ b/src/pages/demo/plugins/mock/data/settingDPD.js
@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "占位符演示",
+    json: {
+      "name": {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+      }
+    }
+  }
+]
diff --git a/src/pages/demo/plugins/mock/data/settingDTD.js b/src/pages/demo/plugins/mock/data/settingDTD.js
new file mode 100644
index 00000000..9b89668f
--- /dev/null
+++ b/src/pages/demo/plugins/mock/data/settingDTD.js
@@ -0,0 +1,111 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "复制1-10次固定字符串",
+    json: {
+      "string|1-10": "★"
+    }
+  },
+  {
+    title: "复制3次",
+    json: {
+      "string|3": "Ha"
+    }
+  },
+  // 数字
+  {
+    title: "范围随机取值",
+    json: {
+      "number|1-100": 50
+    }
+  },
+  {
+    title: "累加1",
+    json: {
+      "number|+1": 10
+    }
+  },
+  {
+    title: "累加2",
+    json: {
+      "number|+2": 10
+    }
+  },
+  {
+    title: "浮点数",
+    json: {
+      "number1|1-100.1-10": 1,
+      "number2|123.1-10": 1,
+      "number3|123.3": 1,
+      "number4|123.10": 1.123
+    }
+  },
+  // 布尔值
+  {
+    title: "true 的概率是 1/2",
+    json: {
+      "boolean|1": true
+    }
+  },
+  // 对象
+  {
+    title: '随机选择3个属性',
+    json: {
+      "obj|3": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        phone: 'Apple',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/FairyEver',
+        blog: 'http://www.fairyever.com/'
+      }
+    }
+  },
+  {
+    title: '随机选择3-6个属性',
+    json: {
+      "obj|3-6": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        phone: 'Apple',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/FairyEver',
+        blog: 'http://www.fairyever.com/'
+      }
+    }
+  },
+  // 数组
+  {
+    title: '随机选1个',
+    json: {
+      "arr|1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '顺序选1个',
+    json: {
+      "arr|+1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '重复3次',
+    json: {
+      "arr|3": ['o', 'o - o', 'o - o - o']
+    }
+  },
+  {
+    title: '重复2-10次',
+    json: {
+      "arr|2-10": ['-', '----']
+    }
+  }
+]
diff --git a/src/pages/demo/plugins/mock/demoDPD.vue b/src/pages/demo/plugins/mock/demoDPD.vue
new file mode 100644
index 00000000..160c913f
--- /dev/null
+++ b/src/pages/demo/plugins/mock/demoDPD.vue
@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
+    </el-card>
+    <MockDemoCard
+      v-for="(item, index) in settingDPD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      @reload="doMock(index)">
+    </MockDemoCard>
+  </Container>
+</template>
+
+<script>
+import Vue from 'vue'
+import * as tool from '@/assets/library/tool/tool.js'
+import Mock from 'mockjs'
+import settingDPD from './data/settingDPD'
+import MockDemoCard from './componnets/MockDemoCard'
+export default {
+  components: {
+    MockDemoCard
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDPD,
+      settingDPDClone: tool.clone(settingDPD)
+    }
+  },
+  mounted () {
+    this.settingDPD.forEach((e, i) => {
+      this.doMock(i)
+    })
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDPDClone[n].json), null, 2))
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/plugins/mock/demoDTD.vue b/src/pages/demo/plugins/mock/demoDTD.vue
new file mode 100644
index 00000000..608f06cf
--- /dev/null
+++ b/src/pages/demo/plugins/mock/demoDTD.vue
@@ -0,0 +1,66 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
+    </el-card>
+    <MockDemoCard
+      v-for="(item, index) in settingDTD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      @reload="doMock(index)">
+    </MockDemoCard>
+    <MockDemoCard
+      :title="fn.title"
+      :code="fn.code"
+      :mock="fn.mocked"
+      @reload="fnMock()">
+    </MockDemoCard>
+    <MockDemoCard
+      :title="regexp.title"
+      :code="regexp.code"
+      :mock="regexp.mocked"
+      @reload="regexpMock()">
+    </MockDemoCard>
+  </Container>
+</template>
+
+<script>
+import Vue from 'vue'
+import * as tool from '@/assets/library/tool/tool.js'
+import Mock from 'mockjs'
+import settingDTD from './data/settingDTD'
+import MockDemoCard from './componnets/MockDemoCard'
+// mixin
+import regexp from './mixins/regexp'
+import fn from './mixins/function'
+export default {
+  mixins: [
+    regexp,
+    fn
+  ],
+  components: {
+    MockDemoCard
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDTD,
+      settingDTDClone: tool.clone(settingDTD)
+    }
+  },
+  mounted () {
+    this.settingDTD.forEach((e, i) => {
+      this.doMock(i)
+    })
+    this.fnMock()
+    this.regexpMock()
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDTDClone[n].json), null, 2))
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/plugins/mock/grammaticalNorm.vue b/src/pages/demo/plugins/mock/grammaticalNorm.vue
new file mode 100644
index 00000000..8ef97fed
--- /dev/null
+++ b/src/pages/demo/plugins/mock/grammaticalNorm.vue
@@ -0,0 +1,5 @@
+<template>
+  <Container>
+    <Markdown url="/static/markdownFiles/article/mock语法规范.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/mock/mixins/function.js b/src/pages/demo/plugins/mock/mixins/function.js
new file mode 100644
index 00000000..d7d64ad7
--- /dev/null
+++ b/src/pages/demo/plugins/mock/mixins/function.js
@@ -0,0 +1,30 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试函数
+      fn: {
+        title: '函数',
+        code: `{
+  "name": "FairyEver",
+  "say": function() {
+    return 'I AM ' + this.name
+  }
+}`,
+        json: {
+          "name": "FairyEver",
+          "say": function() {
+            return 'I AM ' + this.name
+          }
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    fnMock () {
+      this.fn.mocked = JSON.stringify(Mock.mock(this.fn.json), null, 2)
+    }
+  }
+}
diff --git a/src/pages/demo/plugins/mock/mixins/regexp.js b/src/pages/demo/plugins/mock/mixins/regexp.js
new file mode 100644
index 00000000..8559c341
--- /dev/null
+++ b/src/pages/demo/plugins/mock/mixins/regexp.js
@@ -0,0 +1,28 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试正则表达式
+      regexp: {
+        title: '正则表达式',
+        code: `{
+  'regexp1': /[a-z][A-Z][0-9]/,
+  'regexp2': /\w\W\s\S\d\D/,
+  'regexp3': /\d{5,10}/
+}`,
+        json: {
+          'regexp1': /[a-z][A-Z][0-9]/,
+          'regexp2': /\w\W\s\S\d\D/,
+          'regexp3': /\d{5,10}/
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    regexpMock () {
+      this.regexp.mocked = JSON.stringify(Mock.mock(this.regexp.json), null, 2)
+    }
+  }
+}
diff --git a/src/pages/demo/plugins/mock/readme.vue b/src/pages/demo/plugins/mock/readme.vue
new file mode 100644
index 00000000..5680195b
--- /dev/null
+++ b/src/pages/demo/plugins/mock/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/nuysoft/Mock"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/nuysoft/Mock/refactoring/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/papaParse/demo.vue b/src/pages/demo/plugins/papaParse/demo.vue
new file mode 100644
index 00000000..cbf68397
--- /dev/null
+++ b/src/pages/demo/plugins/papaParse/demo.vue
@@ -0,0 +1,56 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <el-upload
+      :before-upload="handleUpload"
+      action="default">
+      <el-button>选择一个CSV文件</el-button>
+    </el-upload>
+    <br>
+    <el-table
+      v-bind="table"
+      style="width: 100%">
+      <el-table-column
+        v-for="(item, index) in table.columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+  </Container>
+</template>
+
+<script>
+import papa from 'papaparse'
+export default {
+  data () {
+    return {
+      table: {
+        columns: [],
+        data: [],
+        size: 'mini',
+        stripe: true,
+        border: true
+      }
+    }
+  },
+  methods: {
+    handleUpload (file) {
+      papa.parse(file, {
+        header: true,
+        skipEmptyLines: true,
+        complete: (results, file) => {
+          this.table.columns = Object.keys(results.data[0]).map(e => ({
+            label: e,
+            prop: e
+          }))
+          this.table.data = results.data
+        }
+      })
+      return false
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/plugins/papaParse/readme.vue b/src/pages/demo/plugins/papaParse/readme.vue
new file mode 100644
index 00000000..1eecaa1d
--- /dev/null
+++ b/src/pages/demo/plugins/papaParse/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/mholt/PapaParse/master/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/simpleMDE/demo.vue b/src/pages/demo/plugins/simpleMDE/demo.vue
new file mode 100644
index 00000000..09218fee
--- /dev/null
+++ b/src/pages/demo/plugins/simpleMDE/demo.vue
@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <div style="margin-bottom: -16px;">
+      <SimpleMDE></SimpleMDE>
+    </div>
+  </Container>
+</template>
diff --git a/src/pages/demo/plugins/simpleMDE/readme.vue b/src/pages/demo/plugins/simpleMDE/readme.vue
new file mode 100644
index 00000000..f17a751a
--- /dev/null
+++ b/src/pages/demo/plugins/simpleMDE/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/sparksuite/simplemde-markdown-editor/master/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/vue-grid-layout/demo.vue b/src/pages/demo/plugins/vue-grid-layout/demo.vue
new file mode 100644
index 00000000..df3c7a91
--- /dev/null
+++ b/src/pages/demo/plugins/vue-grid-layout/demo.vue
@@ -0,0 +1,102 @@
+<template>
+  <Container type="ghost" class="demo-plugin-vue-grid-layout-demo">
+    <GridLayout
+      v-bind="layout"
+      @layout-updated="layoutUpdatedHandler">
+      <GridItem
+        v-for="(item, index) in layout.layout"
+        :key="index"
+        v-bind="item"
+        @resize="resizeHandler"
+        @move="moveHandler"
+        @resized="resizedHandler"
+        @moved="movedHandler">
+        <el-card>
+          <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
+          <template v-if="item.i === '0'">
+            <p>拖拽卡片调整位置</p>
+            <p>拖拽卡片右下角的手柄调整卡片大小</p>
+          </template>
+        </el-card>
+      </GridItem>
+    </GridLayout>
+  </Container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      layout: {
+        layout: [
+          {'x': 0, 'y': 0, 'w': 4, 'h': 5, 'i': '0'},
+          {'x': 2, 'y': 5, 'w': 2, 'h': 5, 'i': '1'},
+          {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '2'},
+          {'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '3'},
+          {'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '4'},
+          {'x': 10, 'y': 10, 'w': 2, 'h': 5, 'i': '5'},
+          {'x': 0, 'y': 5, 'w': 2, 'h': 5, 'i': '6'},
+          {'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '7'},
+          {'x': 8, 'y': 10, 'w': 2, 'h': 5, 'i': '8'},
+          {'x': 4, 'y': 5, 'w': 6, 'h': 5, 'i': '9'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  methods: {
+    layoutUpdatedHandler (newLayout) {
+      // console.log('layoutUpdatedHandler')
+      newLayout.forEach(e => {
+        // console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+      })
+    },
+    resizeHandler (i, newH, newW) {
+      // console.log('resizeHandler')
+      // console.log(`i: ${i}, newH: ${newH}, newW: ${newW}`)
+    },
+    moveHandler (i, newX, newY) {
+      // console.log('moveHandler')
+      // console.log(`i: ${i}, newX: ${newX}, newY: ${newY}`)
+    },
+    resizedHandler (i, newH, newW, newHPx, newWPx) {
+      // console.log('resizedHandler')
+      // console.log(`i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
+    },
+    movedHandler (i, newX, newY) {
+      // console.log('movedHandler')
+      // console.log(`i: ${i}, newX: ${newX}, newY: ${newY}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.demo-plugin-vue-grid-layout-demo {
+  .vue-grid-layout {
+    margin: -$margin -$margin 0px -$margin;
+    .el-card {
+      height: 100%;
+      @extend %unable-select;
+      .el-card__header {
+        padding: 8px $margin;
+      }
+    }
+    .vue-resizable-handle {
+      opacity: .3;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/src/pages/demo/plugins/vue-grid-layout/readme.vue b/src/pages/demo/plugins/vue-grid-layout/readme.vue
new file mode 100644
index 00000000..49597f08
--- /dev/null
+++ b/src/pages/demo/plugins/vue-grid-layout/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/jbaysolutions/vue-grid-layout"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/jbaysolutions/vue-grid-layout/master/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/vue-splitpane/demo.vue b/src/pages/demo/plugins/vue-splitpane/demo.vue
new file mode 100644
index 00000000..3b6ca388
--- /dev/null
+++ b/src/pages/demo/plugins/vue-splitpane/demo.vue
@@ -0,0 +1,17 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <div style="height: 400px; margin: -16px;">
+      <SplitPane :min-percent='20' :default-percent='30' split="vertical">
+        <template slot="paneL"><div style="margin: 10px;">左</div></template>
+        <template slot="paneR">
+          <SplitPane split="horizontal">
+            <template slot="paneL"><div style="margin: 10px;">右上</div></template>
+            <template slot="paneR"><div style="margin: 10px;">右下</div></template>
+          </SplitPane>
+        </template>
+      </SplitPane>
+    </div>
+  </Container>
+</template>
diff --git a/src/pages/demo/plugins/vue-splitpane/readme.vue b/src/pages/demo/plugins/vue-splitpane/readme.vue
new file mode 100644
index 00000000..fe07d336
--- /dev/null
+++ b/src/pages/demo/plugins/vue-splitpane/readme.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/PanJiaChen/vue-split-pane/master/README.md"></Markdown>
+  </Container>
+</template>
\ No newline at end of file
diff --git a/src/plugin/axios/index.js b/src/plugin/axios/index.js
new file mode 100644
index 00000000..f35017fa
--- /dev/null
+++ b/src/plugin/axios/index.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import axios from 'axios'
+
+Vue.prototype.$axios = axios
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100755
index 00000000..23884b41
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+// 在菜单中显示的那部分路由
+import { router } from '@/router/menu/index.js'
+// 不在菜单中显示的那部分路由
+import invisibleRouter from './invisible/index.js'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  routes: [
+    ...router,
+    ...invisibleRouter
+  ]
+})
diff --git a/src/router/invisible/index.js b/src/router/invisible/index.js
new file mode 100644
index 00000000..1d747fa0
--- /dev/null
+++ b/src/router/invisible/index.js
@@ -0,0 +1,16 @@
+export default [
+  {
+    path: '/',
+    component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
+    redirect: {
+      name: 'index'
+    },
+    children: [
+      {
+        path: 'index',
+        name: 'index',
+        component: resolve => { require(['@/pages/demo/index/index.vue'], resolve) }
+      }
+    ]
+  }
+]
diff --git a/src/router/menu/_charts.js b/src/router/menu/_charts.js
new file mode 100644
index 00000000..fc77b6fa
--- /dev/null
+++ b/src/router/menu/_charts.js
@@ -0,0 +1,36 @@
+// [图表] 菜单
+export const chartsMenu = {
+  title: '图表',
+  path: '/demo/charts',
+  name: 'demo-charts',
+  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
+  children: [
+    // pie 饼图
+    {
+      title: '饼图',
+      icon: 'pie-graph',
+      children: [
+        {
+          title: '样式 1',
+          icon: 'document',
+          path: 'pie/1',
+          name: 'demo-charts-pie-1',
+          component: resolve => { require(['@/pages/demo/charts/pie/1.vue'], resolve) }
+        },
+        {
+          title: '样式 2',
+          icon: 'document',
+          path: 'pie/2',
+          name: 'demo-charts-pie-2',
+          component: resolve => { require(['@/pages/demo/charts/pie/2.vue'], resolve) }
+        }
+      ]
+    }
+  ]
+}
+
+// [图表] 路由设置
+export const chartsRouter = {
+  ...chartsMenu,
+  children: [].concat(...chartsMenu.children.map(e => e.children))
+}
diff --git a/src/router/menu/_plugin.js b/src/router/menu/_plugin.js
new file mode 100644
index 00000000..0618ccb3
--- /dev/null
+++ b/src/router/menu/_plugin.js
@@ -0,0 +1,249 @@
+// [插件] 菜单
+export const pluginMenu = {
+  title: '插件',
+  path: '/demo/plugin',
+  name: 'demo-plugin',
+  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
+  // redirect: {
+  //   name: 'demo-plugin-marked-readme'
+  // },
+  children: [
+    // markdown 解析库
+    {
+      title: 'md解析',
+      icon: 'font',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'marked/readme',
+          name: 'demo-plugin-marked-readme',
+          component: resolve => { require(['@/pages/demo/plugins/marked/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'marked/demo',
+          name: 'demo-plugin-marked-demo',
+          component: resolve => { require(['@/pages/demo/plugins/marked/demo.vue'], resolve) }
+        },
+        {
+          title: '添加代码高亮',
+          icon: 'file-o',
+          path: 'marked/demoHighlight',
+          name: 'demo-plugin-marked-demoHighlight',
+          component: resolve => { require(['@/pages/demo/plugins/marked/demoHighlight.vue'], resolve) }
+        }
+      ]
+    },
+    // SimpleMDE
+    {
+      title: 'SimpleMDE',
+      icon: 'columns',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'simpleMDE/readme',
+          name: 'demo-plugin-simpleMDE-readme',
+          component: resolve => { require(['@/pages/demo/plugins/simpleMDE/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'simpleMDE/demo',
+          name: 'demo-plugin-simpleMDE-demo',
+          component: resolve => { require(['@/pages/demo/plugins/simpleMDE/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // 拖拽网格布局组件
+    {
+      title: '网格布局',
+      icon: 'object-ungroup',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'vue-grid-layout/readme',
+          name: 'demo-plugin-vue-grid-layout-readme',
+          component: resolve => { require(['@/pages/demo/plugins/vue-grid-layout/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'vue-grid-layout/demo',
+          name: 'demo-plugin-vue-grid-layout-demo',
+          component: resolve => { require(['@/pages/demo/plugins/vue-grid-layout/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // 可调布局组件
+    {
+      title: '可调布局',
+      icon: 'object-group',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'vue-splitpane/readme',
+          name: 'demo-plugin-vue-splitpane-readme',
+          component: resolve => { require(['@/pages/demo/plugins/vue-splitpane/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'vue-splitpane/demo',
+          name: 'demo-plugin-vue-splitpane-demo',
+          component: resolve => { require(['@/pages/demo/plugins/vue-splitpane/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // papaParse
+    {
+      title: '表格解析',
+      icon: 'eye',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'papaParse/readme',
+          name: 'demo-plugin-papaParse-readme',
+          component: resolve => { require(['@/pages/demo/plugins/papaParse/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'papaParse/demo',
+          name: 'demo-plugin-papaParse-demo',
+          component: resolve => { require(['@/pages/demo/plugins/papaParse/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // countup
+    {
+      title: '数字动画',
+      icon: 'magic',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'countup/readme',
+          name: 'demo-plugin-countup-readme',
+          component: resolve => { require(['@/pages/demo/plugins/countup/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'countup/demo',
+          name: 'demo-plugin-countup-demo',
+          component: resolve => { require(['@/pages/demo/plugins/countup/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // clipboard-polyfill
+    {
+      title: '剪贴板',
+      icon: 'clipboard',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'clipboard-polyfill/readme',
+          name: 'demo-plugin-clipboard-polyfill-readme',
+          component: resolve => { require(['@/pages/demo/plugins/clipboard-polyfill/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'clipboard-polyfill/demo',
+          name: 'demo-plugin-clipboard-polyfill-demo',
+          component: resolve => { require(['@/pages/demo/plugins/clipboard-polyfill/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // js-cookie
+    {
+      title: 'Cookie',
+      icon: 'hdd-o',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'js-cookie/readme',
+          name: 'demo-plugin-js-cookie-readme',
+          component: resolve => { require(['@/pages/demo/plugins/js-cookie/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'js-cookie/demo',
+          name: 'demo-plugin-js-cookie-demo',
+          component: resolve => { require(['@/pages/demo/plugins/js-cookie/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // highlight
+    {
+      title: '代码高亮',
+      icon: 'code',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'highlight/readme',
+          name: 'demo-plugin-highlight-readme',
+          component: resolve => { require(['@/pages/demo/plugins/highlight/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'highlight/demo',
+          name: 'demo-plugin-highlight-demo',
+          component: resolve => { require(['@/pages/demo/plugins/highlight/demo.vue'], resolve) }
+        }
+      ]
+    },
+    // mock
+    {
+      title: '模拟数据',
+      icon: 'globe',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'mock/readme',
+          name: 'demo-plugin-mock-readme',
+          component: resolve => { require(['@/pages/demo/plugins/mock/readme.vue'], resolve) }
+        },
+        {
+          title: '语法规范',
+          icon: 'file-text',
+          path: 'mock/grammaticalNorm',
+          name: 'demo-plugin-mock-grammaticalNorm',
+          component: resolve => { require(['@/pages/demo/plugins/mock/grammaticalNorm.vue'], resolve) }
+        },
+        {
+          title: '数据模板示例',
+          icon: 'file-o',
+          path: 'mock/demoDTD',
+          name: 'demo-plugin-mock-demoDTD',
+          component: resolve => { require(['@/pages/demo/plugins/mock/demoDTD.vue'], resolve) }
+        },
+        {
+          title: '数据占位符示例',
+          icon: 'file-o',
+          path: 'mock/demoDPD',
+          name: 'demo-plugin-mock-demoDPD',
+          component: resolve => { require(['@/pages/demo/plugins/mock/demoDPD.vue'], resolve) }
+        }
+      ]
+    }
+  ]
+}
+
+// [插件] 路由设置
+export const pluginRouter = {
+  ...pluginMenu,
+  children: [].concat(...pluginMenu.children.map(e => e.children))
+}
diff --git a/src/router/menu/index.js b/src/router/menu/index.js
new file mode 100644
index 00000000..fdede460
--- /dev/null
+++ b/src/router/menu/index.js
@@ -0,0 +1,14 @@
+import { pluginMenu, pluginRouter } from './_plugin'
+import { chartsMenu, chartsRouter } from './_charts'
+
+// 菜单
+export const menu = [
+  pluginMenu,
+  chartsMenu
+]
+
+// 路由
+export const router = [
+  pluginRouter,
+  chartsRouter
+]
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 00000000..49ce77e9
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import menu from './modules/menu'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    menu
+  }
+})
diff --git a/src/store/modules/menu.js b/src/store/modules/menu.js
new file mode 100644
index 00000000..d2e834cb
--- /dev/null
+++ b/src/store/modules/menu.js
@@ -0,0 +1,10 @@
+export default {
+  state: {
+    sideMenu: []
+  },
+  mutations: {
+    setSideMenu (state, props) {
+      state.sideMenu = props.sideMenu
+    }
+  }
+}
diff --git a/static/.gitkeep b/static/.gitkeep
new file mode 100755
index 00000000..e69de29b
diff --git a/static/markdownFiles/article/highLight组件使用方法.md b/static/markdownFiles/article/highLight组件使用方法.md
new file mode 100644
index 00000000..152de484
--- /dev/null
+++ b/static/markdownFiles/article/highLight组件使用方法.md
@@ -0,0 +1,41 @@
+`highLight` 组件已经全局注册，可以直接使用
+
+组件内部使用 `Prism` 实现代码高亮
+
+```
+<Card>
+  <p slot="title">示例1</p>
+  <highLight :data="test1"></highLight>
+</Card>
+<br>
+<Card>
+  <p slot="title">示例2</p>
+  <highLight :data="test2"></highLight>
+</Card>
+<br>
+<Card>
+  <p slot="title">示例3</p>
+  <highLight :data="test3" :stringify="false"></highLight>
+</Card>
+```
+
+数据源
+
+```
+data () {
+  return {
+    test1: [0, 1, 2, 3],
+    test2: {
+      name: 'me',
+      like: [
+        'like1',
+        'like2'
+      ],
+      address: [
+        'address1'
+      ]
+    },
+    test3: '<Markdown url="/static/markdownFiles/article/highLight组件使用方法.md"></Markdown>'
+  }
+}
+```
\ No newline at end of file
diff --git a/static/markdownFiles/article/mock演示页面介绍.md b/static/markdownFiles/article/mock演示页面介绍.md
new file mode 100644
index 00000000..2ddc66a3
--- /dev/null
+++ b/static/markdownFiles/article/mock演示页面介绍.md
@@ -0,0 +1,5 @@
+你可以点击每个演示卡片右上角的刷新按钮检查每次 `mock` 不同的结果
+
+官方演示页面 [http://mockjs.com/examples.html](http://mockjs.com/examples.html)
+
+官方 `Wiki` [https://github.com/nuysoft/Mock/wiki/Getting-Started](https://github.com/nuysoft/Mock/wiki/Getting-Started)
\ No newline at end of file
diff --git a/static/markdownFiles/article/mock语法规范.md b/static/markdownFiles/article/mock语法规范.md
new file mode 100644
index 00000000..22ac0160
--- /dev/null
+++ b/static/markdownFiles/article/mock语法规范.md
@@ -0,0 +1,181 @@
+# 语法规范
+
+Mock.js 的语法规范包括两部分：
+
+1. 数据模板定义规范（Data Template Definition，DTD）
+2. 数据占位符定义规范（Data Placeholder Definition，DPD）
+
+## 数据模板定义规范 DTD
+
+**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
+
+```js
+// 属性名   name
+// 生成规则 rule
+// 属性值   value
+'name|rule': value
+```
+
+**注意：**
+
+* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
+* _生成规则_ 是可选的。
+* _生成规则_ 有 7 种格式：
+    1. `'name|min-max': value`
+    1. `'name|count': value`
+    1. `'name|min-max.dmin-dmax': value`
+    1. `'name|min-max.dcount': value`
+    1. `'name|count.dmin-dmax': value`
+    1. `'name|count.dcount': value`
+    1. `'name|+step': value`
+* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
+* _属性值_ 中可以含有 `@占位符`。
+* _属性值_ 还指定了最终值的初始值和类型。
+
+<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
+
+**生成规则和示例：**
+
+### 1. 属性值是字符串 **String**
+
+1. `'name|min-max': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
+
+2. `'name|count': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数等于 `count`。
+
+### 2. 属性值是数字 **Number**
+
+1. `'name|+1': number` 
+
+    属性值自动加 1，初始值为 `number`。
+
+2. `'name|min-max': number` 
+
+    生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
+
+3. `'name|min-max.dmin-dmax': number` 
+
+    生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
+
+```js
+Mock.mock({
+    'number1|1-100.1-10': 1,
+    'number2|123.1-10': 1,
+    'number3|123.3': 1,
+    'number4|123.10': 1.123
+})
+// =>
+{
+    "number1": 12.92,
+    "number2": 123.51,
+    "number3": 123.777,
+    "number4": 123.1231091814
+}
+```
+
+### 3. 属性值是布尔型 **Boolean**
+
+1. `'name|1': boolean` 
+
+    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
+
+2. `'name|min-max': value` 
+
+    随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
+
+### 4. 属性值是对象 **Object**
+
+1. `'name|count': object`
+
+    从属性值 `object` 中随机选取 `count` 个属性。
+
+2. `'name|min-max': object`
+
+    从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
+
+### 5. 属性值是数组 **Array**
+
+1. `'name|1': array` 
+
+    从属性值 `array` 中随机选取 1 个元素，作为最终值。
+
+2. `'name|+1': array` 
+
+    从属性值 `array` 中顺序选取 1 个元素，作为最终值。
+
+3. `'name|min-max': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
+
+4. `'name|count': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
+
+### 6. 属性值是函数 **Function**
+
+1. `'name': function` 
+
+    执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
+
+### 7. 属性值是正则表达式 **RegExp**
+
+1. `'name': regexp` 
+
+    根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
+
+    ```js
+    Mock.mock({
+        'regexp1': /[a-z][A-Z][0-9]/,
+        'regexp2': /\w\W\s\S\d\D/,
+        'regexp3': /\d{5,10}/
+    })
+    // =>
+    {
+        "regexp1": "pJ7",
+        "regexp2": "F)\fp1G",
+        "regexp3": "561659409"
+    }
+    ```
+
+## 数据占位符定义规范 DPD
+
+_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
+
+_占位符_ 的格式为：
+
+```
+@占位符
+@占位符(参数 [, 参数])
+```
+
+**注意：**
+
+1. 用 `@` 来标识其后的字符串是 _占位符_。
+2. _占位符_ 引用的是 `Mock.Random` 中的方法。
+3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
+4. _占位符_ 也可以引用 _数据模板_ 中的属性。
+5. _占位符_ 会优先引用 _数据模板_ 中的属性。
+6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
+
+```js
+Mock.mock({
+    name: {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+    }
+})
+// =>
+{
+    "name": {
+        "first": "Charles",
+        "middle": "Brenda",
+        "last": "Lopez",
+        "full": "Charles Brenda Lopez"
+    }
+}
+```
\ No newline at end of file
diff --git a/static/markdownFiles/demo/baseMarkdowmFile.md b/static/markdownFiles/demo/baseMarkdowmFile.md
new file mode 100644
index 00000000..9ae720d5
--- /dev/null
+++ b/static/markdownFiles/demo/baseMarkdowmFile.md
@@ -0,0 +1,26 @@
+[https://github.com/FairyEver](https://github.com/FairyEver)
+
+> 引用文字
+
+`JavaScript` 代码
+
+```
+const demo = (name = 'vue') => {
+  console.log(name)
+}
+demo(
+```
+
+`CSS` 代码
+
+```
+body {
+  background-color: #333;
+  height: 100%;
+}
+```
+
+| name | age | sex | delFlag |
+| --- | --- | --- | --- |
+| ban | 24 | 0 | 0 |
+| FairyEver | 24 | 1 | 0 |
\ No newline at end of file