Add code theme selector

2025-12-13 09:46:22 +00:00 · 2016-04-17 21:00:34 +09:00
parent 43fb37ab1d
commit 777f7f9305
13 changed files with 110 additions and 16 deletions
--- 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-*']
  },
--- 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') {
--- 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'
 }

--- a/browser/lib/hljsThemes.js
+++ 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
+}
--- 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 '<pre class="hljs"><code>' +
+               hljs.highlight(lang, str).value +
+               '</code></pre>';
      } catch (e) {}
    }
-    return str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;')
+    return '<pre class="hljs"><code>' +
+           str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+           '</code></pre>';
  }
 })
 md.use(emoji, {
--- 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') {
--- 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 {
        </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')}>
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -116,9 +116,7 @@ marked()
    border solid 1px alpha(borderColor, 0.3)
    border-radius 4px
    font-size 0.9em
-    color black
    text-decoration none
-    background-color #F6F6F6
    margin-right 2px
  *:not(a.lineAnchor) + code
    margin-left 2px
@@ -128,14 +126,12 @@ marked()
    border-radius 5px
    overflow-x auto
    margin 0 0 15px
-    background-color #F6F6F6
    line-height 1.35em
    &>code
      margin 0
      padding 0
      border none
      border-radius 0
-      color black
  table
    width 100%
    margin 15px 0 25px
--- a/browser/styles/theme/dark.styl
+++ b/browser/styles/theme/dark.styl
@@ -389,8 +389,3 @@ body[data-theme="dark"]
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkPreview
-
-      pre,
-      code
-        color themeDarkText
-        background-color themeDarkPreview
--- a/lib/config.js
+++ b/lib/config.js
@@ -14,6 +14,7 @@ const defaultConfig = {
  'switch-preview': 'blur',
  'disable-direct-write': false,
  'theme-ui': 'light',
+  'theme-code': 'xcode',
  'theme-syntax': 'xcode'
 }
 const configFile = 'config.json'
--- a/lib/finder.html
+++ b/lib/finder.html
@@ -9,7 +9,7 @@

  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="../resources/katex.min.css">

--- a/lib/main.html
+++ b/lib/main.html
@@ -6,7 +6,7 @@

  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
  <link rel="shortcut icon" href="../resources/favicon.ico">
  <title>Boostnote</title>
  <link rel="stylesheet" href="../resources/katex.min.css">
--- a/package.json
+++ b/package.json
@@ -36,11 +36,11 @@
    "electron-gh-releases": "^2.0.2",
    "font-awesome": "^4.3.0",
    "fs-jetpack": "^0.7.0",
-    "highlight.js": "^8.9.1",
+    "highlight.js": "^9.3.0",
    "lodash": "^3.10.1",
-    "markdown-it": "^4.4.0",
+    "markdown-it": "^6.0.1",
    "markdown-it-checkbox": "^1.1.0",
-    "markdown-it-emoji": "^1.1.0",
+    "markdown-it-emoji": "^1.1.1",
    "markdown-it-math": "^3.0.2",
    "md5": "^2.0.0",
    "moment": "^2.10.3",