Change code wrapper to be a span and not div

Author: Aviad Lichtenstadt

src/index.jsx

@@ -17,7 +17,7 @@ var Highlight = React.createClass({
   },
   highlightCode: function () {
     var domNode = ReactDOM.findDOMNode(this);
-    var nodes = domNode.querySelectorAll('pre code');
+    var nodes = domNode.querySelectorAll('span code');
     if (nodes.length > 0) {
       for (var i = 0; i < nodes.length; i=i+1) {
         hljs.highlightBlock(nodes[i]);
@@ -28,7 +28,7 @@ var Highlight = React.createClass({
     if (this.props.innerHTML) {
       return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>;
     } else {
-      return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      return <span><code className={this.props.className}>{this.props.children}</code></span>;
     }
   }
 });

src/optimized.jsx

@@ -25,7 +25,7 @@ var Highlight = React.createClass({
       hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
     });
     var domNode = ReactDOM.findDOMNode(this);
-    var nodes = domNode.querySelectorAll('pre code');
+    var nodes = domNode.querySelectorAll('span code');
     if (nodes.length > 0) {
       for (var i = 0; i < nodes.length; i=i+1) {
         hljs.highlightBlock(nodes[i]);
@@ -36,7 +36,7 @@ var Highlight = React.createClass({
     if (this.props.innerHTML) {
       return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>;
     } else {
-      return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      return <span><code className={this.props.className}>{this.props.children}</code></span>;
     }
   }
 });

test/highlight.test.jsx

@@ -15,14 +15,14 @@ describe('highlight', function() {
     var text = ReactDOMServer.renderToStaticMarkup(
       <Highlight>Some text</Highlight>
     );
-    expect(text).toBe('<pre><code>Some text</code></pre>');
+    expect(text).toBe('<span><code>Some text</code></span>');
   });
 
   it('should assign className prop', function() {
     var text = ReactDOMServer.renderToStaticMarkup(
       <Highlight className='html'>Some text</Highlight>
     );
-    expect(text).toBe('<pre><code class="html">Some text</code></pre>');
+    expect(text).toBe('<span><code class="html">Some text</code></span>');
   });
 
   it('should accept innerHTML prop', function() {