Add the option to pass required element in which code should render

Author: kiran

.eslintrc

@@ -0,0 +1,24 @@
+{
+  "rules": {
+    "no-extra-parens": 0,
+    "react/jsx-uses-vars": 1,
+    "global-strict": 1,
+    "quotes": [2, "single"],
+    "no-underscore-dangle": 0,
+    "space-infix-ops": 0,
+    "no-alert": 0
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+  },
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true,
+    "jasmine": true
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+      "react"
+  ]
+}

karma.conf.js

@@ -14,9 +14,9 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-        'node_modules/es5-shim/es5-shim.js',
-        'node_modules/react/dist/react-with-addons.js',
-        'test/**/*.jsx',
+      'node_modules/es5-shim/es5-shim.js',
+      'node_modules/react/dist/react-with-addons.js',
+      'test/**/*.js',
     ],
 
 
@@ -27,17 +27,20 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-        'test/**/*.jsx': ['webpack']
+        'test/**/*.js': ['webpack'],
     },
 
     webpack: {
         module: {
             loaders: [
-                {test: /\.(js|jsx)$/, loaders: ['babel']}
+                {test: /\.(js|jsx)$/, loaders: ['babel']},
             ]
         },
         externals: {
             react: 'React'
+        },
+        resolve: {
+          root: __dirname
         }
     },
     webpackServer: {

package.json

@@ -30,27 +30,30 @@
     "autoprefixer-core": "^4.0.2",
     "babel": "^5.6.14",
     "babel-core": "^5.6.18",
+    "babel-eslint": "^6.0.2",
     "babel-loader": "^5.3.1",
     "es5-shim": "^4.1.7",
+    "eslint": "^2.8.0",
+    "eslint-plugin-react": "^4.3.0",
     "gulp": "^3.8.10",
     "gulp-ruby-sass": "^0.7.1",
     "highlight.js": "^8.6.0",
     "html-loader": "^0.2.3",
     "jasmine-core": "^2.3.4",
     "jsx-loader": "^0.12.2",
     "karma": "^0.13.3",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1",
     "karma-webpack": "^1.7.0",
     "markdown-loader": "^0.1.2",
     "multiline": "^1.0.1",
     "node-libs-browser": "^0.5.2",
     "phantomjs": "^1.9.17",
     "raw-loader": "^0.5.1",
     "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.3",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.6.6",
-    "karma-jasmine": "^0.3.6",
-    "karma-phantomjs-launcher": "^0.2.1",
-    "react-addons-test-utils": "^0.14.3"
+    "webpack-dev-server": "^1.6.6"
   },
   "dependencies": {
     "highlight.js": "^8.4.x",

src/index.jsx renamed to src/index.js

@@ -6,7 +6,8 @@ var Highlight = React.createClass({
   getDefaultProps: function () {
     return {
       innerHTML: false,
-      className: null
+      className: null,
+      element: null,
     };
   },
   componentDidMount: function () {
@@ -25,10 +26,24 @@ var Highlight = React.createClass({
     }
   },
   render: function () {
+    var Element = this.props.element ? React.DOM[this.props.element]: null;
+
     if (this.props.innerHTML) {
-      return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>;
+      if (!Element) {
+        Element = React.DOM.div
+      }
+      return Element({
+        dangerouslySetInnerHTML: {__html: this.props.children},
+        className: this.props.className || null
+      }, null);
     } else {
-      return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      if (Element) {
+        return Element({
+          className:this.props.className
+        }, this.props.children);
+      } else {
+        return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      }
     }
   }
 });

src/optimized.jsx renamed to src/optimized.js

@@ -33,10 +33,24 @@ var Highlight = React.createClass({
     }
   },
   render: function () {
+    var Element = this.props.element ? React.DOM[this.props.element]: null;
+
     if (this.props.innerHTML) {
-      return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>;
+      if (!Element) {
+        Element = React.DOM.div
+      }
+      return Element({
+        dangerouslySetInnerHTML: {__html: this.props.children},
+        className: this.props.className || null
+      }, null);
     } else {
-      return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      if (Element) {
+        return Element({
+          className:this.props.className
+        }, this.props.children);
+      } else {
+        return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
+      }
     }
   }
 });

test/highlight.test.jsx renamed to test/highlight.test.js

@@ -1,4 +1,4 @@
-var Highlight = require('../');
+var Highlight = require('../src');
 var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
 var ReactDOMServer = require('react-dom/server');
@@ -25,14 +25,27 @@ describe('highlight', function() {
     expect(text).toBe('<pre><code class="html">Some text</code></pre>');
   });
 
+  it('should render children in span', function() {
+    var text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight element='span'>Some text</Highlight>
+    );
+    expect(text).toBe('<span>Some text</span>');
+  });
+
+  it('should render innerHTML in span', function() {
+    var text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight innerHTML={true} element='span'>Some text</Highlight>
+    );
+    expect(text).toBe('<span>Some text</span>');
+  });
+
   it('should accept innerHTML prop', function() {
     var text = TestUtils.renderIntoDocument(
       <Highlight innerHTML={true}>{"<div>Sometext</div>"}</Highlight>
     );
     expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext');
   });
 
-});
-
 
 
+});