Add code theme selector

browser/components/MarkdownPreview.js

@@ -20,6 +20,7 @@ const sanitizeOpts = {
   allowedClasses: {
     'a': ['lineAnchor'],
     'div': ['math'],
+    'pre': ['hljs'],
     'span': ['math', 'hljs-*'],
     'code': ['language-*']
   },

browser/finder/index.js

@@ -25,6 +25,9 @@ ipcRenderer.on('config-apply', function (e, newConfig) {
 function applyConfig(){
   let body = document.body
   body.setAttribute('data-theme', config['theme-ui'])
+
+  let hljsCss = document.getElementById('hljs-css')
+  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
 }
 
 if (process.env.NODE_ENV !== 'production') {

browser/lib/fetchConfig.js

@@ -15,6 +15,7 @@ const defaultConfig = {
   'switch-preview': 'blur',
   'disable-direct-write': false,
   'theme-ui': 'light',
+  'theme-code': 'xcode',
   'theme-syntax': 'xcode'
 }
 

browser/lib/hljsThemes.js

@@ -0,0 +1,78 @@
+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

@@ -11,10 +11,14 @@ var md = markdownit({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlight(lang, str).value
+        return '<pre class="hljs"><code>' +
+               hljs.highlight(lang, str).value +
+               '</code></pre>';
       } catch (e) {}
     }
-    return str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;')
+    return '<pre class="hljs"><code>' +
+           str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+           '</code></pre>';
   }
 })
 md.use(emoji, {

browser/main/index.js

@@ -24,6 +24,9 @@ ipc.on('config-apply', function (e, newConfig) {
 function applyConfig(config) {
   let body = document.body
   body.setAttribute('data-theme', config['theme-ui'])
+
+  let hljsCss = document.getElementById('hljs-css')
+  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
 }
 
 if (process.env.NODE_ENV !== 'production') {

browser/main/modal/Preference/AppSettingTab.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import linkState from 'browser/lib/linkState'
 import { updateUser } from '../../actions'
 import fetchConfig from 'browser/lib/fetchConfig'
+import hljsTheme from 'browser/lib/hljsThemes'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -116,6 +117,7 @@ export default class AppSettingTab extends React.Component {
         </p>
       ) : null
     let aceThemeList = ace.require("ace/ext/themelist")
+    let hljsThemeList = hljsTheme()
 
     return (
       <div className='AppSettingTab content'>
@@ -189,6 +191,16 @@ export default class AppSettingTab extends React.Component {
               <option value='dark'>Dark</option>
             </select>
           </div>
+          <div className='sectionSelect'>
+            <label>Code Theme</label>
+            <select valueLink={this.linkState('config.theme-code')}>
+              {
+                hljsThemeList.map(function(v, i){
+                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                })
+              }
+            </select>
+          </div>
           <div className='sectionSelect'>
             <label>Syntax Theme</label>
             <select valueLink={this.linkState('config.theme-syntax')}>

browser/styles/mixins/marked.styl

@@ -116,9 +116,7 @@ marked()
     border solid 1px alpha(borderColor, 0.3)
     border-radius 4px
     font-size 0.9em
-    color black
     text-decoration none
-    background-color #F6F6F6
     margin-right 2px
   *:not(a.lineAnchor) + code
     margin-left 2px
@@ -128,14 +126,12 @@ marked()
     border-radius 5px
     overflow-x auto
     margin 0 0 15px
-    background-color #F6F6F6
     line-height 1.35em
     &>code
       margin 0
       padding 0
       border none
       border-radius 0
-      color black
   table
     width 100%
     margin 15px 0 25px

browser/styles/theme/dark.styl

@@ -389,8 +389,3 @@ body[data-theme="dark"]
       color themeDarkText
       border-color themeDarkBorder
       background-color themeDarkPreview
-
-      pre,
-      code
-        color themeDarkText
-        background-color themeDarkPreview

lib/config.js

@@ -14,6 +14,7 @@ const defaultConfig = {
   'switch-preview': 'blur',
   'disable-direct-write': false,
   'theme-ui': 'light',
+  'theme-code': 'xcode',
   'theme-syntax': 'xcode'
 }
 const configFile = 'config.json'

lib/finder.html

@@ -9,7 +9,7 @@
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <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="../resources/katex.min.css">
 

lib/main.html

@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <title>Boostnote</title>
   <link rel="stylesheet" href="../resources/katex.min.css">

package.json

@@ -36,11 +36,11 @@
     "electron-gh-releases": "^2.0.2",
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
-    "highlight.js": "^8.9.1",
+    "highlight.js": "^9.3.0",
     "lodash": "^3.10.1",
-    "markdown-it": "^4.4.0",
+    "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
-    "markdown-it-emoji": "^1.1.0",
+    "markdown-it-emoji": "^1.1.1",
     "markdown-it-math": "^3.0.2",
     "md5": "^2.0.0",
     "moment": "^2.10.3",