From 777f7f9305f77c8d66ea188c6614c8c70690a0d0 Mon Sep 17 00:00:00 2001 From: dojineko Date: Sun, 17 Apr 2016 21:00:34 +0900 Subject: [PATCH] Add code theme selector --- browser/components/MarkdownPreview.js | 1 + browser/finder/index.js | 3 + browser/lib/fetchConfig.js | 1 + browser/lib/hljsThemes.js | 78 +++++++++++++++++++ browser/lib/markdown.js | 8 +- browser/main/index.js | 3 + .../main/modal/Preference/AppSettingTab.js | 12 +++ browser/styles/mixins/marked.styl | 4 - browser/styles/theme/dark.styl | 5 -- lib/config.js | 1 + lib/finder.html | 2 +- lib/main.html | 2 +- package.json | 6 +- 13 files changed, 110 insertions(+), 16 deletions(-) create mode 100644 browser/lib/hljsThemes.js diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index b9133679..5d10cca8 100644 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -20,6 +20,7 @@ const sanitizeOpts = { allowedClasses: { 'a': ['lineAnchor'], 'div': ['math'], + 'pre': ['hljs'], 'span': ['math', 'hljs-*'], 'code': ['language-*'] }, diff --git a/browser/finder/index.js b/browser/finder/index.js index 30ef1403..839b2f48 100644 --- a/browser/finder/index.js +++ b/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') { diff --git a/browser/lib/fetchConfig.js b/browser/lib/fetchConfig.js index 54b6eaf5..e1d40dd4 100644 --- a/browser/lib/fetchConfig.js +++ b/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' } diff --git a/browser/lib/hljsThemes.js b/browser/lib/hljsThemes.js new file mode 100644 index 00000000..689e47fc --- /dev/null +++ b/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 +} diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js index d75bdf02..0a4ddb13 100644 --- a/browser/lib/markdown.js +++ b/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 '
' +
+               hljs.highlight(lang, str).value +
+               '
'; } catch (e) {} } - return str.replace(/\&/g, '&').replace(/\/g, '>').replace(/\"/g, '"') + return '
' +
+           str.replace(/\&/g, '&').replace(/\/g, '>').replace(/\"/g, '"') +
+           '
'; } }) md.use(emoji, { diff --git a/browser/main/index.js b/browser/main/index.js index 59649afb..718cd503 100644 --- a/browser/main/index.js +++ b/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') { diff --git a/browser/main/modal/Preference/AppSettingTab.js b/browser/main/modal/Preference/AppSettingTab.js index fe7665f6..f0d5d960 100644 --- a/browser/main/modal/Preference/AppSettingTab.js +++ b/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 {

) : null let aceThemeList = ace.require("ace/ext/themelist") + let hljsThemeList = hljsTheme() return (
@@ -189,6 +191,16 @@ export default class AppSettingTab extends React.Component {
+
+ + +