Add code theme selector

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')}>