react-highlight - npm Package Compare versions

react-highlight

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Comparing version 0.1.0 to 0.2.0

docs/docs.jsx

docs/routes.jsx

docs/index.jsx

		@@ -1,60 +0,7 @@
		/**
		* @jsx React.DOM
		*/

		var React = require('react');
		var Highlight = require('../index');
		var htmlmd = require('./snippets/html.md');
		var htmltxt = require('raw!./snippets/html.txt');
		var multiline = require('multiline');
		var Router = require('react-router');
		var routes = require('./routes');

		var str = multiline.stripIndent(function(){/*
		<!doctype html>
		<html>
		<body>
		<h1>❤ unicorns</h1>
		</body>
		</html>
		*/});

		var inner = multiline.stripIndent(function(){/*
		<h1> Js </h1>
		<pre><code class='language-js'>var a, b = 1, c = 2;
		a = b + c;
		</pre></code>
		<h1> css </h1>
		<pre><code class='language-css'>body {
		background: red;
		}
		</pre></code>
		*/});

		var multistr = "";
		multistr += "<div> some text</div>\n";
		multistr += "<div> some text</div>\n";


		var Docs = React.createClass({
		render: function () {
		return (
		<div>
		<p>html</p>
		<Highlight>
		{htmltxt}
		</Highlight>
		<Highlight className='html'>
		{str}
		</Highlight>
		<Highlight innerHTML={true} >
		{inner}
		</Highlight>
		<Highlight className='html'>
		{multistr}
		</Highlight>

		</div>
		);
		}
		});

		React.render(<Docs />, document.body);
		Router.run(routes, function (Handler) {
		React.render(<Handler />, document.body);
		});

index.jsx

		@@ -5,3 +5,15 @@ var hljs = require('highlight.js');
		var Highlight = React.createClass({
		getDefaultProps: function () {
		return {
		innerHTML: false,
		className: ""
		};
		},
		componentDidMount: function () {
		this.highlightCode();
		},
		componentDidUpdate: function () {
		this.highlightCode();
		},
		highlightCode: function () {
		var domNode = this.getDOMNode();
		@@ -8,0 +20,0 @@ var nodes = domNode.querySelectorAll('pre code');

package.json

		{
		"name": "react-highlight",
		"version": "0.1.0",
		"version": "0.2.0",
		"description": "React component for syntax highlighting",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -23,3 +23,2 @@ # react-highlight
		Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.
		Highlight component wraps the code snippet with pre and code tags and adds necessary markup for syntax highlighting.

		@@ -33,6 +32,6 @@ ```html
		#### Syntax highlighting of mutiple code snippets
		Set innerHTML=true to highlight multiple code snippets at a time.
		Set `innerHTML=true` to highlight multiple code snippets at a time.
		This is especially usefull if html with multiple code snippets is generated from preprocesser tools like markdown.

		Warning: If innerHTML is set to true, make sure the html generated for syntax highlighting is from trusted source.
		Warning: If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.

		@@ -39,0 +38,0 @@ ```html

Improved metrics