Markdown内のコードにSyntax highlightenをいれる

Author: Rokt33r

browser/finder/index.html

@@ -9,6 +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="shortcut icon" href="favicon.ico">
 
   <style>

browser/main/index.html

@@ -6,6 +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="shortcut icon" href="favicon.ico">
 
   <style>

browser/styles/mixins/marked.styl

@@ -62,7 +62,7 @@ marked()
       display list-item
       line-height 1.8em
   code
-    font-family monospace
+    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
     padding 2px 4px
     border solid 1px borderColor
     border-radius 4px

lib/markdown.js

@@ -1,8 +1,22 @@
 import markdownit from 'markdown-it'
+import hljs from 'highlight.js'
 
 var md = markdownit({
   typographer: true,
-  linkify: true
+  linkify: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str).value;
+      } catch (__) {}
+    }
+
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (__) {}
+
+    return ''; // use external default escaping
+  }
 })
 
 export default function markdown (content) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.4.1-beta.3",
+  "version": "0.4.1-beta.4",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {
@@ -40,6 +40,7 @@
     "devicon": "^2.0.0",
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
+    "highlight.js": "^8.9.1",
     "lodash": "^3.10.1",
     "markdown-it": "^4.3.1",
     "md5": "^2.0.0",
@@ -59,10 +60,9 @@
     "react-dom": "^0.14.0",
     "react-redux": "^4.0.0",
     "react-router": "^1.0.0-rc1",
-    "react-select": "^0.8.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
+    "redbox-react": "^1.2.0",
     "redux": "^3.0.2",
     "standard": "^5.3.1",
     "style-loader": "^0.12.4",

webpack.config.js

@@ -69,7 +69,7 @@ var config = {
     'lodash',
     'markdown-it',
     'moment',
-    'node-notifier'
+    'highlight.js'
   ]
 }
 

webpack.config.production.js

@@ -45,7 +45,7 @@ module.exports = {
     'lodash',
     'markdown-it',
     'moment',
-    'node-notifier'
+    'highlight.js'
   ],
   resolve: {
     extensions: ['', '.js', '.jsx', 'styl']