Skip to content

Commit 777f7f9

Browse files
dojinekodojineko
committed
Add code theme selector
1 parent 43fb37a commit 777f7f9

13 files changed

Lines changed: 110 additions & 16 deletions

File tree

‎browser/components/MarkdownPreview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const sanitizeOpts = {
2020
allowedClasses: {
2121
'a': ['lineAnchor'],
2222
'div': ['math'],
23+
'pre': ['hljs'],
2324
'span': ['math', 'hljs-*'],
2425
'code': ['language-*']
2526
},

‎browser/finder/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ ipcRenderer.on('config-apply', function (e, newConfig) {
2525
function applyConfig(){
2626
let body = document.body
2727
body.setAttribute('data-theme', config['theme-ui'])
28+
29+
let hljsCss = document.getElementById('hljs-css')
30+
hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
2831
}
2932

3033
if (process.env.NODE_ENV !== 'production') {

‎browser/lib/fetchConfig.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const defaultConfig = {
1515
'switch-preview': 'blur',
1616
'disable-direct-write': false,
1717
'theme-ui': 'light',
18+
'theme-code': 'xcode',
1819
'theme-syntax': 'xcode'
1920
}
2021

‎browser/lib/hljsThemes.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const hljsThemeList =[
2+
{caption: "Default", name: "default"},
3+
{caption: "Agate", name: "agate"},
4+
{caption: "Androidstudio", name: "androidstudio"},
5+
{caption: "Arduino Light", name: "arduino-light"},
6+
{caption: "Arta", name: "arta"},
7+
{caption: "Ascetic", name: "ascetic"},
8+
{caption: "Atelier Cave Dark", name: "atelier-cave-dark"},
9+
{caption: "Atelier Cave Light", name: "atelier-cave-light"},
10+
{caption: "Atelier Dune Dark", name: "atelier-dune-dark"},
11+
{caption: "Atelier Dune Light", name: "atelier-dune-light"},
12+
{caption: "Atelier Estuary Dark", name: "atelier-estuary-dark"},
13+
{caption: "Atelier Estuary Light", name: "atelier-estuary-light"},
14+
{caption: "Atelier Forest Dark", name: "atelier-forest-dark"},
15+
{caption: "Atelier Forest Light", name: "atelier-forest-light"},
16+
{caption: "Atelier Heath Dark", name: "atelier-heath-dark"},
17+
{caption: "Atelier Heath Light", name: "atelier-heath-light"},
18+
{caption: "Atelier Lakeside Dark", name: "atelier-lakeside-dark"},
19+
{caption: "Atelier Lakeside Light", name: "atelier-lakeside-light"},
20+
{caption: "Atelier Plateau Dark", name: "atelier-plateau-dark"},
21+
{caption: "Atelier Plateau Light", name: "atelier-plateau-light"},
22+
{caption: "Atelier Savanna Dark", name: "atelier-savanna-dark"},
23+
{caption: "Atelier Savanna Light", name: "atelier-savanna-light"},
24+
{caption: "Atelier Seaside Dark", name: "atelier-seaside-dark"},
25+
{caption: "Atelier Seaside Light", name: "atelier-seaside-light"},
26+
{caption: "Atelier Sulphurpool Dark", name: "atelier-sulphurpool-dark"},
27+
{caption: "Atelier Sulphurpool Light", name: "atelier-sulphurpool-light"},
28+
{caption: "Brown Paper", name: "brown-paper"},
29+
{caption: "Codepen Embed", name: "codepen-embed"},
30+
{caption: "Color Brewer", name: "color-brewer"},
31+
{caption: "Dark", name: "dark"},
32+
{caption: "Darkula", name: "darkula"},
33+
{caption: "Docco", name: "docco"},
34+
{caption: "Dracula", name: "dracula"},
35+
{caption: "Far", name: "far"},
36+
{caption: "Foundation", name: "foundation"},
37+
{caption: "Github Gist", name: "github-gist"},
38+
{caption: "Github", name: "github"},
39+
{caption: "Googlecode", name: "googlecode"},
40+
{caption: "Grayscale", name: "grayscale"},
41+
{caption: "Gruvbox Dark", name: "gruvbox.dark"},
42+
{caption: "Gruvbox Light", name: "gruvbox.light"},
43+
{caption: "Hopscotch", name: "hopscotch"},
44+
{caption: "Hybrid", name: "hybrid"},
45+
{caption: "Idea", name: "idea"},
46+
{caption: "Ir Black", name: "ir-black"},
47+
{caption: "Kimbie Dark", name: "kimbie.dark"},
48+
{caption: "Kimbie Light", name: "kimbie.light"},
49+
{caption: "Magula", name: "magula"},
50+
{caption: "Mono Blue", name: "mono-blue"},
51+
{caption: "Monokai Sublime", name: "monokai-sublime"},
52+
{caption: "Monokai", name: "monokai"},
53+
{caption: "Obsidian", name: "obsidian"},
54+
{caption: "Paraiso Dark", name: "paraiso-dark"},
55+
{caption: "Paraiso Light", name: "paraiso-light"},
56+
{caption: "Pojoaque", name: "pojoaque"},
57+
{caption: "Qtcreator Dark", name: "qtcreator_dark"},
58+
{caption: "Qtcreator Light", name: "qtcreator_light"},
59+
{caption: "Railscasts", name: "railscasts"},
60+
{caption: "Rainbow", name: "rainbow"},
61+
{caption: "School Book", name: "school-book"},
62+
{caption: "Solarized Dark", name: "solarized-dark"},
63+
{caption: "Solarized Light", name: "solarized-light"},
64+
{caption: "Sunburst", name: "sunburst"},
65+
{caption: "Tomorrow Night Blue", name: "tomorrow-night-blue"},
66+
{caption: "Tomorrow Night Bright", name: "tomorrow-night-bright"},
67+
{caption: "Tomorrow Night Eighties", name: "tomorrow-night-eighties"},
68+
{caption: "Tomorrow Night", name: "tomorrow-night"},
69+
{caption: "Tomorrow", name: "tomorrow"},
70+
{caption: "Vs", name: "vs"},
71+
{caption: "Xcode", name: "xcode"},
72+
{caption: "Xt 256", name: "xt256"},
73+
{caption: "Zenburn", name: "zenburn"}
74+
]
75+
76+
export default function hljsTheme() {
77+
return hljsThemeList
78+
}

‎browser/lib/markdown.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ var md = markdownit({
1111
highlight: function (str, lang) {
1212
if (lang && hljs.getLanguage(lang)) {
1313
try {
14-
return hljs.highlight(lang, str).value
14+
return '<pre class="hljs"><code>' +
15+
hljs.highlight(lang, str).value +
16+
'</code></pre>';
1517
} catch (e) {}
1618
}
17-
return str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;')
19+
return '<pre class="hljs"><code>' +
20+
str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
21+
'</code></pre>';
1822
}
1923
})
2024
md.use(emoji, {

‎browser/main/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ ipc.on('config-apply', function (e, newConfig) {
2424
function applyConfig(config) {
2525
let body = document.body
2626
body.setAttribute('data-theme', config['theme-ui'])
27+
28+
let hljsCss = document.getElementById('hljs-css')
29+
hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
2730
}
2831

2932
if (process.env.NODE_ENV !== 'production') {

‎browser/main/modal/Preference/AppSettingTab.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
22
import linkState from 'browser/lib/linkState'
33
import { updateUser } from '../../actions'
44
import fetchConfig from 'browser/lib/fetchConfig'
5+
import hljsTheme from 'browser/lib/hljsThemes'
56

67
const electron = require('electron')
78
const ipc = electron.ipcRenderer
@@ -116,6 +117,7 @@ export default class AppSettingTab extends React.Component {
116117
</p>
117118
) : null
118119
let aceThemeList = ace.require("ace/ext/themelist")
120+
let hljsThemeList = hljsTheme()
119121

120122
return (
121123
<div className='AppSettingTab content'>
@@ -189,6 +191,16 @@ export default class AppSettingTab extends React.Component {
189191
<option value='dark'>Dark</option>
190192
</select>
191193
</div>
194+
<div className='sectionSelect'>
195+
<label>Code Theme</label>
196+
<select valueLink={this.linkState('config.theme-code')}>
197+
{
198+
hljsThemeList.map(function(v, i){
199+
return (<option value={v.name} key={v.name}>{v.caption}</option>)
200+
})
201+
}
202+
</select>
203+
</div>
192204
<div className='sectionSelect'>
193205
<label>Syntax Theme</label>
194206
<select valueLink={this.linkState('config.theme-syntax')}>

‎browser/styles/mixins/marked.styl‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,7 @@ marked()
116116
border solid 1px alpha(borderColor, 0.3)
117117
border-radius 4px
118118
font-size 0.9em
119-
color black
120119
text-decoration none
121-
background-color #F6F6F6
122120
margin-right 2px
123121
*:not(a.lineAnchor) + code
124122
margin-left 2px
@@ -128,14 +126,12 @@ marked()
128126
border-radius 5px
129127
overflow-x auto
130128
margin 0 0 15px
131-
background-color #F6F6F6
132129
line-height 1.35em
133130
&>code
134131
margin 0
135132
padding 0
136133
border none
137134
border-radius 0
138-
color black
139135
table
140136
width 100%
141137
margin 15px 0 25px

‎browser/styles/theme/dark.styl‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -389,8 +389,3 @@ body[data-theme="dark"]
389389
color themeDarkText
390390
border-color themeDarkBorder
391391
background-color themeDarkPreview
392-
393-
pre,
394-
code
395-
color themeDarkText
396-
background-color themeDarkPreview

‎lib/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const defaultConfig = {
1414
'switch-preview': 'blur',
1515
'disable-direct-write': false,
1616
'theme-ui': 'light',
17+
'theme-code': 'xcode',
1718
'theme-syntax': 'xcode'
1819
}
1920
const configFile = 'config.json'

0 commit comments

Comments
 (0)