first commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1 @@
+/static

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    '@nuxtjs'
+  ],
+  // add your custom rules here
+  rules: {
+    'no-console': 'off'
+  }
+}

.gitignore

@@ -0,0 +1,84 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+# Service worker
+sw.*

README.md

@@ -0,0 +1,22 @@
+# blog-client
+
+> My Blog Client
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn run dev
+
+# build for production and launch server
+$ yarn run build
+$ yarn start
+
+# generate static project
+$ yarn run generate
+```
+
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

components/Footer.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+footer
+  a#gotop.scroll-top(href='javascript:;', style='display: none;')
+    Icon(:icon="['fas', 'angle-double-up']")
+  #mobileToc.mobileToc(style='display: none;')
+    | 目录
+  .footer
+    | Copyright © 2018 WangYi.
+    br
+    |       All Rights Reserved. 浙ICP备14013313号-2
+</template>

components/LeftContent.vue

@@ -0,0 +1,113 @@
+<template lang="pug">
+#leftcontent
+  #wrap
+    #leftMain
+      h1.title
+        nuxt-link(to='/') 轶哥博客
+      .widget.avatar
+        .widgetTitle
+          label 关于作者
+        img(src='https://cdn.wyr.me/avatar.png')
+        p.aboutMe
+          | 妄图改变世界的全栈程序员。
+        .social
+          ul
+            li
+              a(href='https://github.com/yi-ge', target='_blank')
+                Icon(:icon="['fab', 'github']")
+            li
+              Icon(:icon="['fab', 'qq']" @click="info('qq')")
+            li
+              Icon(:icon="['fab', 'weixin']" @click="info('weixin')")
+            li
+              a(href='http://weibo.com/syxj', target='_blank')
+                Icon(:icon="['fab', 'weibo']")
+            li
+              a(href='https://twitter.com/FYTencel', target='_blank')
+                Icon(:icon="['fab', 'twitter']")
+            li
+              a(href='https://www.facebook.com/cnyige', target='_blank')
+                Icon(:icon="['fab', 'facebook']")
+            li
+              a(href='https://plus.google.com/u/0/101716298673782941484', target='_blank')
+                Icon(:icon="['fab', 'google-plus']")
+            li
+              a(href='https://t.me/cnyige', target='_blank')
+                Icon(:icon="['fab', 'telegram']")
+            li
+              Icon(:icon="['fas', 'envelope']" @click="info('email')")
+          .social-info-box(v-if='socialInfo')
+            | {{ socialInfo }}
+      #navication.widget.navication
+        .widgetTitle
+          label 导航
+        ul
+          li
+            nuxt-link(to='/') 主页
+          li(v-for='(categorys, index) in $store.state.categorys', :key='index', v-show="categorys.name !== '未分类'")
+            nuxt-link(:to="'/' + categorys.slug") {{ categorys.name }}
+        .search-box
+          input.search(type='text', placeholder='搜索', v-model='searchVal', @keyup.enter='search')
+          Icon(:icon="['fas', 'search']" @click="search")
+      .widget.comment
+        .widgetTitle
+          label 最新评论
+        ul
+          li(v-for='(newComment, index) in $store.state.newComments', :key='index')
+            strong {{ newComment.comment_author }}：
+            span
+              nuxt-link(:to="'/post/' + newComment.post.ID + '#comments'") {{ newComment.comment_content }}
+            .meta
+              span
+                Icon(:icon="['far', 'clock']")
+                | &nbsp; {{ newComment.comment_date }}
+              span
+                | —
+                nuxt-link(:to="'/post/' + newComment.post.ID") {{ newComment.post.post_title }}
+      .widget.posts
+        .widgetTitle
+          label 热门文章
+        ul
+          li(v-for='(hotArticle, index) in $store.state.hotArticle', :key='index')
+            .thumbnail
+              img(width='150', :src="hotArticle.postimages[0].guid + '?x-oss-process=image/resize,m_lfit,h_150,w_150'")
+            .detail
+              nuxt-link(:to="'/post/' + hotArticle.ID", :title='hotArticle.post_title') {{ hotArticle.post_title }}
+              .meta {{ hotArticle.post_modified }}
+      #tags.widget.tags
+        .widgetTitle
+          label 标签
+        .tagcloud
+          nuxt-link(:to="'/tag/' + tag.slug", :title='tag.name', v-for='tag in $store.state.tags', :key='tag.term_id') {{ tag.name }}
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      socialInfo: false,
+      searchVal: ''
+    }
+  },
+  methods: {
+    info(type) {
+      if (type === 'qq') {
+        this.socialInfo = 'QQ: 373226722'
+      } else if (type === 'weixin') {
+        this.socialInfo = '微信: wy373226722'
+      } else if (type === 'email') {
+        this.socialInfo = 'Email: a@wyr.me'
+      }
+
+      setTimeout(() => {
+        this.socialInfo = false
+      }, 3000)
+    },
+    search() {
+      console.log(this.searchVal)
+      if (this.searchVal !== '') this.$router.push({ path: 'search?q=' + this.searchVal })
+    }
+  }
+}
+</script>

components/Slide.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="slide"
+    @click="$emit('click')"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Slide'
+}
+</script>
+
+<style lang="stylus">
+.slide
+  height 100%
+  width 100%
+  flex-shrink 0
+  z-index 10
+  overflow hidden
+
+  img
+    -webkit-user-drag none
+</style>

components/Swiper.vue

@@ -0,0 +1,414 @@
+<template>
+  <div
+    class="swiper-container"
+    @touchmove="fn"
+  >
+    <div
+      class="default-swiper-box"
+      :class="box"
+      @transitionend="transitionend"
+      @touchstart="s"
+      @touchmove="m"
+      @touchend="e"
+      @mousedown="s"
+      @mousemove="m"
+      @mouseup="e"
+    >
+      <slot />
+    </div>
+
+    <slot name="pagination">
+      <!-- 默认提供了一个 pagination -->
+      <div
+        v-if="pagination"
+        class="swiper-pagination"
+      >
+        <div
+          v-for="(value, key) in reallySlidesNumber"
+          :key="key"
+          class="swiper-dot"
+          :class="{'swiper-dot-active': currentSlide === key}"
+        />
+      </div>
+    </slot>
+    <!-- 这两个就不默认提供了 -->
+    <slot name="arrowLeft" />
+    <slot name="arrowRight" />
+
+    <!-- 当你需要在全局的内容里面加一些玩意的时候 -->
+    <slot name="g" />
+  </div>
+</template>
+
+<script>
+function toArray(arraylike) {
+  return Array.prototype.slice.call(arraylike)
+}
+
+export default {
+  name: 'Swiper',
+  props: {
+    /* 一次滑动的默认时间 */
+    duration: {
+      type: Number,
+      default: 500
+    },
+    /* 两次滑动的间隔时间 */
+    interval: {
+      type: Number,
+      default: 2500
+    },
+    /* 是否自动播放 */
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    /* 用户滑动多少距离, 翻页 */
+    therehold: {
+      type: Number,
+      default: 110
+    },
+    defaultSlide: {
+      type: Number,
+      default: 0
+    },
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    /* 有时候全屏滚动, 的确想要禁用垂直方向的滚动的时候 */
+    vLock: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      swiper: null,
+      swiperWidth: 0,
+      slides: null,
+      slidesNumber: 0,
+      reallySlidesNumber: 0,
+      currentSlide: 0,
+      timer: null,
+      userDuration: 200,
+      pos: {
+        startX: 0,
+        moveX: 0,
+        endX: 0,
+        local: 0,
+        distance: 0
+      },
+      moving: false,
+      unlock: false,
+      activeId: '',
+      mousedown: false,
+      box: '',
+      isOnly: false
+    }
+  },
+  mounted() {
+    this.box = 'swiper-box-' + Math.random().toFixed(2) * 1000
+    setTimeout(() => {
+      /* 初始化的时候, 拿到所有的 DOM 元素以及相关属性 */
+      this.initElement()
+      if (this.isOnly) {
+        return
+      }
+      /* 克隆两个节点, 用来实现 loop 效果 */
+      this.cloneSlide()
+      /* 克隆结束之后, 需要设置默认显示的slide */
+      this.setDefaultSlide()
+      /*
+      ## start
+      设置默认slide之后, 就需要开始设置定时器, 自动轮播
+      */
+      if (this.autoplay) {
+        this.play()
+      }
+    }, 100)
+  },
+  methods: {
+    /* 阻止容器的上下滚动, 并且只有在水平方向上面滚动超过 10px 才可以阻止 */
+    fn(e) {
+      if (this.vLock || Math.abs(this.pos.startX - this.pos.moveX) > 10) {
+        e.preventDefault()
+      }
+    },
+    /* 滑动到指定的页面 */
+    slideTo(index) {
+      if (!this.moving) {
+        const currentSlide = Math.round(Math.abs(this.left()) / this.swiperWidth)
+        /* 如果索引值不合法 或者和目前的值相等 */
+        if (index > this.slidesNumber - 2 - 1 || index < 0 || currentSlide === index + 1) {
+          return
+        }
+        this.moving = true
+        clearTimeout(this.timer)
+        /*
+        说明要往右边滑动
+        注意这里不管需要滑动多少个, duration 都是 300, 这个如果需要, 可以
+        自己根据起点/终点计算出一个合适的值.
+      */
+        this.transitionDuration(300)
+
+        this.translateX(-this.swiperWidth * (index + 1))
+      }
+    },
+    next() {
+      if (!this.moving) {
+        clearTimeout(this.timer)
+        this.moving = true
+        this.transitionDuration(this.userDuration)
+        this.translateX(this.left() - this.swiperWidth)
+      }
+    },
+    previous() {
+      if (!this.moving) {
+        clearTimeout(this.timer)
+        this.moving = true
+        this.transitionDuration(this.userDuration)
+        this.translateX(this.left() + this.swiperWidth)
+      }
+    },
+    initElement() {
+      /* 因为传递过来的是个字符串, 所以要手动加点 */
+      this.swiper = document.querySelector('.' + this.box)
+      this.swiperWidth = this.swiper.clientWidth
+      this.slides = toArray(this.swiper.children)
+      this.slidesNumber = this.slides.length
+      /* 实际的 slide 个数, 因为 slidesNumber 会在后面重新赋值 */
+      this.reallySlidesNumber = this.slides.length
+      /* 如果就仅仅只有一个 slide, 那么不克隆, 不绑定, 就纯展示就可以了 */
+      if (this.reallySlidesNumber === 1) {
+        this.isOnly = true
+      }
+    },
+    cloneSlide() {
+      const head = this.slides[0].cloneNode(this.slides[0], true)
+      const tail = this.slides[this.slidesNumber - 1].cloneNode(this.slides[this.slidesNumber - 1], true)
+      this.swiper.appendChild(head)
+      this.swiper.insertBefore(tail, this.slides[0])
+      /* 克隆节点之后, 需要重置一些属性 */
+      this.slides = toArray(this.swiper.children)
+      this.slidesNumber = this.slides.length
+    },
+    /* 根据用户给定的 defaultSlide 设置 init slide 的值 */
+    setDefaultSlide() {
+      /*
+        一切用户给定的值, 都是从 0 - x 开始, 比如用户数据里面有 6个数据
+        那么给定的就是 0 - 5
+        但是我们内部运算的时候, 实际上我们的索引能到 0 - 7
+        0 是实际的 5 的拷贝, 7 实际上是实际的0的拷贝
+
+        所以当用户给定的 defaultSlide =0, 我们实际上是要让展示内部索引为 1 的元素
+      */
+      /* 如果用户设置了一个非法值, 直接抛出异常 */
+      if (this.defaultSlide < 0 || this.defaultSlide > this.slidesNumber - 2 - 1) {
+        throw new Error('[swiper:Error]: You have set a wrong defaultSlide value with defaultSlide = ' + this.defaultSlide)
+      }
+      this.translateX(-this.swiperWidth * (this.defaultSlide + 1))
+      //
+      // this.currentSlide = this.defaultSlide;
+    },
+    /*
+      ## start
+    */
+    play() {
+      this.timer = setTimeout(() => {
+        clearTimeout(this.timer)
+        this.moving = true
+        this.unlock = false
+        this.transitionDuration(this.duration)
+        this.translateX(-(this.swiperWidth + Math.abs(this.left())))
+      }, this.interval)
+    },
+    transitionend() {
+      this.transitionDuration(0)
+      /*
+      一次滑动结束之后, 通过计算, 实际上我们可以拿到当前处于内部索引的第几个 slide
+      拿到这个 currentSlide 我们就知道当前是不是滚动到最后一个了
+    */
+      const currentSlide = Math.round(Math.abs(this.left()) / this.swiperWidth)
+      this.currentSlide = currentSlide - 1
+      /* 如果滚动到最后一个, 那么就要瞬间跳转一下, 到外部看起来的第一个, 内部的 */
+      if (currentSlide === this.slidesNumber - 1) {
+        this.translateX(-this.swiperWidth)
+        this.currentSlide = 0
+      }
+      if (currentSlide === 0) {
+        this.translateX(-this.swiperWidth * (this.slidesNumber - 2))
+        this.currentSlide = this.slidesNumber - 3
+      }
+      this.$emit('transitionend', this.currentSlide)
+      /*
+      防止极限操作, 用户在滑动结束之后事件还没发送出去又滑动导致计算
+      结果错误, 所以等事件发出去之后再解开
+    */
+      this.moving = false
+      /*
+      ##start
+    */
+      if (this.autoplay) {
+        this.play()
+      }
+    },
+    /* toushstart handler */
+    s(e) {
+      if (this.isOnly) {
+        return
+      }
+      if (e.type === 'mousedown' && !this.moving) {
+        this.mousedown = true
+        this.pos.startX = e.pageX
+        this.pos.local = this.left()
+        clearTimeout(this.timer)
+        this.transitionDuration(0)
+      } else {
+        this.activeId = toArray(e.changedTouches)[0].identifier
+        if (!this.moving) {
+          const active = e.touches.length - 1
+          clearTimeout(this.timer)
+          this.transitionDuration(0)
+          this.unlock = true
+          this.pos.startX = e.touches[active].clientX
+          /* 一次 touch 的 起始local 点, 是固定的 */
+          this.pos.local = this.left()
+        }
+      }
+    },
+    /* toushmove handler */
+    m(e) {
+      if (this.isOnly) {
+        return
+      }
+      if (e.type === 'mousemove' && this.mousedown && !this.moving) {
+        this.pos.moveX = e.pageX
+        this.pos.distance = this.pos.moveX - this.pos.startX
+        this.translateX(this.pos.local + this.pos.distance)
+      } else if (!this.moving && this.unlock) {
+        const active = e.touches.length - 1
+        this.pos.moveX = e.touches[active].clientX
+        this.pos.distance = this.pos.moveX - this.pos.startX
+        this.translateX(this.pos.local + this.pos.distance)
+      }
+    },
+    /* toushend handler */
+    e(e) {
+      if (this.isOnly) {
+        return
+      }
+      if (e.type === 'mouseup' && this.mousedown && !this.moving) {
+        this.mousedown = false
+        this.pos.endX = e.pageX
+        this.pos.distance = this.pos.endX - this.pos.startX
+        this.recover()
+      } else {
+        const curId = toArray(e.changedTouches)[0].identifier
+        if (!this.moving && this.unlock && (curId === this.activeId)) {
+          this.unlock = false
+          this.pos.endX = e.changedTouches[0].clientX
+          this.pos.distance = this.pos.endX - this.pos.startX
+          this.recover()
+        }
+      }
+    },
+    /* 响应用户滚动行为 */
+    recover() {
+      this.transitionDuration(this.userDuration)
+      const distance = Math.abs(this.left()) % this.swiperWidth
+      let point = []
+      let direction = ''
+      /*
+        主要是为了拿到当前状态下面, swiper 距离正常状态的, 左右移动的距离分别是多少.
+      */
+      if (this.left() > 0) {
+        point = [distance, this.swiperWidth - distance]
+      } else {
+        point = [this.swiperWidth - distance, distance]
+      }
+      if (this.pos.distance > 0) {
+        direction = 'to-right'
+      } else if (this.pos.distance < 0) {
+        direction = 'to-left'
+      } else {
+        direction = 'none'
+      }
+      if (direction === 'none') {
+        if (this.autoplay) {
+          this.play()
+        }
+      }
+      if (direction === 'to-right') {
+        this.moving = true
+        /* 说明需要向右边移动 */
+        if (point[0] > this.therehold) {
+          this.translateX(this.left() + point[1])
+          const next = (this.left() + point[1]) / this.swiperWidth
+          if (Math.abs(next) === 0) {
+            this.unlock = false
+          }
+        } else {
+          this.translateX(this.left() - point[0])
+        }
+      }
+      if (direction === 'to-left') {
+        this.moving = true
+        if (point[1] > this.therehold) {
+          this.translateX(this.left() - point[0])
+          const next = (this.left() - point[0]) / this.swiperWidth
+          if (Math.abs(next) === this.slidesNumber - 1) {
+            this.unlock = false
+          }
+        } else {
+          this.translateX(this.left() + point[1])
+        }
+      }
+    },
+    translateX(value) {
+      this.swiper.style.transform = 'translate3d(' + value + 'px, 0, 0)'
+    },
+    transitionDuration(ms) {
+      this.swiper.style.transitionDuration = ms + 'ms'
+    },
+    left() {
+      return this.swiper.getBoundingClientRect().left
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.swiper-container
+  position relative
+  width 100%
+  overflow hidden
+
+.default-swiper-box
+  height 100%
+  width 100%
+  display flex
+
+// 分页
+.swiper-pagination
+  position absolute
+  bottom 10px
+  height 18px
+  width 100%
+  background transparent
+  display flex
+  align-items center
+  justify-content center
+
+  .swiper-dot
+    height 8px
+    width 8px
+    background #000
+    opacity 0.2
+    margin 0 5px
+    border-radius 50%
+
+  .swiper-dot-active
+    opacity 1
+    background #3498db
+</style>

layouts/common.styl

@@ -0,0 +1,555 @@
+*
+  margin 0
+  padding 0
+
+body, html
+  color #2e2f30
+  letter-spacing 0.5px
+  font-family 'Source Sans Pro', 'Playfair Display', PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, Arial, sans-serif
+  height 100%
+  width 100%
+  background-color #fff
+
+#__nuxt, .content
+  width 100%
+  height 100%
+  max-width 1040px
+  margin 0 auto
+  position relative
+  box-sizing border-box
+
+a, a:visited
+  color #333333
+
+a:focus, a:hover
+  color #cd0216
+
+a, a:focus, a:hover, a:visited
+  text-decoration none
+
+/* Opera Fix */
+body:before
+  content ''
+  height 100%
+  float left
+  width 0
+  margin-top -32767px
+
+footer
+  text-align center
+  position relative
+  margin-top -35px
+  height 35px
+  clear both
+  font-size 9px
+  margin-bottom 5px
+
+  .footer
+    padding-top 10px
+
+.page-enter-active, .page-leave-active
+  transition opacity 0.5s
+
+.page-enter, .page-leave-active
+  opacity 0
+
+.container
+  min-height 100%
+  margin 0 auto
+
+.articelAbstractContent p, .articelAbstractContent h1, .articelAbstractContent h2, .articelAbstractContent h3, .articelAbstractContent h4, .articelAbstractContent h5, .articelAbstractContent h6, .articelContent p, .articelContent h1, .articelContent h2, .articelContent h3, .articelContent h4, .articelContent h5, .articelContent h6
+  margin-top 1em
+
+.articelAbstractContent, .articelContent
+  word-wrap break-word
+
+  img
+    max-width 100%
+    display block
+    vertical-align middle
+    margin auto
+    width auto
+    height auto
+
+  ul, ol
+    margin-left 60px
+
+// 点击滑动到顶部那个按钮的样式
+.scroll-top
+  transition all 0.4s ease-in-out
+  width 25px
+  height 25px
+  line-height 25px
+  text-align center
+  opacity 0.6
+  background-color #000000
+  color #ffffff
+  position fixed
+  right 8px
+  bottom 8px
+  z-index 999
+  padding 4px
+
+  i
+    color #fff
+
+.articleImgs
+  overflow hidden
+
+  position relative
+    img
+      width 100%
+      cursor pointer
+
+.Info
+  background-color #fff
+  box-shadow 0 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.1)
+  margin-bottom 50px
+  text-align center
+  padding 40px
+  font-size responsive
+  font-weight 300
+
+.btn-footer
+  margin-top 50px
+  font-size 12px
+  color #cccccc
+  float left
+
+  i
+    margin 10px
+
+.btn-next
+  float right
+
+.btn-disable
+  color #dfdede !important
+
+footer .footer
+  color #a2a2a2
+  text-align left
+  line-height 1.5
+  margin 20px 0
+
+.page-container
+  width 100%
+  height 100%
+
+.page-container::after
+  content ' '
+  display block
+  height 0
+  visibility hidden
+  clear both
+
+#LeftMenu
+  overflow-y auto
+  overflow-x hidden
+  display block
+  background-color #fff
+  height 100%
+  width 295px
+  float left
+
+#rightContent
+  margin-left 300px
+  padding 0 50px
+  height 100%
+
+.header
+  display none
+
+.articleList
+  border-bottom 1px solid #F0F0F0
+  margin-bottom 30px
+
+::-webkit-input-placeholder
+  font-weight 300
+
+::-moz-placeholder /* firefox 19+ */
+  font-weight 300
+
+/* firefox 19+ */
+:-ms-input-placeholder /* ie */
+  font-weight 300
+
+/* ie */
+input:-moz-placeholder
+  font-weight 300
+
+#leftcontent
+  color #777777
+  opacity 1
+  height 100%
+  padding 0 40px
+  box-sizing border-box
+  width 295px
+  visibility visible
+  -webkit-transition opacity 0.24s ease-in-out
+  -moz-transition opacity 0.24s ease-in-out
+  transition opacity 0.24s ease-in-out
+
+#wrap
+  min-height 100%
+
+#leftMain
+  overflow auto
+
+  .title
+    text-align center
+    font-weight 300
+    color #000000
+    margin-top 40px
+
+  .widget
+    margin-bottom 10px
+
+  .widgetTitle
+    font-size 18px
+    line-height 100%
+    text-align center
+    padding 10px 0 6px 0
+    margin 0 0 30px 0
+    position relative
+    border 0
+    outline 0
+    vertical-align baseline
+    box-sizing border-box
+
+    label
+      color #333333
+      font-weight 300
+      background-color #fff
+      display inline-block
+      padding 5px 10px
+      position relative
+      z-index 1
+      margin 0
+      font-size 100%
+      font-family inherit
+      vertical-align baseline
+      box-sizing border-box
+
+  .widgetTitle:after
+    height 1px
+    content ''
+    margin-top 2px
+    border-top 1px solid #aaa
+    position absolute
+    top 50%
+    left 0
+    right 0
+    border-top 1px solid #aaaaaa
+
+  .avatar
+    margin-bottom 40px
+
+    > img
+      width 100%
+
+    .aboutMe
+      font-size 9px
+      line-height 1.5
+      margin-top 10px
+
+    .social
+      margin 15px 5px
+      height 20px
+      font-size 12px
+      font-weight 300
+
+      .social-info-box
+        border 1px solid #d0d0d0
+        width 100%
+        height 30px
+        line-height 30px
+        text-align center
+        font-size 14px
+        margin-bottom 20px
+
+      ul
+        height 30px
+        list-style none
+
+        > li:first-child
+          font-size 14px
+          margin-top -1px
+          margin-left 0
+
+        > li
+          a
+            color #948d8d
+
+          a:hover
+            color #cd0216
+
+          color #948d8d
+          float left
+          height 30px
+          margin-left 11px
+          cursor pointer
+
+        > li:hover
+          color #cd0216
+
+  .navication
+    margin-bottom 40px
+    font-size 15px
+    font-weight 300
+    top 25px
+    width 215px
+
+    ul
+      margin-left 20px
+      list-style circle
+
+      > li
+        margin-left 11px
+        line-height 1.8
+
+  .search-box
+    border 1px solid #cccccc
+    margin-top 30px
+    padding 8px
+    position relative
+    color #cccccc
+
+    .search
+      border none
+      border-right solid 1px #ccc
+      width 160px
+
+    .fa-search
+      position absolute
+      top 11px
+      right 13px
+      cursor pointer
+
+    .fa-search:hover
+      color #cd0216
+
+  .comment
+    font-size 12px
+    font-weight 300
+    margin-bottom 40px
+    overflow hidden
+
+    ul > li
+      width 100%
+      line-height 140%
+      margin-bottom 15px
+      padding-bottom 15px
+      border-bottom 1px solid #f0f0f0
+
+    ul > li:last-child
+      margin-bottom 0
+      padding-bottom 0
+      border-bottom none
+
+    .meta
+      margin-top 10px
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+
+  .posts
+    margin-bottom 40px
+
+    ul > li
+      width 100%
+      line-height 140%
+      margin-bottom 15px
+      padding-bottom 15px
+      border-bottom 1px solid #f0f0f0
+
+    ul > li:last-child
+      margin-bottom 0
+      padding-bottom 0
+      border-bottom none
+
+    .thumbnail
+      width 60px
+      float left
+      padding-top 3px
+
+      > img
+        max-width 100%
+        height auto
+
+    .detail
+      margin-left 70px
+      font-weight 300
+      font-size 12px
+
+  .tags
+    margin-bottom 500px
+
+    .tagcloud
+      width 100%
+
+      a
+        display inline-block
+        font-size 12px !important
+        font-weight 400
+        line-height 1
+        text-transform uppercase
+        margin 0 5px 10px 0
+        padding 5px
+        border 1px solid #c0c0c0
+        color #666666
+
+        &:hover
+          color #00897b
+
+// 文章列表
+.pageList
+  .articleList
+    background-color #fff
+    margin-top 30px
+
+    .articleImgs
+      width 100%
+
+      img
+        width 100%
+
+    .articleAbstract
+      padding 50px 10px
+
+      pre
+        text-align 0.16rem
+        overflow-x auto
+        line-height 1
+
+        code
+          padding 16px
+
+      code
+        color #24292e
+        background-color rgba(27, 31, 35, 0.05)
+        border-radius 3px
+        font-size 85%
+        padding 2px 5px
+
+      .articleTitle
+        text-align center
+        font-size 24px
+
+      .articalMeta
+        text-align center
+        padding 20px 0
+        font-size 12px
+        color #a1887f
+
+        ul
+          list-style none
+          padding-right 20px
+
+          > li
+            display inline-block
+            margin-left 20px
+            line-height 2
+
+            > i
+              margin-right 8px
+
+            > span a
+              color #a1887f
+              margin-left 10px
+
+            a span
+              color #a1887f
+
+            > span a:first-child
+              margin-left 0
+
+          > li :first-child
+            margin-left 0
+
+      .articelAbstractContent
+        margin-top 20px
+        line-height 2
+        font-weight 300
+        font-size responsive
+
+      .readMore
+        text-align center
+        margin 50px auto 20px auto
+
+        .readMoreBtn
+          padding 10px
+          border 1px solid #795548
+          color #795548
+
+          &:hover
+            color #cd0216
+            border 1px solid #cd0216
+
+.mobileToc
+  transition all 0.4s ease-in-out
+  width 25px
+  height 25px
+  line-height 25px
+  text-align center
+  font-size 9px
+  opacity 0.6
+  background-color #000000
+  color #ffffff
+  position fixed
+  right 8px
+  bottom 38px
+  z-index 999
+  padding 4px
+
+@media (max-width: 768px)
+  .header
+    position fixed
+    z-index 999999
+    width 100%
+    display block
+    box-sizing border-box
+    top 0
+    height 70px
+    background-color #fff
+    padding 5px 20px
+
+    .title
+      text-align right
+      color #505153
+      font-weight 300
+      line-height 60px
+      font-size 35px
+      margin 0
+
+    .svg
+      display block
+      float left
+      line-height 60px
+      padding-top 6px
+      cursor pointer
+
+  #leftBackgroundColor, #LeftMenu
+    display none
+
+  #rightContent
+    margin-left 0
+    padding 0 20px
+
+  .pageList
+    .articleList
+      margin-top 50px
+
+      .articleAbstract
+        padding 20px
+
+blockquote
+  margin-top 10px
+  margin-bottom 10px
+  padding-left 10px
+  padding-right 10px
+  border-left 3px solid #ccc
+  background-color #f1f1f1
+
+.articelContent
+  a
+    color #de8787

layouts/default.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+.content
+  #loading.allSpinner
+    .spinner
+      .bounce1
+      .bounce2
+      .bounce3
+  .container
+    header
+      .header
+        .svg(@click='showLeftMenu')
+          svg(style='width: 25px; height:25px', viewBox='0 0 1024 1024', version='1.1', xmlns='http://www.w3.org/2000/svg', width='200', height='200')
+            path(d='M192 482l640 0 0 64-640 0 0-64Z')
+            path(d='M192 290l640 0 0 64-640 0 0-64Z')
+            path(d='M192 674l640 0 0 64-640 0 0-64Z')
+        nuxt-link(to='/')
+          h1.title
+            | 轶哥博客
+    .page-container
+      #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
+        LeftContent
+      #rightContent
+        nuxt
+        Footer
+</template>
+
+<script>
+import LeftContent from '~/components/LeftContent'
+import Footer from '~/components/Footer'
+
+export default {
+  components: {
+    LeftContent,
+    Footer
+  },
+  data() {
+    return {
+      showLeftMenuValue: 'block',
+      isPhone: ''
+    }
+  },
+  mounted() {
+    const phoneStyle = 'height: 100%; position: fixed; top: 70px; background-color: #fff; z-index:9999; overflow: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch;'
+    if (document.body.clientWidth > 768) {
+      this.showLeftMenuValue = 'block'
+      this.isPhone = ''
+    } else {
+      this.showLeftMenuValue = 'none'
+      this.isPhone = phoneStyle
+    }
+
+    window.onresize = () => {
+      if (document.body.clientWidth > 768) {
+        this.showLeftMenuValue = 'block'
+        this.isPhone = ''
+      } else {
+        this.showLeftMenuValue = 'none'
+        this.isPhone = phoneStyle
+      }
+    }
+  },
+  methods: {
+    showLeftMenu() {
+      if (this.showLeftMenuValue !== 'block') {
+        this.showLeftMenuValue = 'block'
+      } else {
+        this.showLeftMenuValue = 'none'
+      }
+    }
+  }
+}
+</script>

layouts/error.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+section.container
+  .message
+    h1.title
+      | {{ error.statusCode }}
+    h2.info
+      | {{ error.message }}
+    nuxt-link(to='/', v-if='error.statusCode === 404')
+      .button
+        | 返回首页
+</template>
+
+<script>
+export default {
+  layout: 'errorTheme',
+  props: {
+    error: {
+      type: Object,
+      default: () => {
+        return {
+          statusCode: 500,
+          message: '未知错误，请稍后再试'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+  padding 20px
+
+.message
+  max-width 400px
+  background-color #fff
+  padding 20px
+  box-shadow 0 1px 3px rgba(0, 0, 0, 0.13)
+  margin auto
+
+.title
+  margin-top 15px
+  font-size 5em
+
+.info
+  font-weight 300
+  color #9aabb1
+  margin 0
+
+.button
+  display block
+  padding 10px
+  margin 80px auto 10px auto
+  text-align center
+</style>

layouts/errorTheme.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+.content
+  .container
+    .page-container
+      nuxt
+  footer
+    .footer
+      | Copyright © 2018 WangYi. All Rights Reserved.
+</template>

middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

nuxt.config.js

@@ -0,0 +1,71 @@
+const pkg = require('./package')
+
+module.exports = {
+  mode: 'universal',
+
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: pkg.name,
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: pkg.description }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#fff' },
+
+  /*
+  ** Global CSS
+  */
+  css: [
+  ],
+
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [
+  ],
+
+  /*
+  ** Nuxt.js modules
+  */
+  modules: [
+    // Doc: https://axios.nuxtjs.org/usage
+    '@nuxtjs/axios'
+  ],
+  /*
+  ** Axios module configuration
+  */
+  axios: {
+    // See https://github.com/nuxt-community/axios-module#options
+  },
+
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*
+    ** You can extend webpack config here
+    */
+    extend(config, ctx) {
+      // Run ESLint on save
+      if (ctx.isDev && ctx.isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/
+        })
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "blog-client",
+  "version": "1.0.0",
+  "description": "My Blog Client",
+  "author": "yi-ge",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "build": "nuxt build",
+    "start": "cross-env NODE_ENV=production HOST=0.0.0.0 PORT=8888 node server/index.js",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@fortawesome/free-brands-svg-icons": "^5.7.1",
+    "@fortawesome/free-regular-svg-icons": "^5.7.1",
+    "@fortawesome/free-solid-svg-icons": "^5.7.1",
+    "@fortawesome/vue-fontawesome": "^0.1.5",
+    "@nuxtjs/axios": "^5.3.6",
+    "cross-env": "^5.2.0",
+    "highlight.js": "^9.14.2",
+    "koa": "^2.6.2",
+    "moment": "^2.24.0",
+    "nuxt": "^2.3.4"
+  },
+  "devDependencies": {
+    "@nuxtjs/eslint-config": "^0.0.1",
+    "babel-eslint": "^8.2.1",
+    "eslint": "^5.0.1",
+    "eslint-config-standard": ">=12.0.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-import": ">=2.14.0",
+    "eslint-plugin-jest": ">=21.24.1",
+    "eslint-plugin-node": ">=7.0.1",
+    "eslint-plugin-promise": ">=4.0.1",
+    "eslint-plugin-standard": ">=4.0.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "nodemon": "^1.18.9",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2"
+  }
+}

pages/_terms/index.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/_terms/page/_page.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : ''", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/index.vue

@@ -0,0 +1,107 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData(inject) {
+    const { app, params, $axios } = inject
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const data = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const data = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/page/_page.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/post/_id.vue

@@ -0,0 +1,344 @@
+<template lang="pug">
+div
+  article.articleDetails
+    .articleTitle
+      | {{ Articels.post_title }}
+    .articalMeta
+      ul
+        li
+          Icon(:icon="['far', 'calendar-alt']")
+          | &nbsp; {{ Articels.post_date }}
+        li
+          Icon(:icon="['far', 'bookmark']")
+          nuxt-link(v-for='(relationships, index) in Articels.term_relationships', :key='index', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+            span
+              | &nbsp; {{ relationships.term_taxonomy.term.name }}
+        li(v-if='Articels.postmetum.meta_value !== 0')
+          Icon(:icon="['fas', 'thermometer-' + Articels.hotValue]")
+          | &nbsp; {{ Articels.postmetum.meta_value }}
+    #articelToc.articelToc(v-if="Articels.post_toc_show")
+      .articelTitle 目录
+      .articelTocList(v-html="Articels.post_toc")
+    .articelContent(v-html='Articels.post_content')
+    .articelRightToc(v-show="Articels.post_toc_show && showRightToc", @click="articelRightTocClick")
+      .articelTitle 目录
+      .articelTocList(v-html="Articels.post_toc")
+  nuxt-link(:to="Articels.last ? '/post/' + Articels.last.ID : ''")
+    .btnFooter.btnPrevt(:style="'color: ' + (Articels.last ? '#333' : '#ccc')")
+      Icon(:icon="['fas', 'chevron-left']")
+      | &nbsp; 上一篇 {{ Articels.last ? '(' + decodeURIComponent(Articels.last.post_name) + ')' : ''}}
+  nuxt-link(:to="Articels.next ? '/post/' + Articels.next.ID : ''")
+    .btnFooter.btnNext(:style="'color: ' + (Articels.next ? '#333' : '#ccc')")
+      | 下一篇 {{ Articels.next ? '(' + decodeURIComponent(Articels.next.post_name) + ')' : ''}} &nbsp;
+      Icon(:icon="['fas', 'chevron-right']")
+  .comment
+
+</template>
+
+<script>
+export default {
+  async asyncData({ route, app, $axios }) {
+    const { data } = await $axios.$get(`/public/article/details?id=${route.params.id}`)
+    const result = data.result
+    result.post_date = app.$moment(result.post_date).utc().format('lll')// 格式化时间
+    // 热度值计算
+    if (result.postmetum !== null && result.postmetum !== '') {
+      result.hotValue = app.$getHatValue(result.postmetum.meta_value)
+    } else {
+      result.hotValue = 0
+      result.postmetum = {}
+      result.postmetum.meta_value = 0
+    }
+
+    return {
+      Articels: result,
+      showRightToc: false,
+      tocIds: result.post_toc_ids
+    }
+  },
+  head() {
+    return {
+      title: `${this.Articels.post_title} - 轶哥博客`
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+
+    if (this.Articels.post_toc_show) {
+      const tocShow = () => {
+        if (window.addEvent) {
+          window.addEvent(window, 'scroll', () => {
+            const windowWidth = window.innerWidth || document.documentElement.clientWidth
+            if (document.getElementById('articelToc') && !this.isOnScreen(document.getElementById('articelToc'))) {
+              if (windowWidth < 768) {
+                this.showRightToc = false
+                document.getElementById('mobileToc').style.display = 'block'
+              } else {
+                this.showRightToc = true
+              }
+            } else {
+              this.showRightToc = false
+              if (windowWidth < 768) {
+                document.getElementById('mobileToc').style.display = 'none'
+              }
+            }
+          })
+        } else {
+          setTimeout(() => {
+            tocShow()
+          }, 50)
+        }
+      }
+      tocShow()
+
+      const tocIdsTop = []
+      const tocIdsTopMap = new Map()
+      for (const n in this.tocIds) {
+        const tTop = document.getElementById(this.tocIds[n]).offsetTop
+        tocIdsTop.push(tTop)
+        tocIdsTopMap.set(tTop, '#' + this.tocIds[n])
+      }
+      console.log(tocIdsTop)
+
+      const findInIds = (arr, num) => { for (let x = 0; x < arr.length; x++) { if (arr[x] > num) { return x - 1 } } }
+
+      let debounce = null
+      let lastIdInx = null
+
+      const scrollToc = () => {
+        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth
+        if (windowWidth < 768) scrollTop = scrollTop * 2.7 + 175
+        const tocIdsInx = findInIds(tocIdsTop, scrollTop + 130)
+        if (tocIdsInx !== -1 && lastIdInx !== tocIdsInx && document.getElementsByClassName('articelRightToc')[0]) {
+          const tocAList = document.getElementsByClassName('articelRightToc')[0].getElementsByTagName('a')
+          const nowId = tocIdsTopMap.get(tocIdsTop[tocIdsInx])
+          for (const i in tocAList) {
+            if (tocAList[i] && tocAList[i].getAttribute && tocAList[i].getAttribute('href') === nowId) {
+              tocAList[i].style.color = '#ff8a8a'
+            } else if (tocAList[i] && tocAList[i].style) {
+              tocAList[i].style.color = '#bbb'
+            }
+          }
+          lastIdInx = tocIdsInx
+        }
+      }
+      window.addEvent(window, 'scroll', () => {
+        clearTimeout(debounce)
+        debounce = setTimeout(() => {
+          scrollToc()
+        }, 20)
+      })
+
+      document.getElementById('mobileToc').onclick = () => {
+        this.showRightToc = !this.showRightToc
+      }
+    }
+  },
+  methods: {
+    articelRightTocClick() {
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth
+      if (windowWidth < 768) {
+        this.showRightToc = false
+      }
+    },
+    isOnScreen(element) {
+      const ON_SCREEN_HEIGHT = 50
+      const ON_SCREEN_WIDTH = 50
+
+      const rect = element.getBoundingClientRect()
+      const windowHeight = window.innerHeight || document.documentElement.clientHeight
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth
+
+      const elementHeight = element.offsetHeight
+      const elementWidth = element.offsetWidth
+
+      const onScreenHeight = ON_SCREEN_HEIGHT > elementHeight ? elementHeight : ON_SCREEN_HEIGHT
+      const onScreenWidth = ON_SCREEN_WIDTH > elementWidth ? elementWidth : ON_SCREEN_WIDTH
+
+      // 元素在屏幕上方
+      const elementBottomToWindowTop = rect.top + elementHeight
+      const bottomBoundingOnScreen = elementBottomToWindowTop >= onScreenHeight
+
+      // 元素在屏幕下方
+      const elementTopToWindowBottom = windowHeight - (rect.bottom - elementHeight)
+      const topBoundingOnScreen = elementTopToWindowBottom >= onScreenHeight
+
+      // 元素在屏幕左侧
+      const elementRightToWindowLeft = rect.left + elementWidth
+      const rightBoundingOnScreen = elementRightToWindowLeft >= onScreenWidth
+
+      // 元素在屏幕右侧
+      const elementLeftToWindowRight = windowWidth - (rect.right - elementWidth)
+      const leftBoundingOnScreen = elementLeftToWindowRight >= onScreenWidth
+
+      return bottomBoundingOnScreen && topBoundingOnScreen && rightBoundingOnScreen && leftBoundingOnScreen
+    }
+  }
+}
+</script>
+
+<style lang="stylus" socped>
+.articleDetails
+  margin-top 30px
+  background-color #fff
+  padding 50px 10px
+
+  .articleTitle
+    text-align center
+    font-size 24px
+
+  .articalMeta
+    text-align center
+    padding 20px 0
+    font-size 12px
+    color #a1887f
+
+    ul
+      list-style none
+      padding-right 20px
+
+      > li
+        display inline-block
+        margin-left 20px
+        line-height 2
+
+        > i
+          margin-right 8px
+
+        > span a
+          color #a1887f
+          margin-left 10px
+
+        a span
+          color #a1887f
+
+        > span a:first-child
+          margin-left 0
+
+      > li :first-child
+        margin-left 0
+
+  .articelContent
+    margin-top 20px
+    line-height 2
+    font-weight 300
+    font-size responsive
+
+    pre
+      text-align 0.16rem
+      overflow-x auto
+      line-height 1
+
+      code
+        padding 16px
+
+    code
+      color #24292e
+      background-color rgba(27, 31, 35, 0.05)
+      border-radius 3px
+      font-size 85%
+      padding 2px 5px
+
+.comment
+  width 100%
+
+.btnFooter
+  font-size 12px
+  margin-top 50px
+
+  i
+    margin 10px
+
+.btnPrevt
+  float left
+
+.btnNext
+  float right
+
+footer .footer
+  color #cccccc
+  text-align left
+  line-height 1.5
+  margin 20px 0
+
+.anchor-fix
+  display block
+  height 70px /* same height as header */
+  margin-top -70px /* same height as header */
+  visibility hidden
+
+.articelRightToc
+  position fixed
+  width 15%
+  top 0
+  right 0
+  overflow-y auto
+  background-color #000
+  padding 10px
+  box-shadow 0 0 8px #000
+
+.articelToc
+  width 100%
+
+.articelToc, .articelRightToc
+  color #bbb
+  user-select none
+
+  .articelTitle
+    font-weight 400
+    margin-bottom 10px
+
+  .articelTocList
+    color #bbb
+
+    a
+      color #bbb
+
+      &:visited
+        color #bbb
+
+      &:hover
+        color #d01c2e
+
+    ol.toc, ol.toc ol
+      counter-reset toc
+      list-style none
+
+    ol li
+      counter-increment toc
+
+    .toc li:before
+      content counters(toc, '.') ' '
+
+    ol
+      margin-left 20px
+
+      li
+        font-weight 400
+
+        ol
+          margin-left 20px
+
+          li
+            font-weight 300
+
+@media (max-width: 768px)
+  .articleDetails
+    padding 20px
+    margin-top 50px
+
+  .articelRightToc
+    position fixed
+    width 80%
+    top 100px
+    bottom 95px
+    right 10px
+    background-color #000
+    padding 10px
+    overflow-y auto
+    box-shadow 0 0 8px #000
+
+  .mobileToc
+    bottom 48px
+</style>

pages/search/index.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, query, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        search: query.q
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/tag/_terms/index.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        tag: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/tag/_terms/page/_page.vue

@@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        tag: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

plugins/browser.js

@@ -0,0 +1,56 @@
+import '~/layouts/common.styl'
+
+const $tags = document.getElementById('tags')
+const floatTop = $tags.offsetTop + $tags.scrollHeight + 30
+
+function addEvent(obj, type, fn) {
+  if (obj.attachEvent) {
+    obj.attachEvent('on' + type, function () {
+      fn.call(obj)
+    })
+  } else {
+    obj.addEventListener(type, fn, false)
+  }
+}
+
+window.addEvent = addEvent
+
+window.onload = function () {
+  if (navigator.appName === 'Microsoft Internet Explorer' && parseInt(navigator.appVersion.split(';')[1].replace(/[ ]/g, '').replace('MSIE', '')) <= 9) {
+    alert('您的浏览器版本过低，继续访问将会出现问题，请升级浏览器版本！')
+  }
+
+  // 底部返回顶部按钮
+  const top = document.getElementById('gotop')
+  // 滚动一屏幕时显示回到顶部
+  addEvent(window, 'scroll', function () {
+    const currentPosition = document.documentElement.scrollTop || document.body.scrollTop
+    currentPosition > window.screen.availHeight ? top.style.display = 'block' : top.style.display = 'none'
+
+    // 左部导航自动浮动
+    if (currentPosition > floatTop) {
+      document.getElementById('navication').style.position = 'fixed'
+    } else {
+      document.getElementById('navication').style.position = 'static'
+    }
+  })
+
+  top.onclick = function () {
+    var timer = setInterval(function () { // eslint-disable-line
+      let currentPosition = document.documentElement.scrollTop || document.body.scrollTop
+      currentPosition -= 100
+      if (currentPosition > 0) {
+        window.scrollTo(0, currentPosition)
+      } else {
+        window.scrollTo(0, 0)
+        clearInterval(timer)
+      }
+    }, 10)
+  }
+
+  let _hmt = _hmt || [] // eslint-disable-line
+  const hm = document.createElement('script')
+  hm.src = 'https://hm.baidu.com/hm.js?4c563e5be89b05d4973bbfbb9b8a0aa3'
+  const s = document.getElementsByTagName('script')[0]
+  s.parentNode.insertBefore(hm, s)
+}

plugins/moment.js

@@ -0,0 +1,5 @@
+import moment from 'moment'
+
+export default function (ctx, inject) {
+  inject('moment', moment)
+}

plugins/vue.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faGithub, faQq, faWeixin, faWeibo, faTwitter, faFacebook, faGooglePlus, faTelegram } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faSearch, faThermometerEmpty, faThermometerQuarter, faThermometerHalf, faThermometerThreeQuarters, faThermometerFull, faAngleDoubleUp, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { faClock, faCalendarAlt, faBookmark } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import hljs from 'highlight.js'
+import Swiper from '../components/Swiper'
+import Slide from '../components/Slide'
+
+library.add(faGithub, faQq, faWeixin, faWeibo, faTwitter, faFacebook, faGooglePlus, faTelegram, faEnvelope, faSearch, faClock, faCalendarAlt, faBookmark, faThermometerEmpty, faThermometerQuarter, faThermometerHalf, faThermometerThreeQuarters, faThermometerFull, faAngleDoubleUp, faChevronLeft, faChevronRight)
+
+Vue.component('Icon', FontAwesomeIcon)
+Vue.component('Swiper', Vue.extend(Swiper))
+Vue.component('Slide', Vue.extend(Slide))
+
+export default function (ctx, inject) {
+  inject('getHatValue', (count, hotConst = 1000) => {
+    const hotTmp = count / hotConst
+
+    if (hotTmp >= 1) {
+      return 'full'
+    } else if (hotTmp >= 0.75 && hotTmp < 1) {
+      return 'threeQuarters'
+    } else if (hotTmp >= 0.5 && hotTmp < 0.75) {
+      return 'half'
+    } else if (hotTmp >= 0.25 && hotTmp < 0.5) {
+      return 'quarter'
+    } else if (hotTmp >= 0 && hotTmp < 0.25) {
+      return 'empty'
+    }
+
+    return 'empty'
+  })
+
+  inject('finishLoad', () => {
+    Array.prototype.forEach.call(document.querySelectorAll('pre code'), hljs.highlightBlock) // 代码高亮
+    document.getElementById('loading').style.display = 'none' // 隐藏Loading
+  })
+}

push.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+if [ $1 ]; then
+  git add .
+  git commit -m $1
+  git push origin master
+else
+  git add .
+  git commit -m "update - `date '+%Y-%m-%d %T'`"
+  git push origin master
+fi
+
+yarn run build
+rsync -avr --delete-after --exclude ".git" . root@139.129.130.191:/root/site/wyrme && ssh root@139.129.130.191 'docker restart wyrme'

server/index.js

@@ -0,0 +1,40 @@
+const Koa = require('koa')
+const consola = require('consola')
+const { Nuxt, Builder } = require('nuxt')
+
+const app = new Koa()
+
+// Import and Set Nuxt.js options
+const config = require('../nuxt.config.js')
+config.dev = !(app.env === 'production')
+
+async function start() {
+  // Instantiate nuxt.js
+  const nuxt = new Nuxt(config)
+
+  const {
+    host = process.env.HOST || '127.0.0.1',
+    port = process.env.PORT || 3000
+  } = nuxt.options.server
+
+  // Build in development
+  if (config.dev) {
+    const builder = new Builder(nuxt)
+    await builder.build()
+  }
+
+  app.use((ctx) => {
+    ctx.status = 200
+    ctx.respond = false // Bypass Koa's built-in response handling
+    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
+    nuxt.render(ctx.req, ctx.res)
+  })
+
+  app.listen(port, host)
+  consola.ready({
+    message: `Server listening on http://${host}:${port}`,
+    badge: true
+  })
+}
+
+start()

static/css/begin.css

@@ -0,0 +1 @@
+.allSpinner{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background-color:#fff}.spinner{position:fixed;top:50%;left:50%;z-index:9999999;margin:75pt auto 0;margin-top:-1pc;margin-left:-75px;width:150px;text-align:center}.spinner>div{display:inline-block;width:30px;height:30px;border-radius:100%;background-color:#67cf22;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;  
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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');

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}

static/css/highlight/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;
+}