public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 10:16:26 +00:00
Code Issues Releases Wiki Activity

Codeblock theme of markdown preview

Browse Source
This commit is contained in:
Dick Choi
2016-07-14 14:37:14 +09:00
parent 44f270f408
commit 2d46d12628
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/MarkdownEditor.js
View File

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

7
browser/components/MarkdownPreview.js
View File

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

3
browser/components/markdown.styl
View File

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