Codeblock theme of markdown preview

Author: Rokt33r

browser/components/MarkdownEditor.js

@@ -96,7 +96,7 @@ class MarkdownEditor extends React.Component {
           style={previewStyle}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
-          codeBlockTheme={config.preview.theme}
+          codeBlockTheme={config.preview.codeBlockTheme}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           ref='preview'

browser/components/MarkdownPreview.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
+import hljsTheme from 'browser/lib/hljsThemes'
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
@@ -44,6 +45,7 @@ export default class MarkdownPreview extends React.Component {
       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
     ) this.rewriteIframe()
   }
@@ -53,13 +55,14 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber } = this.props
+    let { value, 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
+    codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
 
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style>
@@ -86,7 +89,7 @@ export default class MarkdownPreview extends React.Component {
           opacity: 0.5;
         }
       </style>
-      <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
+      <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
       <link rel="stylesheet" href="../resources/katex.min.css">
     `
     this.refs.root.contentWindow.document.body.innerHTML = markdown(value)

browser/components/markdown.styl

@@ -198,13 +198,14 @@ code
   margin-left 2px
 pre
   padding 1em !important
-  background-color #f7f7f7 !important
+  border solid 1px alpha(borderColor, 0.5)
   border-radius 5px
   overflow-x auto
   margin 0 0 1em
   line-height 1.35
   code
     margin 0
+    background-color inherit
     padding 0
     border none
     border-radius 0