Render codefence by codemirror rather than by hljs

browser/components/CodeEditor.js

@@ -37,6 +37,9 @@ export default class CodeEditor extends React.Component {
       }
       this.props.onBlur != null && this.props.onBlur(e)
     }
+    this.loadStyleHandler = (e) => {
+      this.editor.refresh()
+    }
   }
 
   componentDidMount () {
@@ -72,11 +75,16 @@ export default class CodeEditor extends React.Component {
 
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
+
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.addEventListener('load', this.loadStyleHandler)
   }
 
   componentWillUnmount () {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -86,7 +94,7 @@ export default class CodeEditor extends React.Component {
     }
     if (prevProps.theme !== this.props.theme) {
       this.editor.setOption('theme', this.props.theme)
-      needRefresh = true
+      // editor should be refreshed after css loaded
     }
     if (prevProps.fontSize !== this.props.fontSize) {
       needRefresh = true

browser/components/MarkdownEditor.js

@@ -114,6 +114,7 @@ class MarkdownEditor extends React.Component {
 
   render () {
     let { className, value, config } = this.props
+
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
@@ -153,6 +154,7 @@ class MarkdownEditor extends React.Component {
           codeBlockTheme={config.preview.codeBlockTheme}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
+          indentSize={editorIndentSize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'

browser/components/MarkdownPreview.js

@@ -1,11 +1,45 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
-import hljsTheme from 'browser/lib/hljsThemes'
+import CodeMirror from 'codemirror'
+import consts from 'browser/lib/consts'
+
+const { remote } = require('electron')
+const { app } = remote
+const path = require('path')
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const { shell } = require('electron')
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+  ? app.getAppPath()
+  : path.resolve())
 
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+  return `
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+${markdownStyle}
+body {
+  font-family: ${fontFamily.join(', ')};
+  font-size: ${fontSize}px;
+}
+code {
+  font-family: ${codeBlockFontFamily.join(', ')};
+}
+.lineNumber {
+  ${lineNumber && 'display: block !important;'}
+  font-family: ${codeBlockFontFamily.join(', ')};
+}
+`
+}
+
+const { shell } = require('electron')
 const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -68,9 +102,17 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidMount () {
-    this.refs.root.setAttribute('sandbox', 'allow-same-origin')
+    this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+
+    this.refs.root.contentWindow.document.head.innerHTML = `
+      <style id='style'></style>
+      <link rel="stylesheet" href="${appPath}/compiled/katex-style.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
+      <link rel="stylesheet" id="codeTheme">
+    `
     this.rewriteIframe()
+    this.applyStyle()
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
@@ -83,14 +125,36 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value ||
-      prevProps.fontFamily !== this.props.fontFamily ||
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
-      prevProps.theme !== this.props.theme
-    ) this.rewriteIframe()
+      prevProps.theme !== this.props.theme) {
+      this.applyStyle()
+      this.rewriteIframe()
+    }
+  }
+
+  applyStyle () {
+    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
+      ? [fontFamily].concat(defaultFontFamily)
+      : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+      : defaultCodeBlockFontFamily
+
+    this.setCodeTheme(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+  }
+
+  setCodeTheme (theme) {
+    theme = consts.THEMES.some((_theme) => _theme === theme)
+      ? theme
+      : 'default'
+    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
   rewriteIframe () {
@@ -101,43 +165,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.checkboxClickHandler)
     })
 
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
-    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
-      ? [fontFamily].concat(defaultFontFamily)
-      : defaultFontFamily
-    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
-      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
-      : defaultCodeBlockFontFamily
-    codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
-
-    this.refs.root.contentWindow.document.head.innerHTML = `
-      <style>
-        @font-face {
-          font-family: 'Lato';
-          src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.ttf') format('truetype');
-          font-style: normal;
-          font-weight: normal;
-          text-rendering: optimizeLegibility;
-        }
-        ${markdownStyle}
-        body {
-          font-family: ${fontFamily.join(', ')};
-          font-size: ${fontSize}px;
-        }
-        code {
-          font-family: ${codeBlockFontFamily.join(', ')};
-        }
-        .lineNumber {
-          ${lineNumber && 'display: block !important;'}
-          font-family: ${codeBlockFontFamily.join(', ')};
-          opacity: 0.5;
-        }
-      </style>
-      <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
-      <link rel="stylesheet" href="../compiled/katex-style.css">
-    `
+    let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
@@ -145,9 +173,27 @@ export default class MarkdownPreview extends React.Component {
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       el.addEventListener('click', this.anchorClickHandler)
     })
+
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.addEventListener('click', this.checkboxClickHandler)
     })
+
+    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+      ? codeBlockTheme
+      : 'default'
+
+    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+      let syntax = CodeMirror.findModeByName(el.className)
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+      CodeMirror.requireMode(syntax.mode, () => {
+        let content = el.innerHTML
+        el.innerHTML = ''
+        el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+        CodeMirror.runMode(content, syntax.mime, el, {
+          tabSize: indentSize
+        })
+      })
+    })
   }
 
   focus () {

browser/components/markdown.styl

@@ -191,7 +191,7 @@ code
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
-  font-size 0.85em
+  font-size 1em
   text-decoration none
   margin-right 2px
 pre
@@ -200,26 +200,36 @@ pre
   border-radius 5px
   overflow-x auto
   margin 0 0 1em
-  line-height 1.35
+  display flex
+  line-height 1.4em
+  &.CodeMirror
+    height initial
+    &>code
+      flex 1
+      overflow-x auto
   code
-    margin 0
     background-color inherit
+    margin 0
     padding 0
     border none
     border-radius 0
-    pre
-      border none
-      margin -5px
   &>span.lineNumber
     display none
-    float left
-    font-size 0.85em
-    margin 0 0.5em 0 -0.5em
+    font-size 1em
+    padding 0.5em 0
+    margin -0.5em 0.5em -0.5em -0.5em
     border-right 1px solid
     text-align right
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    &.CodeMirror-gutters
+      position initial
+      top initial
+      left initial
+      min-height 0 !important
     &>span
       display block
-      padding 0 .5em 0 1em
+      padding 0 .5em 0
 table
   display block
   width 100%

browser/finder/NoteDetail.js

@@ -185,11 +185,13 @@ class NoteDetail extends React.Component {
 
     return (
       <MarkdownPreview styleName='root'
+        theme={config.ui.theme}
         fontSize={config.preview.fontSize}
         fontFamily={config.preview.fontFamily}
         codeBlockTheme={config.preview.codeBlockTheme}
         codeBlockFontFamily={config.editor.fontFamily}
         lineNumber={config.preview.lineNumber}
+        indentSize={editorIndentSize}
         value={note.content}
       />
     )

browser/finder/NoteItem.js

@@ -50,8 +50,8 @@ class NoteItem extends React.Component {
 
         <div styleName='title'>
           {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='title-icon' className='fa fa-fw fa-code'/>
-            : <i styleName='title-icon' className='fa fa-fw fa-file-text-o'/>
+            ? <i styleName='title-icon' className='fa fa-fw fa-code' />
+            : <i styleName='title-icon' className='fa fa-fw fa-file-text-o' />
           }
           {note.title.trim().length > 0
             ? note.title

browser/lib/customMeta.js

@@ -1,4 +1,4 @@
 import CodeMirror from 'codemirror'
 import _ from 'lodash'
 
-CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl']})
+CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})

browser/lib/hljsThemes.js

@@ -1,78 +0,0 @@
-const hljsThemeList = [
-  {caption: 'Default', name: 'default'},
-  {caption: 'Agate', name: 'agate'},
-  {caption: 'Androidstudio', name: 'androidstudio'},
-  {caption: 'Arduino Light', name: 'arduino-light'},
-  {caption: 'Arta', name: 'arta'},
-  {caption: 'Ascetic', name: 'ascetic'},
-  {caption: 'Atelier Cave Dark', name: 'atelier-cave-dark'},
-  {caption: 'Atelier Cave Light', name: 'atelier-cave-light'},
-  {caption: 'Atelier Dune Dark', name: 'atelier-dune-dark'},
-  {caption: 'Atelier Dune Light', name: 'atelier-dune-light'},
-  {caption: 'Atelier Estuary Dark', name: 'atelier-estuary-dark'},
-  {caption: 'Atelier Estuary Light', name: 'atelier-estuary-light'},
-  {caption: 'Atelier Forest Dark', name: 'atelier-forest-dark'},
-  {caption: 'Atelier Forest Light', name: 'atelier-forest-light'},
-  {caption: 'Atelier Heath Dark', name: 'atelier-heath-dark'},
-  {caption: 'Atelier Heath Light', name: 'atelier-heath-light'},
-  {caption: 'Atelier Lakeside Dark', name: 'atelier-lakeside-dark'},
-  {caption: 'Atelier Lakeside Light', name: 'atelier-lakeside-light'},
-  {caption: 'Atelier Plateau Dark', name: 'atelier-plateau-dark'},
-  {caption: 'Atelier Plateau Light', name: 'atelier-plateau-light'},
-  {caption: 'Atelier Savanna Dark', name: 'atelier-savanna-dark'},
-  {caption: 'Atelier Savanna Light', name: 'atelier-savanna-light'},
-  {caption: 'Atelier Seaside Dark', name: 'atelier-seaside-dark'},
-  {caption: 'Atelier Seaside Light', name: 'atelier-seaside-light'},
-  {caption: 'Atelier Sulphurpool Dark', name: 'atelier-sulphurpool-dark'},
-  {caption: 'Atelier Sulphurpool Light', name: 'atelier-sulphurpool-light'},
-  {caption: 'Brown Paper', name: 'brown-paper'},
-  {caption: 'Codepen Embed', name: 'codepen-embed'},
-  {caption: 'Color Brewer', name: 'color-brewer'},
-  {caption: 'Dark', name: 'dark'},
-  {caption: 'Darkula', name: 'darkula'},
-  {caption: 'Docco', name: 'docco'},
-  {caption: 'Dracula', name: 'dracula'},
-  {caption: 'Far', name: 'far'},
-  {caption: 'Foundation', name: 'foundation'},
-  {caption: 'Github Gist', name: 'github-gist'},
-  {caption: 'Github', name: 'github'},
-  {caption: 'Googlecode', name: 'googlecode'},
-  {caption: 'Grayscale', name: 'grayscale'},
-  {caption: 'Gruvbox Dark', name: 'gruvbox.dark'},
-  {caption: 'Gruvbox Light', name: 'gruvbox.light'},
-  {caption: 'Hopscotch', name: 'hopscotch'},
-  {caption: 'Hybrid', name: 'hybrid'},
-  {caption: 'Idea', name: 'idea'},
-  {caption: 'Ir Black', name: 'ir-black'},
-  {caption: 'Kimbie Dark', name: 'kimbie.dark'},
-  {caption: 'Kimbie Light', name: 'kimbie.light'},
-  {caption: 'Magula', name: 'magula'},
-  {caption: 'Mono Blue', name: 'mono-blue'},
-  {caption: 'Monokai Sublime', name: 'monokai-sublime'},
-  {caption: 'Monokai', name: 'monokai'},
-  {caption: 'Obsidian', name: 'obsidian'},
-  {caption: 'Paraiso Dark', name: 'paraiso-dark'},
-  {caption: 'Paraiso Light', name: 'paraiso-light'},
-  {caption: 'Pojoaque', name: 'pojoaque'},
-  {caption: 'Qtcreator Dark', name: 'qtcreator_dark'},
-  {caption: 'Qtcreator Light', name: 'qtcreator_light'},
-  {caption: 'Railscasts', name: 'railscasts'},
-  {caption: 'Rainbow', name: 'rainbow'},
-  {caption: 'School Book', name: 'school-book'},
-  {caption: 'Solarized Dark', name: 'solarized-dark'},
-  {caption: 'Solarized Light', name: 'solarized-light'},
-  {caption: 'Sunburst', name: 'sunburst'},
-  {caption: 'Tomorrow Night Blue', name: 'tomorrow-night-blue'},
-  {caption: 'Tomorrow Night Bright', name: 'tomorrow-night-bright'},
-  {caption: 'Tomorrow Night Eighties', name: 'tomorrow-night-eighties'},
-  {caption: 'Tomorrow Night', name: 'tomorrow-night'},
-  {caption: 'Tomorrow', name: 'tomorrow'},
-  {caption: 'Vs', name: 'vs'},
-  {caption: 'Xcode', name: 'xcode'},
-  {caption: 'Xt 256', name: 'xt256'},
-  {caption: 'Zenburn', name: 'zenburn'}
-]
-
-export default function hljsTheme () {
-  return hljsThemeList
-}

browser/lib/markdown.js

@@ -1,7 +1,6 @@
 import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
-import hljs from 'highlight.js'
 import _ from 'lodash'
 
 const katex = window.katex
@@ -10,9 +9,9 @@ function createGutter (str) {
   let lc = (str.match(/\n/g) || []).length
   let lines = []
   for (let i = 1; i <= lc; i++) {
-    lines.push('<span>' + i + '</span>')
+    lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
-  return '<span class="lineNumber">' + lines.join('') + '</span>'
+  return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
 }
 
 var md = markdownit({
@@ -21,19 +20,10 @@ var md = markdownit({
   html: true,
   xhtmlOut: true,
   highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return '<pre class="hljs">' +
+    return '<pre class="code">' +
     createGutter(str) +
-        '<code>' +
-        hljs.highlight(lang, str).value +
-        '</code></pre>'
-      } catch (e) {}
-    }
-    return '<pre class="hljs">' +
-    createGutter(str) +
-    '<code>' +
-    str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+    '<code class="' + lang + '">' +
+    str +
     '</code></pre>'
   }
 })

browser/main/modals/PreferencesModal/ConfigTab.js

@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
-import hljsTheme from 'browser/lib/hljsThemes'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
@@ -154,7 +153,6 @@ class ConfigTab extends React.Component {
       </p>
       : null
     let themes = consts.THEMES
-    let hljsThemeList = hljsTheme()
     let { config } = this.state
 
     return (
@@ -369,8 +367,8 @@ class ConfigTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
               >
                 {
-                  hljsThemeList.map((theme) => {
-                    return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
+                  themes.map((theme) => {
+                    return (<option value={theme} key={theme}>{theme}</option>)
                   })
                 }
               </select>

lib/finder.html

@@ -8,7 +8,6 @@
 
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
 
@@ -43,12 +42,12 @@
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
     const _ = require('lodash')
-    var scriptUrl = _.find(electron.remote.process.argv, a => a === '--hot')
+    var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
       ? 'http://localhost:8080/assets/finder.js'
       : '../compiled/finder.js'
-    var scriptEl=document.createElement('script')
-    scriptEl.setAttribute("type","text/javascript")
-    scriptEl.setAttribute("src", scriptUrl)
+    var scriptEl = document.createElement('script')
+    scriptEl.setAttribute('type', 'text/javascript')
+    scriptEl.setAttribute('src', scriptUrl)
     document.body.appendChild(scriptEl)
   </script>
 </body>

lib/main.html

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
   <title>Boostnote</title>

package.json

@@ -50,7 +50,6 @@
     "codemirror": "^5.19.0",
     "electron-gh-releases": "^2.0.2",
     "font-awesome": "^4.3.0",
-    "highlight.js": "^9.3.0",
     "immutable": "^3.8.1",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",

webpack-skeleton.js

@@ -35,7 +35,6 @@ var config = {
     'lodash',
     'markdown-it',
     'moment',
-    'highlight.js',
     'markdown-it-emoji',
     'fs-jetpack',
     '@rokt33r/markdown-it-math',