Merge branch 'chart-yaml' into gallery

2025-12-13 01:36:22 +00:00 · 2018-10-11 12:59:53 +02:00
parent 5d9b1abe82 0e29e8ac76
commit c5f6ace332
51 changed files with 1117 additions and 75 deletions
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -1,15 +1,25 @@
 # Current behavior

 <!--
-Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
+Let us know what is currently happening.

-If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
+Please include some **screenshots** with the **developer tools** open (console tab) when you report a bug.
+
+If your issue is regarding Boostnote mobile, please open an issue in the Boostnote Mobile repo 👉 https://github.com/BoostIO/boostnote-mobile.
 -->

 # Expected behavior

+<!--
+Let us know what you think should happen!
+-->
+
 # Steps to reproduce

+<!-- 
+Please be thorough, issues we can reproduce are easier to fix!
+-->
+
 1. 
 2. 
 3. 
--- a/browser/components/MarkdownEditor.styl
+++ b/browser/components/MarkdownEditor.styl
@@ -16,7 +16,6 @@
 .preview
  display block
  absolute top bottom left right
-  z-index 100
  background-color white
  height 100%
  width 100%
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -429,6 +429,7 @@ export default class MarkdownPreview extends React.Component {
      case 'dark':
      case 'solarized-dark':
      case 'monokai':
+      case 'dracula':
        return scrollBarDarkStyle
      default:
        return scrollBarStyle
@@ -487,6 +488,10 @@ export default class MarkdownPreview extends React.Component {
    eventEmitter.on('export:save-md', this.saveAsMdHandler)
    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
    eventEmitter.on('print', this.printHandler)
+    eventEmitter.on('config-renew', () => {
+      this.markdown.updateConfig()
+      this.rewriteIframe()
+    })
  }

  componentWillUnmount () {
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -394,3 +394,76 @@ body[data-theme="monokai"]
  .item-bottom-tagList-empty
    color $ui-inactive-text-color
    vertical-align middle
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
+        color $ui-dracula-text-color
+
+  .item-wrapper
+    border-color alpha($ui-dracula-button-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dracula-active-color
+    .item-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
+      color #ff79c6
+      .item-bottom-tagList-item
+        background-color alpha(#f8f8f2, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -286,3 +286,67 @@ body[data-theme="monokai"]
    .item-simple-right-storageName
      padding-left 4px
      opacity 0.4
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dracula-button-backgroundColor, 60%)
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-button--active-backgroundColor
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 10%)
+        color $ui-dracula-text-color
+
+  .item-simple--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dracula-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#f8f8f2, 20%)
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -52,3 +52,14 @@ body[data-theme="monokai"]
    background-color $ui-monokai-button-backgroundColor
    &:hover
      color #5CB85C
+
+body[data-theme="dracula"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-dracula-text-color
+    border none
+    background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color #ff79c6
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -264,3 +264,45 @@ body[data-theme="monokai"]
      color $ui-monokai-text-color
      .menu-button-label
        color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .menu-button
+    &:active
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+
+  .menu-button--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-star--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-trash--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -181,3 +181,47 @@ body[data-theme="monokai"]

  .deleteButton
    color alpha($ui-monokai-text-color, 30%)
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-dracula-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+
+  .deleteButton
+    color alpha($ui-dracula-text-color, 30%)
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -157,3 +157,22 @@ body[data-theme="monokai"]
    &:hover
      color $ui-monokai-text-color
      background-color $ui-monokai-button-backgroundColor
+
+body[data-theme="dracula"]
+  .folderList-item
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    &:active
+      background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -59,3 +59,13 @@ body[data-theme="monokai"]

  .percentageText
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .percentageBar
+    background-color $ui-dracula-borderColor
+
+  .progressBar
+    background-color: $ui-dracula-active-color
+
+  .percentageText
+    color $ui-dracula-text-color
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -80,6 +80,9 @@ li
    &.checked
      text-decoration line-through
      opacity 0.5
+  &.taskListItem.checked
+    text-decoration line-through
+    opacity 0.5
 div.math-rendered
  text-align center
 .math-failed
@@ -225,6 +228,8 @@ pre
    &>code
      flex 1
      overflow-x auto
+  &.mermaid svg
+    max-width 100% !important
  &>span.filename
    margin -0.5rem 100% 0.5rem -0.5rem
    padding 0.125rem 0.375rem
@@ -492,8 +497,8 @@ body[data-theme="solarized-dark"]
      .carousel-main, .carousel-footer
        background-color $ui-solarized-dark-noteDetail-backgroundColor
      .prev, .next
-        color $ui-solarized-dark-text-color
-        background-color $ui-solarized-dark-tag-backgroundColor
+        color $ui-solarized-dark-button--active-color
+        background-color $ui-solarized-dark-button-backgroundColor

 themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
@@ -529,5 +534,42 @@ body[data-theme="monokai"]
      .carousel-main, .carousel-footer
        background-color $ui-monokai-noteDetail-backgroundColor
      .prev, .next
-        color $ui-monokai-text-color
-        background-color $ui-monokai-tag-backgroundColor
+        color $ui-monokai-button--active-color
+        background-color $ui-monokai-button-backgroundColor
+
+themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
+themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
+themeDraculaTableHead = themeDraculaTableEven
+themeDraculaTableBorder = themeDarkBorder
+
+body[data-theme="dracula"]
+  color $ui-dracula-text-color
+  border-color themeDarkBorder
+  background-color $ui-dracula-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeDraculaTableHead
+      th
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeDraculaTableOdd
+      tr:nth-child(2n)
+        background-color themeDraculaTableEven
+      td
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
+  kbd
+    background-color themeDarkBackground
+
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-dracula-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-dracula-button--active-color
+        background-color $ui-dracula-button-backgroundColor
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -25,7 +25,7 @@ function render (element, content, theme) {
    if (height && height.value !== 'undefined') {
      element.style.height = height.value + 'vh'
    }
-    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai'
+    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
      themeCSS: isDarkTheme ? darkThemeStyling : '',
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -7,6 +7,7 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
 import { lastFindInArray } from './utils'
+import ee from 'browser/main/lib/eventEmitter'

 function createGutter (str, firstLineNumber) {
  if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -20,7 +21,7 @@ function createGutter (str, firstLineNumber) {

 class Markdown {
  constructor (options = {}) {
-    const config = ConfigManager.get()
+    let config = ConfigManager.get()
    const defaultOptions = {
      typographer: config.preview.smartQuotes,
      linkify: true,
@@ -249,8 +250,12 @@ class Markdown {
            if (!liToken.attrs) {
              liToken.attrs = []
            }
+            if (config.preview.lineThroughCheckbox) {
+              liToken.attrs.push(['class', `taskListItem${match[1] !== ' ' ? ' checked' : ''}`])
+            } else {
              liToken.attrs.push(['class', 'taskListItem'])
            }
+          }
          content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
        }
      }
@@ -286,6 +291,9 @@ class Markdown {
    }
    // FIXME We should not depend on global variable.
    window.md = this.md
+    this.updateConfig = () => {
+      config = ConfigManager.get()
+    }
  }

  render (content) {
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -37,3 +37,10 @@ body[data-theme="monokai"]
    border-left 1px solid $ui-monokai-borderColor
  .empty-message
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color $ui-dracula-noteDetail-backgroundColor
+    border-left 1px solid $ui-dracula-borderColor
+  .empty-message
+    color $ui-dracula-text-color
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -159,3 +159,29 @@ body[data-theme="monokai"]
      color $ui-monokai-button--active-color
  .search-optionList-item-name-surfix
    color $ui-monokai-inactive-text-color
+
+body[data-theme="dracula"]
+ .root
+    color $ui-dracula-text-color
+    &:hover
+      color #f8f8f2
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dracula-borderColor
+
+  .search-optionList
+    color #f8f8f2
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dracula-button--active-backgroundColor
+    color $ui-dracula-button--active-color
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      color $ui-dracula-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dracula-inactive-text-color
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -257,3 +257,43 @@ body[data-theme="monokai"]
      color $ui-dark-inactive-text-color
      &:hover
        color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .control-infoButton-panel
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .modification-date
+    color $ui-dracula-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dracula-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dracula-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dracula-borderColor, 20%)
+    color $ui-dracula-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dracula-borderColor, 20%)
+        color $ui-dracula-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dracula-text-color
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -76,3 +76,8 @@ body[data-theme="monokai"]
  .root
    border-left 1px solid $ui-monokai-borderColor
    background-color $ui-monokai-noteDetail-backgroundColor
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -103,3 +103,8 @@ body[data-theme="monokai"]
  .info
    border-color $ui-monokai-borderColor
    background-color $ui-monokai-noteDetail-backgroundColor
+
+body[data-theme="dracula"]
+  .info
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -170,3 +170,20 @@ body[data-theme="monokai"]
  .tabList
    background-color $ui-monokai-noteDetail-backgroundColor
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+    border 1px solid $ui-dracula-borderColor
+
+  .tabList
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -76,3 +76,14 @@ body[data-theme="monokai"]

  .tag-label
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .tag
+    background-color $ui-dracula-tag-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-dracula-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-dracula-borderColor
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -63,3 +63,10 @@ body[data-theme="monokai"]
    .active
      background-color #f92672
      box-shadow 2px 0px 7px #222222
+
+body[data-theme="dracula"]
+  .control-toggleModeButton
+      background-color #44475a
+    .active
+      background-color #bd93f9
+      box-shadow 2px 0px 7px #222222
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -141,7 +141,7 @@ class Main extends React.Component {
  componentDidMount () {
    const { dispatch, config } = this.props

-    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai']
+    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']

    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
      document.body.setAttribute('data-theme', config.ui.theme)
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -79,3 +79,7 @@ body[data-theme="solarized-dark"]
 body[data-theme="monokai"]
  .root, .root--expanded
    background-color $ui-monokai-noteList-backgroundColor
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -138,3 +138,27 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color
    &:active
      color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    background-color $ui-dracula-noteList-backgroundColor
+    border-color $ui-dracula-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dracula-text-color
+
+  .control-button
+    color $ui-dracula-inactive-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .control-button--active
+    color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -122,3 +122,8 @@ body[data-theme="monokai"]
  .root, .root--folded
    background-color $ui-monokai-backgroundColor
    border-right 1px solid $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root, .root--folded
+    background-color $ui-dracula-backgroundColor
+    border-right 1px solid $ui-dracula-borderColor
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -80,3 +80,14 @@ body[data-theme="monokai"]
      color $ui-monokai-active-color
    &:active
      color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+   navButtonColor()
+  .zoom
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+    &:hover
+      transition 0.15s
+      color $ui-dracula-active-color
+    &:active
+      color $ui-dracula-active-color
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -256,3 +256,25 @@ body[data-theme="monokai"]
    input
      background-color $ui-monokai-noteList-backgroundColor
      color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    border-color $ui-dracula-borderColor
+  .control-search
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-dracula-inactive-text-color
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-dracula-noteList-backgroundColor
+    input
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -18,6 +18,9 @@ body
 ::-webkit-scrollbar
  width 12px

+::-webkit-scrollbar-corner
+  background-color: transparent;
+
 ::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.15)

@@ -162,6 +165,15 @@ body[data-theme="monokai"]
  .sortableItemHelper
    color: $ui-monokai-text-color

+body[data-theme="dracula"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
+  .ModalBase
+    .modalBack
+      background-color $ui-dracula-backgroundColor
+  .sortableItemHelper
+    color: $ui-dracula-text-color
+
 body[data-theme="default"]
  .SideNav ::-webkit-scrollbar-thumb
    background-color rgba(255, 255, 255, 0.3)
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -65,7 +65,8 @@ export const DEFAULT_CONFIG = {
    smartArrows: false,
    allowCustomCSS: false,
    customCSS: '',
-    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    lineThroughCheckbox: true
  },
  blog: {
    type: 'wordpress', // Available value: wordpress, add more types in the future plz
@@ -147,6 +148,8 @@ function set (updates) {
    document.body.setAttribute('data-theme', 'solarized-dark')
  } else if (newConfig.ui.theme === 'monokai') {
    document.body.setAttribute('data-theme', 'monokai')
+  } else if (newConfig.ui.theme === 'dracula') {
+    document.body.setAttribute('data-theme', 'dracula')
  } else {
    document.body.setAttribute('data-theme', 'default')
  }
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -128,3 +128,29 @@ body[data-theme="monokai"]

  .control-confirmButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .root
+    modalDracula()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+
+  .control-folder-label
+    color $ui-dracula-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -97,3 +97,20 @@ body[data-theme="monokai"]

  .description
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-dracula-text-color
+
+  .control-button
+    border-color $ui-dracula-borderColor
+    color $ui-dracula-text-color
+    background-color transparent
+    &:focus
+      colorDraculaPrimaryButton()
+
+  .description
+    color $ui-dracula-text-color
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -138,6 +138,10 @@ colorMonokaiControl()
  background-color $ui-monokai-button-backgroundColor
  color $ui-monokai-text-color

+colorDraculaControl()
+  border none
+  background-color $ui-dracula-button-backgroundColor
+  color $ui-dracula-text-color

 body[data-theme="dark"]
  .root
@@ -220,3 +224,30 @@ body[data-theme="monokai"]
  .group-section-control
    select, .group-section-control-input
      colorMonokaiControl()
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .group-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .group-header2
+    color $ui-dracula-text-color
+
+  .group-section-control-input
+    border-color $ui-dracula-borderColor
+
+  .group-control
+    border-color $ui-dracula-borderColor
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
+  .group-control-rightButton
+    colorDraculaPrimaryButton()
+  .group-hint
+    colorDraculaControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorDraculaControl()
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -41,3 +41,9 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color
  p
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+  p
+    color $ui-dracula-text-color
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -154,3 +154,26 @@ body[data-theme="monokai"]

  .folderItem-right-dangerButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .folderItem
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-button
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -75,3 +75,10 @@ body[data-theme="monokai"]
 .list
  a
    color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+.list
+  a
+    color $ui-dracula-active-color
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -139,3 +139,27 @@ body[data-theme="monokai"]
    background-color $ui-monokai-button--active-backgroundColor
    &:hover
      color white
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+  .top-bar
+    background-color transparent
+    border-color $ui-dracula-borderColor
+    p
+      color $ui-dracula-text-color
+  .nav
+    background-color transparent
+    border-color $ui-dracula-borderColor
+  .nav-button
+    background-color transparent
+    color $ui-dracula-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color $ui-dracula-button--active-color
+    background-color $ui-dracula-button--active-backgroundColor
+    &:hover
+      color #f8f8f2
--- a/browser/main/modals/PreferencesModal/SnippetList.js
+++ b/browser/main/modals/PreferencesModal/SnippetList.js
@@ -55,7 +55,11 @@ class SnippetList extends React.Component {

  defineSnippetStyleName (snippet) {
    const { currentSnippet } = this.props
-    if (currentSnippet == null) return
+
+    if (currentSnippet == null) {
+      return 'snippet-item'
+    }
+
    if (currentSnippet.id === snippet.id) {
      return 'snippet-item-selected'
    } else {
--- a/browser/main/modals/PreferencesModal/SnippetTab.js
+++ b/browser/main/modals/PreferencesModal/SnippetTab.js
@@ -6,6 +6,9 @@ import i18n from 'browser/lib/i18n'
 import dataApi from 'browser/main/lib/dataApi'
 import SnippetList from './SnippetList'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import copy from 'copy-to-clipboard'
+
+const path = require('path')

 class SnippetTab extends React.Component {
  constructor (props) {
@@ -16,6 +19,17 @@ class SnippetTab extends React.Component {
    this.changeDelay = null
  }

+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join(
+        'file://',
+        global.__dirname,
+        '../../resources/app.png'
+      )
+    }
+    return new window.Notification(title, options)
+  }
+
  handleSnippetNameOrPrefixChange () {
    clearTimeout(this.changeDelay)
    this.changeDelay = setTimeout(() => {
@@ -27,6 +41,7 @@ class SnippetTab extends React.Component {

  handleSnippetSelect (snippet) {
    const { currentSnippet } = this.state
+    if (snippet !== null) {
      if (currentSnippet === null || currentSnippet.id !== snippet.id) {
        dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
          // notify the snippet editor to load the content of the new snippet
@@ -35,6 +50,7 @@ class SnippetTab extends React.Component {
        })
      }
    }
+  }

  onSnippetNameOrPrefixChanged (e, type) {
    const newSnippet = Object.assign({}, this.state.currentSnippet)
@@ -54,6 +70,17 @@ class SnippetTab extends React.Component {
    }
  }

+  handleCopySnippet (e) {
+    const showCopyNotification = this.props.config.ui.showCopyNotification
+    copy(this.state.currentSnippet.content)
+    if (showCopyNotification) {
+      this.notify('Saved to Clipboard!', {
+        body: 'Paste it wherever you want!',
+        silent: true
+      })
+    }
+  }
+
  render () {
    const { config, storageKey } = this.props
    const { currentSnippet } = this.state
@@ -70,6 +97,13 @@ class SnippetTab extends React.Component {
          onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
          currentSnippet={currentSnippet} />
        <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
+          <div styleName='group-section'>
+            <div styleName='group-section-control'>
+              <button styleName='group-control-rightButton'
+                onClick={e => this.handleCopySnippet(e)}>{i18n.__('Copy')}
+              </button>
+            </div>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
            <div styleName='group-section-control'>
--- a/browser/main/modals/PreferencesModal/SnippetTab.styl
+++ b/browser/main/modals/PreferencesModal/SnippetTab.styl
@@ -196,3 +196,19 @@ body[data-theme="monokai"]
    color white
  .group-control-button
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .snippets
+    background $ui-dracula-backgroundColor
+    .snippet-item
+      color #f8f8f2
+      &::after
+        background $ui-dracula-borderColor
+      &:hover
+        background darken($ui-dracula-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-dracula-backgroundColor, 5)
+  .snippet-detail
+    color #f8f8f2
+  .group-control-button
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -236,3 +236,41 @@ body[data-theme="monokai"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .folderList-item
+    border-bottom $ui-dracula-borderColor
+
+  .folderList-empty
+    color $ui-dracula-text-color
+
+  .list-empty
+    color $ui-dracula-text-color
+  .list-control-addStorageButton
+    border-color $ui-dracula-button-backgroundColor
+    background-color $ui-dracula-button-backgroundColor
+    color $ui-dracula-text-color
+
+  .addStorage-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $$ui-dracula-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-dracula-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -107,6 +107,7 @@ class UiTab extends React.Component {
        smartArrows: this.refs.previewSmartArrows.checked,
        sanitize: this.refs.previewSanitize.value,
        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
+        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
        customCSS: this.customCSSCM.getCodeMirror().getValue()
      }
    }
@@ -187,6 +188,7 @@ class UiTab extends React.Component {
                <option value='white'>{i18n.__('White')}</option>
                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
                <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
                <option value='dark'>{i18n.__('Dark')}</option>
              </select>
            </div>
@@ -512,6 +514,16 @@ class UiTab extends React.Component {
              </select>
            </div>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.lineThroughCheckbox}
+                ref='lineThroughCheckbox'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Allow line through checkbox')}
+            </label>
+          </div>
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
--- a/browser/styles/Detail/TagSelect.styl
+++ b/browser/styles/Detail/TagSelect.styl
@@ -16,7 +16,7 @@
    margin 0

    border-radius 4px
-    margin .2em 0 0
+    margin .5rem 0 0
    background-color $ui-noteList-backgroundColor
    border 1px solid rgba(0,0,0,.3)
    box-shadow .05em .2em .6em rgba(0,0,0,.2)
@@ -83,6 +83,23 @@ body[data-theme="monokai"]
        background-color $ui-monokai-button-backgroundColor
        color $ui-monokai-text-color

+body[data-theme="dracula"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-dracula-text-color
+
+    ul
+      border-color $ui-dracula-borderColor
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+
+      &:before
+        background-color $ui-dark-noteList-backgroundColor
+
+      li[aria-selected="true"]
+        background-color $ui-dracula-button-backgroundColor
+        color $ui-dracula-text-color
+
 body[data-theme="solarized-dark"]
  .TagSelect
    .react-autosuggest__input
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -128,6 +128,16 @@ colorMonokaiPrimaryButton()
  &:active:hover
    background-color $dark-primary-button-background--active

+colorDraculaPrimaryButton()
+  color $ui-dracula-text-color
+  background-color $ui-dracula-button-backgroundColor
+  border none
+  &:hover
+    background-color $ui-dracula-button--active-backgroundColor
+  &:active
+  &:active:hover
+    background-color $ui-dracula-button--active-backgroundColor
+

 // Danger button(Brand color)
 $danger-button-background = #c9302c
@@ -385,6 +395,28 @@ modalMonokai()
  overflow hidden
  border-radius $modal-border-radius

-pre.mermaid svg {
-  max-width 100% !important
-}
+/******* Dracula theme ********/
+$ui-dracula-backgroundColor = #282a36
+$ui-dracula-noteList-backgroundColor = #282a36
+$ui-dracula-noteDetail-backgroundColor = #282a36
+
+$ui-dracula-text-color = #f8f8f2
+$ui-dracula-active-color = #bd93f9
+
+$ui-dracula-borderColor = #44475a
+
+$ui-dracula-tag-backgroundColor = #8be9fd
+
+$ui-dracula-button-backgroundColor = #44475a
+$ui-dracula-button--active-color = #f8f8f2
+$ui-dracula-button--active-backgroundColor = #bd93f9
+$ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
+$ui-dracula-button--focus-borderColor = lighten(#44475a, 25%)
+
+modalDracula()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $ui-dracula-backgroundColor
+  overflow hidden
+  border-radius $modal-border-radius
--- a/extra_scripts/codemirror/mode/bfm/bfm.css
+++ b/extra_scripts/codemirror/mode/bfm/bfm.css
@@ -0,0 +1,44 @@
+.cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-3024-day.CodeMirror .cm-table-row-even { background-color: rgb(238, 237, 237); }
+.cm-s-3024-night.CodeMirror .cm-table-row-even { background-color: rgb(30, 24, 21); }
+.cm-s-abcdef.CodeMirror .cm-table-row-even { background-color: rgb(36, 39, 37); }
+.cm-s-ambiance.CodeMirror .cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-base16-dark.CodeMirror .cm-table-row-even { background-color: rgb(41, 41, 41); }
+.cm-s-base16-light.CodeMirror .cm-table-row-even { background-color: rgb(234, 234, 234); }
+.cm-s-bespin.CodeMirror .cm-table-row-even { background-color: rgb(52, 45, 40); }
+.cm-s-blackboard.CodeMirror .cm-table-row-even { background-color: rgb(36, 39, 55); }
+.cm-s-cobalt.CodeMirror .cm-table-row-even { background-color: rgb(26, 56, 83); }
+.cm-s-colorforth.CodeMirror .cm-table-row-even { background-color: rgb(25, 25, 25); }
+.cm-s-darcula.CodeMirror .cm-table-row-even { background-color: rgb(56, 57, 59); }
+.cm-s-dracula.CodeMirror .cm-table-row-even { background-color: rgb(61, 63, 73); }
+.cm-s-duotone-dark.CodeMirror .cm-table-row-even { background-color: rgb(49, 45, 60); }
+.cm-s-duotone-light.CodeMirror .cm-table-row-even { background-color: rgb(246, 243, 238); }
+.cm-s-erlang-dark.CodeMirror .cm-table-row-even { background-color: rgb(26, 56, 83); }
+.cm-s-gruvbox-dark.CodeMirror .cm-table-row-even { background-color: rgb(55, 53, 51); }
+.cm-s-hopscotch.CodeMirror .cm-table-row-even { background-color: rgb(66, 58, 65); }
+.cm-s-isotope.CodeMirror .cm-table-row-even { background-color: rgb(22, 22, 22); }
+.cm-s-lesser-dark.CodeMirror .cm-table-row-even { background-color: rgb(58, 58, 57); }
+.cm-s-liquibyte.CodeMirror .cm-table-row-even { background-color: rgb(26, 26, 26); }
+.cm-s-lucario.CodeMirror .cm-table-row-even { background-color: rgb(64, 81, 96); }
+.cm-s-material.CodeMirror .cm-table-row-even { background-color: rgb(58, 69, 74); }
+.cm-s-mbo.CodeMirror .cm-table-row-even { background-color: rgb(65, 65, 63); }
+.cm-s-midnight.CodeMirror .cm-table-row-even { background-color: rgb(34, 46, 63); }
+.cm-s-monokai.CodeMirror .cm-table-row-even { background-color: rgb(60, 61, 55); }
+.cm-s-neo.CodeMirror .cm-table-row-even { background-color: rgb(245, 245, 245); }
+.cm-s-night.CodeMirror .cm-table-row-even { background-color: rgb(34, 25, 53); }
+.cm-s-oceanic-next.CodeMirror .cm-table-row-even { background-color: rgb(68, 83, 89); }
+.cm-s-paraiso-dark.CodeMirror .cm-table-row-even { background-color: rgb(61, 45, 59); }
+.cm-s-paraiso-light.CodeMirror .cm-table-row-even { background-color: rgb(223, 224, 211); }
+.cm-s-pastel-on-dark.CodeMirror .cm-table-row-even { background-color: rgb(54, 51, 49); }
+.cm-s-railscasts.CodeMirror .cm-table-row-even { background-color: rgb(63, 63, 62); }
+.cm-s-rubyblue.CodeMirror .cm-table-row-even { background-color: rgb(41, 58, 73); }
+.cm-s-seti.CodeMirror .cm-table-row-even { background-color: rgb(40, 42, 43); }
+.cm-s-shadowfox.CodeMirror .cm-table-row-even { background-color: rgb(56, 56, 59); }
+.cm-s-solarized.CodeMirror .cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-the-matrix.CodeMirror .cm-table-row-even { background-color: rgb(0, 26, 0); }
+.cm-s-tomorrow-night-bright.CodeMirror .cm-table-row-even { background-color: rgb(23, 23, 23); }
+.cm-s-tomorrow-night-eighties.CodeMirror .cm-table-row-even { background-color: rgb(20, 20, 20); }
+.cm-s-twilight.CodeMirror .cm-table-row-even { background-color: rgb(43, 43, 43); }
+.cm-s-vibrant-ink.CodeMirror .cm-table-row-even { background-color: rgb(26, 26, 26); }
+.cm-s-xq-dark.CodeMirror .cm-table-row-even { background-color: rgb(34, 25, 53); }
+.cm-s-yeti.CodeMirror .cm-table-row-even { background-color: rgb(235, 232, 230); }
--- a/extra_scripts/codemirror/mode/bfm/bfm.js
+++ b/extra_scripts/codemirror/mode/bfm/bfm.js
@@ -54,17 +54,34 @@
        return {
          baseState: CodeMirror.startState(baseMode),

-          fencedEndRE: null
+          basePos: 0,
+          baseCur: null,
+          overlayPos: 0,
+          overlayCur: null,
+          streamSeen: null,
+
+          fencedEndRE: null,
+
+          inTable: false,
+          rowIndex: 0
        }
      },
      copyState: function(s) {
        return {
          baseState: CodeMirror.copyState(baseMode, s.baseState),

+          basePos: s.basePos,
+          baseCur: null,
+          overlayPos: s.overlayPos,
+          overlayCur: null,
+
          fencedMode: s.fencedMode,
          fencedState: s.fencedMode ? CodeMirror.copyState(s.fencedMode, s.fencedState) : null,

-          fencedEndRE: s.fencedEndRE
+          fencedEndRE: s.fencedEndRE,
+
+          inTable: s.inTable,
+          rowIndex: s.rowIndex
        }
      },
      token: function(stream, state) {
@@ -76,9 +93,8 @@
          state.fencedState = null

          stream.pos = initialPos
-          return baseMode.token(stream, state.baseState)
        }
-
+        else {
          if (state.fencedMode) {
            return state.fencedMode.token(stream, state.fencedState)
          }
@@ -93,10 +109,92 @@
            }

            stream.pos = initialPos
-          return baseMode.token(stream, state.baseState)
+          }
        }

-        return baseMode.token(stream, state.baseState)
+        if (stream != state.streamSeen || Math.min(state.basePos, state.overlayPos) < stream.start) {
+          state.streamSeen = stream
+          state.basePos = state.overlayPos = stream.start
+        }
+
+        if (stream.start == state.basePos) {
+          state.baseCur = baseMode.token(stream, state.baseState)
+          state.basePos = stream.pos
+        }
+        if (stream.start == state.overlayPos) {
+          stream.pos = stream.start
+          state.overlayCur = this.overlayToken(stream, state)
+          state.overlayPos = stream.pos
+        }
+        stream.pos = Math.min(state.basePos, state.overlayPos)
+
+        if (state.overlayCur == null) {
+          return state.baseCur
+        }
+        else if (state.baseCur != null && state.combineTokens) {
+          return state.baseCur + ' ' + state.overlayCur
+        }
+        else {
+          return state.overlayCur
+        }
+      },
+      overlayToken: function(stream, state) {
+        state.combineTokens = false
+
+        if (state.fencedEndRE && stream.match(state.fencedEndRE)) {
+          state.fencedEndRE = null
+          state.localMode = null
+          state.localState = null
+
+          return null
+        }
+
+        if (state.localMode) {
+          return state.localMode.token(stream, state.localState) || ''
+        }
+
+        const match = stream.match(fencedCodeRE, true)
+        if (match) {
+          state.fencedEndRE = new RegExp(match[1] + '+ *$')
+
+          state.localMode = getMode(match[2], match[3], config, stream.lineOracle.doc.cm)
+          if (state.localMode) {
+            state.localState = CodeMirror.startState(state.localMode)
+          }
+
+          return null
+        }
+
+        state.combineTokens = true
+
+        if (state.inTable) {
+          if (stream.match(/^\|/)) {
+            ++state.rowIndex
+
+            stream.skipToEnd()
+
+            if (state.rowIndex === 1) {
+              return 'table table-separator'
+            } else if (state.rowIndex % 2 === 0) {
+              return 'table table-row table-row-even'
+            } else {
+              return 'table table-row table-row-odd'
+            }
+          } else {
+            state.inTable = false
+
+            stream.skipToEnd()
+            return null
+          }
+        } else if (stream.match(/^\|/)) {
+          state.inTable = true
+          state.rowIndex = 0
+
+          stream.skipToEnd()
+          return 'table table-header'
+        }
+
+        stream.next()
      },
      electricChars: baseMode.electricChars,
      innerMode: function(state) {
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 const ChildProcess = require('child_process')
 const packager = require('electron-packager')
@@ -284,5 +285,48 @@ module.exports = function (grunt) {
    }
  })

+  grunt.registerTask('bfm', function () {
+    const Color = require('color')
+    const parseCSS = require('css').parse
+
+    const root = path.join(__dirname, 'node_modules/codemirror/theme/')
+
+    const colors = fs.readdirSync(root).map(file => {
+      const css = parseCSS(fs.readFileSync(path.join(root, file), 'utf8'))
+
+      const rules = css.stylesheet.rules.filter(rule => rule.selectors && /\b\.CodeMirror$/.test(rule.selectors[0]))
+      if (rules.length === 1) {
+        let bgColor = Color('white')
+        let fgColor = Color('black')
+
+        rules[0].declarations.forEach(declaration => {
+          if (declaration.property === 'background-color' || declaration.property === 'background') {
+            bgColor = Color(declaration.value.split(' ')[0])
+          } else if (declaration.property === 'color') {
+            const value = /^(.*?)(?:\s*!important)?$/.exec(declaration.value)[1]
+            const match = /^rgba\((.*?),\s*1\)$/.exec(value)
+            if (match) {
+              fgColor = Color(`rgb(${match[1]})`)
+            } else {
+              fgColor = Color(value)
+            }
+          }
+        })
+
+        if (bgColor.isLight()) {
+          bgColor = bgColor.mix(fgColor, 0.05)
+        } else {
+          bgColor = bgColor.mix(fgColor, 0.1)
+        }
+
+        return `${rules[0].selectors[0]} .cm-table-row-even { background-color: ${bgColor.rgb().string()}; }`
+      }
+    }).filter(value => !!value)
+
+    const defaultBgColor = Color('white').mix(Color('black'), 0.05)
+
+    fs.writeFileSync(path.join(__dirname, 'extra_scripts/codemirror/mode/bfm/bfm.css'), [`.cm-table-row-even { background-color: ${defaultBgColor.rgb().string()}; }`, ...colors].join('\n'), 'utf8')
+  })
+
  grunt.registerTask('default', ['build'])
 }
--- a/lib/main.html
+++ b/lib/main.html
@@ -10,6 +10,7 @@
  <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">
  <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
+  <link rel="stylesheet" href="../extra_scripts/codemirror/mode/bfm/bfm.css">

  <title>Boostnote</title>

@@ -103,6 +104,7 @@
  <script src="../extra_scripts/boost/boostNewLineIndentContinueMarkdownList.js"></script>
  <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
  <script src="../extra_scripts/codemirror/addon/hyperlink/hyperlink.js"></script>
+  <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>

  <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>
  <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
    "aws-sdk": "^2.48.0",
    "aws-sdk-mobile-analytics": "^0.9.2",
    "chart.js": "^2.7.2",
-    "codemirror": "^5.39.0",
+    "codemirror": "^5.40.2",
    "codemirror-mode-elixir": "^1.1.1",
    "electron-config": "^1.0.0",
    "electron-gh-releases": "^2.0.2",
@@ -119,8 +119,10 @@
    "babel-preset-react-hmre": "^1.0.1",
    "babel-register": "^6.11.6",
    "browser-env": "^3.2.5",
+    "color": "^3.0.0",
    "concurrently": "^3.4.0",
    "copy-to-clipboard": "^3.0.6",
+    "css": "^2.2.4",
    "css-loader": "^0.19.0",
    "devtron": "^1.1.0",
    "dom-storage": "^2.0.2",
--- a/tests/lib/snapshots/markdown-test.js.md
+++ b/tests/lib/snapshots/markdown-test.js.md
@@ -31,7 +31,7 @@ Generated by [AVA](https://ava.li).

    `<ul>␊
    <li class="taskListItem"><input type="checkbox" id="checkbox-2" /> Unchecked</li>␊
-    <li class="taskListItem"><input type="checkbox" checked id="checkbox-3" /> Checked</li>␊
+    <li class="taskListItem checked"><input type="checkbox" checked id="checkbox-3" /> Checked</li>␊
    </ul>␊
    `

--- a/tests/lib/snapshots/markdown-test.js.snap
+++ b/tests/lib/snapshots/markdown-test.js.snap
--- a/yarn.lock
+++ b/yarn.lock
@@ -1803,9 +1803,9 @@ codemirror@^5.18.2, codemirror@^5.20.2:
  version "5.38.0"
  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.38.0.tgz#26a9551446e51dbdde36aabe60f72469724fd332"

-codemirror@^5.39.0:
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.39.0.tgz#4654f7d2f7e525e04a62e72d9482348ccb37dce5"
+codemirror@^5.40.2:
+  version "5.40.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.40.2.tgz#f4a41fee2d84e679543591b3680af259d903330b"

 coffee-script@^1.10.0, coffee-script@^1.12.4:
  version "1.12.7"
@@ -1832,7 +1832,13 @@ color-convert@^1.3.0, color-convert@^1.9.0:
  dependencies:
    color-name "^1.1.1"

-color-name@^1.0.0, color-name@^1.1.1:
+color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3, color-name@^1.0.0, color-name@^1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"

@@ -1842,6 +1848,13 @@ color-string@^0.3.0:
  dependencies:
    color-name "^1.0.0"

+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color@^0.11.0:
  version "0.11.4"
  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
@@ -1850,6 +1863,13 @@ color@^0.11.0:
    color-convert "^1.3.0"
    color-string "^0.3.0"

+color@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 colormin@^1.0.5:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
@@ -2149,6 +2169,15 @@ css-selector-tokenizer@^0.5.0, css-selector-tokenizer@^0.5.1:
    cssesc "^0.1.0"
    fastparse "^1.1.1"

+css@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -4595,6 +4624,10 @@ is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+
 is-binary-path@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -8085,6 +8118,12 @@ signale@^1.2.1:
    figures "^2.0.0"
    pkg-conf "^2.1.0"

+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
 single-line-log@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
@@ -8176,7 +8215,7 @@ source-list-map@^0.1.4, source-list-map@~0.1.7:
  version "0.1.8"
  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"

-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
  dependencies: