Merge pull request #28 from xsnippet/syntax-highlight

Enable code syntax highlighting on "Snippet" page

Author: malor

package.json

@@ -46,6 +46,7 @@
     "eslint-plugin-react": "^7.4.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
+    "glob": "^7.1.2",
     "html-webpack-plugin": "^2.30.1",
     "style-loader": "^0.19.0",
     "stylus": "^0.54.5",

src/components/Snippet.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 
+import codemirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
@@ -35,6 +36,7 @@ class Snippet extends React.Component {
     if (!snippet) return <Spinner />;
 
     const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
+    const modeInfo = codemirror.findModeByName(snippet.get('syntax'));
 
     return (
       [
@@ -67,7 +69,7 @@ class Snippet extends React.Component {
           <div className="snippet-code">
             <CodeMirror
               value={`${snippet.get('content')}`}
-              options={{ lineNumbers: true, readOnly: 'nocursor' }}
+              options={{ lineNumbers: true, readOnly: 'nocursor', mode: modeInfo.mime }}
             />
             <div className="snippet-code-bottom-bar">
               <button className="snippet-button light">Raw</button>

webpack.config.js

@@ -3,6 +3,7 @@ const process = require('process');
 
 const webpack = require('webpack');
 const merge = require('webpack-merge');
+const glob = require('glob');
 
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -25,7 +26,14 @@ module.exports = () => {
     },
 
     entry: {
-      app: path.resolve(__dirname, 'src', 'index.jsx'),
+      app: [
+        path.resolve(__dirname, 'src', 'index.jsx'),
+
+        // Bundle CodeMirror's syntaxes along with main application. There are
+        // around 120 syntaxes and we, of course, do not want to import all of
+        // them from within the application, hence this hack.
+        ...glob.sync(path.resolve(__dirname, 'node_modules', 'codemirror', 'mode', '*', '*.js')),
+      ],
     },
 
     // Use [chunkhash] in order to invalidate browsers cache on new deployments.