diff --git a/docs/client.js b/docs/client.js
index ab68372e11..c48d2b1628 100644
--- a/docs/client.js
+++ b/docs/client.js
@@ -8,6 +8,7 @@ import './assets/favicon.ico';
 import './assets/thumbnail.png';
 import './assets/thumbnaildiv.png';
 
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/theme/solarized.css';
 import 'codemirror/lib/codemirror.css';
@@ -15,6 +16,7 @@ import './assets/CodeMirror.css';
 
 import React from 'react';
 import CodeMirror from 'codemirror';
+import 'codemirror/addon/runmode/runmode';
 import Router from 'react-router';
 import routes from './src/Routes';
 
diff --git a/docs/src/CodeExample.js b/docs/src/CodeExample.js
new file mode 100644
index 0000000000..a5f4c15709
--- /dev/null
+++ b/docs/src/CodeExample.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class CodeExample extends React.Component {
+  render() {
+    return (
+      <pre className="cm-s-solarized cm-s-light">
+        <code>
+          {this.props.codeText}
+        </code>
+      </pre>
+    );
+  }
+
+  componentDidMount() {
+    if (CodeMirror === undefined) {
+      return;
+    }
+
+    CodeMirror.runMode(
+      this.props.codeText,
+      this.props.mode,
+      React.findDOMNode(this).children[0]
+    );
+  }
+}
diff --git a/docs/src/CodeMirrorWrapper.client.js b/docs/src/CodeMirrorWrapper.client.js
deleted file mode 100644
index 7bca46333a..0000000000
--- a/docs/src/CodeMirrorWrapper.client.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import CodeMirror from 'codemirror';
-import 'codemirror/mode/javascript/javascript';
-
-import 'codemirror/theme/solarized.css';
-import 'codemirror/lib/codemirror.css';
-import './CodeMirrorWrapper.css';
-
-export default {
-  IS_NODE: false,
-  CodeMirror
-};
diff --git a/docs/src/CodeMirrorWrapper.js b/docs/src/CodeMirrorWrapper.js
deleted file mode 100644
index 1639c02d51..0000000000
--- a/docs/src/CodeMirrorWrapper.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  IS_NODE: true,
-  CodeMirror: {}
-};
diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
index 1d2852450d..f19af4f741 100644
--- a/docs/src/GettingStartedPage.js
+++ b/docs/src/GettingStartedPage.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
+import CodeExample from './CodeExample';
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
 import PageFooter from './PageFooter';
 
-const Page = React.createClass({
+export default class Page extends React.Component {
   render() {
     return (
         <div>
@@ -23,57 +24,75 @@ const Page = React.createClass({
 
                   <p>First add the Bootstrap CSS to your project; check <a href="http://getbootstrap.com/getting-started/" name="Bootstrap Docs">here</a> if you have not already done that. Note that:</p>
                   <ul>
-                    <li>Because many folks use custom bootstrap themes, we do not directly depend on Bootstrap. It is up to you to to determine how you get and link to the bootstrap css and fonts.</li>
-                    <li>React-Bootstrap doesn't depend on a very precise version of Bootstrap. Just pull the latest and, in case of trouble, take hints on the version used by this documentation page. Then, have bootstrap in your dependencies and ensure your build can read your less/sass/scss entry point.</li>
+                    <li>Because many folks use custom Bootstrap themes, we do not directly depend on Bootstrap. It is up to you to to determine how you get and link to the Bootstrap CSS and fonts.</li>
+                    <li>React-Bootstrap doesn't depend on a very precise version of Bootstrap. Just pull the latest and, in case of trouble, take hints on the version used by this documentation page. Then, have Bootstrap in your dependencies and ensure your build can read your Less/Sass/SCSS entry point.</li>
                   </ul>
                   <p>Then:</p>
 
                   <h3>CommonJS</h3>
                   <div className="highlight">
-                    <pre><code className="shell">{`
-  $ npm install react
-  $ npm install react-bootstrap
-                    `}</code></pre>
-                    <pre><code className="js">{`
-  var Alert = require('react-bootstrap/lib/Alert');
-  // or
-  var Alert = require('react-bootstrap').Alert;
-                    `}</code></pre>
+                    <CodeExample
+                      codeText={
+`$ npm install react
+$ npm install react-bootstrap`
+                      }
+                    />
+                    <br />
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`var Alert = require('react-bootstrap/lib/Alert');
+// or
+var Alert = require('react-bootstrap').Alert;`
+                      }
+                    />
                   </div>
 
                   <h3>AMD</h3>
                   <div className="highlight">
-                    <pre><code className="shell">{`
-  $ bower install react
-  $ bower install react-bootstrap
-                    `}</code></pre>
-                    <pre><code className="js">{`
-  define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
-  // or
-  define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });
-                    `}</code></pre>
+                    <CodeExample
+                      codeText={
+`$ bower install react
+$ bower install react-bootstrap`
+                      }
+                    />
+                    <br />
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
+// or
+define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });`
+                      }
+                    />
                   </div>
 
                   <h3>Browser globals</h3>
                   <p>The bower repo contains <code>react-bootstrap.js</code> and <code>react-bootstrap.min.js</code> with all components exported in the <code>window.ReactBootstrap</code> object.</p>
                   <div className="highlight">
-                    <pre><code className="html">{`
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
-  <script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
-  <script>
-    var Alert = ReactBootstrap.Alert;
-  </script>
-                    `}</code></pre>
+                    <CodeExample
+                      mode="htmlmixed"
+                      codeText={
+`<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
+<script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
+<script>
+  var Alert = ReactBootstrap.Alert;
+</script>`
+                      }
+                    />
                   </div>
 
                   <h3>Without JSX</h3>
                   <p>If you do not use JSX and just call components as functions, you must explicitly <a href="https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html#deprecated-auto-generated-factories">create a factory before calling it</a>. React-bootstrap provides factories for you in <code>lib/factories</code>:</p>
                   <div className="highlight">
-                    <pre><code className="js">{`
-  var Alert = require('react-bootstrap/lib/factories').Alert;
-  // or
-  var Alert = require('react-bootstrap/lib/factories/Alert');
-                    `}</code></pre>
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`var Alert = require('react-bootstrap/lib/factories').Alert;
+// or
+var Alert = require('react-bootstrap/lib/factories/Alert');`
+                      }
+                    />
                   </div>
                 </div>
                 <div className="bs-docs-section">
@@ -85,21 +104,25 @@ const Page = React.createClass({
                   <p><a href="http://jquery.com">jQuery</a> is currently required only for IE8 support for components which require reading element positions from the DOM: <code>Popover</code> and <code>Tooltip</code> when launched with <code>OverlayTrigger</code>. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:</p>
 
                   <div className="highlight">
-                    <pre><code className="html">{`
-  <!--[if lt IE 9]>
-    <script>
-      (function(){
-        var ef = function(){};
-        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
-      }());
-    </script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
-  <![endif]-->
-                    `}</code></pre>
+                    <CodeExample
+                      mode="htmlmixed"
+                      codeText={
+
+`<!--[if lt IE 9]>
+  <script>
+    (function(){
+      var ef = function(){};
+      window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
+    }());
+  </script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
+<![endif]-->`
+                      }
+                    />
                   </div>
                 </div>
               </div>
@@ -109,11 +132,9 @@ const Page = React.createClass({
           <PageFooter />
         </div>
       );
-  },
+  }
 
   shouldComponentUpdate() {
     return false;
   }
-});
-
-export default Page;
+}
diff --git a/docs/src/IntroductionPage.js b/docs/src/IntroductionPage.js
index 206c3eecea..dceb4a1e56 100644
--- a/docs/src/IntroductionPage.js
+++ b/docs/src/IntroductionPage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import CodeExample from './CodeExample';
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
 import PageFooter from './PageFooter';
@@ -32,9 +33,12 @@ const IntroductionPage = React.createClass({
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
-                  `}</code></pre>
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -43,11 +47,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-<button id="something-btn" type="button" class="btn btn-success btn-sm">
+                  <CodeExample
+                    mode="htmlmixed"
+                    codeText={
+`<button id="something-btn" type="button" class="btn btn-success btn-sm">
   Something
-</button>
-                  `}</code></pre>
+</button>`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -65,11 +72,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-<Button bsStyle="success" bsSize="small" onClick={someCallback}>
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`<Button bsStyle="success" bsSize="small" onClick={someCallback}>
   Something
-</Button>
-                  `}</code></pre>
+</Button>`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -101,14 +111,17 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var button = React.DOM.button({
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var button = React.DOM.button({
   className: "btn btn-lg btn-success",
   children: "Register"
 });
 
-React.render(button, mountNode);
-                  `}</code></pre>
+React.render(button, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -117,15 +130,18 @@ React.render(button, mountNode);
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var button = ReactBootstrap.Button({
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var button = ReactBootstrap.Button({
   bsStyle: "success",
   bsSize: "large",
   children: "Register"
 });
 
-React.render(button, mountNode);
-                  `}</code></pre>
+React.render(button, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -144,8 +160,10 @@ React.render(button, mountNode);
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var buttonGroupInstance = (
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var buttonGroupInstance = (
   <ButtonGroup>
     <DropdownButton bsStyle="success" title="Dropdown">
       <MenuItem key="1">Dropdown link</MenuItem>
@@ -156,8 +174,9 @@ var buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
-                  `}</code></pre>
+React.render(buttonGroupInstance, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 4a4983b048..6beada4323 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -46,6 +46,8 @@ import * as modWell from '../../src/Well';
 
 import babel from 'babel-core/browser';
 
+import CodeExample from './CodeExample';
+
 const classNames = modClassNames.default;
 /* eslint-disable */
 const React = modReact.default;
@@ -104,7 +106,7 @@ const IS_MOBILE = typeof navigator !== 'undefined' && (
     || navigator.userAgent.match(/Windows Phone/i)
   );
 
-const CodeMirrorEditor = React.createClass({
+class CodeMirrorEditor extends React.Component {
   componentDidMount() {
     if (IS_MOBILE || CodeMirror === undefined) {
       return;
@@ -120,19 +122,19 @@ const CodeMirrorEditor = React.createClass({
       readOnly: this.props.readOnly
     });
     this.editor.on('change', this.handleChange);
-  },
+  }
 
   componentDidUpdate() {
     if (this.props.readOnly) {
       this.editor.setValue(this.props.codeText);
     }
-  },
+  }
 
   handleChange() {
     if (!this.props.readOnly && this.props.onChange) {
       this.props.onChange(this.editor.getValue());
     }
-  },
+  }
 
   render() {
     // wrap in a div to fully contain CodeMirror
@@ -140,7 +142,12 @@ const CodeMirrorEditor = React.createClass({
 
     if (IS_MOBILE) {
       let preStyles = {overflow: 'scroll'};
-      editor = <pre style={preStyles}>{this.props.codeText}</pre>;
+      editor = (
+        <CodeExample
+          mode='javascript'
+          codeText={this.props.codeText}
+        />
+      );
     } else {
       editor = <textarea ref='editor' defaultValue={this.props.codeText} />;
     }
@@ -151,7 +158,7 @@ const CodeMirrorEditor = React.createClass({
       </div>
       );
   }
-});
+}
 
 const selfCleaningTimeout = {
   componentDidUpdate() {