Skip to content

Commit 7ac9c9e

Browse files
author
kiran
committed
Added component for syntax highlighting
1 parent 1ccc8b9 commit 7ac9c9e

11 files changed

+365
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ node_modules
2626

2727
# Users Environment Variables
2828
.lock-wscript
29+
.sass-cache
30+
build

‎docs/_default.scss

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/*
2+
3+
Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
4+
5+
*/
6+
7+
.hljs {
8+
display: block;
9+
overflow-x: auto;
10+
padding: 0.5em;
11+
background: #f0f0f0;
12+
-webkit-text-size-adjust: none;
13+
}
14+
15+
.hljs,
16+
.hljs-subst,
17+
.hljs-tag .hljs-title,
18+
.nginx .hljs-title {
19+
color: black;
20+
}
21+
22+
.hljs-string,
23+
.hljs-title,
24+
.hljs-constant,
25+
.hljs-parent,
26+
.hljs-tag .hljs-value,
27+
.hljs-rules .hljs-value,
28+
.hljs-preprocessor,
29+
.hljs-pragma,
30+
.haml .hljs-symbol,
31+
.ruby .hljs-symbol,
32+
.ruby .hljs-symbol .hljs-string,
33+
.hljs-template_tag,
34+
.django .hljs-variable,
35+
.smalltalk .hljs-class,
36+
.hljs-addition,
37+
.hljs-flow,
38+
.hljs-stream,
39+
.bash .hljs-variable,
40+
.apache .hljs-tag,
41+
.apache .hljs-cbracket,
42+
.tex .hljs-command,
43+
.tex .hljs-special,
44+
.erlang_repl .hljs-function_or_atom,
45+
.asciidoc .hljs-header,
46+
.markdown .hljs-header,
47+
.coffeescript .hljs-attribute {
48+
color: #800;
49+
}
50+
51+
.smartquote,
52+
.hljs-comment,
53+
.hljs-annotation,
54+
.diff .hljs-header,
55+
.hljs-chunk,
56+
.asciidoc .hljs-blockquote,
57+
.markdown .hljs-blockquote {
58+
color: #888;
59+
}
60+
61+
.hljs-number,
62+
.hljs-date,
63+
.hljs-regexp,
64+
.hljs-literal,
65+
.hljs-hexcolor,
66+
.smalltalk .hljs-symbol,
67+
.smalltalk .hljs-char,
68+
.go .hljs-constant,
69+
.hljs-change,
70+
.lasso .hljs-variable,
71+
.makefile .hljs-variable,
72+
.asciidoc .hljs-bullet,
73+
.markdown .hljs-bullet,
74+
.asciidoc .hljs-link_url,
75+
.markdown .hljs-link_url {
76+
color: #080;
77+
}
78+
79+
.hljs-label,
80+
.hljs-javadoc,
81+
.ruby .hljs-string,
82+
.hljs-decorator,
83+
.hljs-filter .hljs-argument,
84+
.hljs-localvars,
85+
.hljs-array,
86+
.hljs-attr_selector,
87+
.hljs-important,
88+
.hljs-pseudo,
89+
.hljs-pi,
90+
.haml .hljs-bullet,
91+
.hljs-doctype,
92+
.hljs-deletion,
93+
.hljs-envvar,
94+
.hljs-shebang,
95+
.apache .hljs-sqbracket,
96+
.nginx .hljs-built_in,
97+
.tex .hljs-formula,
98+
.erlang_repl .hljs-reserved,
99+
.hljs-prompt,
100+
.asciidoc .hljs-link_label,
101+
.markdown .hljs-link_label,
102+
.vhdl .hljs-attribute,
103+
.clojure .hljs-attribute,
104+
.asciidoc .hljs-attribute,
105+
.lasso .hljs-attribute,
106+
.coffeescript .hljs-property,
107+
.hljs-phony {
108+
color: #88f;
109+
}
110+
111+
.hljs-keyword,
112+
.hljs-id,
113+
.hljs-title,
114+
.hljs-built_in,
115+
.css .hljs-tag,
116+
.hljs-javadoctag,
117+
.hljs-phpdoc,
118+
.hljs-dartdoc,
119+
.hljs-yardoctag,
120+
.smalltalk .hljs-class,
121+
.hljs-winutils,
122+
.bash .hljs-variable,
123+
.apache .hljs-tag,
124+
.hljs-type,
125+
.hljs-typename,
126+
.tex .hljs-command,
127+
.asciidoc .hljs-strong,
128+
.markdown .hljs-strong,
129+
.hljs-request,
130+
.hljs-status {
131+
font-weight: bold;
132+
}
133+
134+
.asciidoc .hljs-emphasis,
135+
.markdown .hljs-emphasis {
136+
font-style: italic;
137+
}
138+
139+
.nginx .hljs-built_in {
140+
font-weight: normal;
141+
}
142+
143+
.coffeescript .javascript,
144+
.javascript .xml,
145+
.lasso .markup,
146+
.tex .hljs-formula,
147+
.xml .javascript,
148+
.xml .vbscript,
149+
.xml .css,
150+
.xml .hljs-cdata {
151+
opacity: 0.5;
152+
}

‎docs/docs.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./default";

‎docs/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="/docs.css">
4+
</head>
5+
<body>
6+
<script type="text/javascript" src='/webpack-dev-server.js'></script>
7+
<script type="text/javascript" src='/docs.js'></script>
8+
</body>
9+
</html>

‎docs/index.jsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @jsx React.DOM
3+
*/
4+
5+
var React = require('react');
6+
var Highlight = require('../index');
7+
var htmlmd = require('./snippets/html.md');
8+
var htmltxt = require('raw!./snippets/html.txt');
9+
var multiline = require('multiline');
10+
11+
var str = multiline.stripIndent(function(){/*
12+
<!doctype html>
13+
<html>
14+
<body>
15+
<h1>❤ unicorns</h1>
16+
</body>
17+
</html>
18+
*/});
19+
20+
var inner = multiline.stripIndent(function(){/*
21+
<h1> Js </h1>
22+
<pre><code class='language-js'>var a, b = 1, c = 2;
23+
a = b + c;
24+
</pre></code>
25+
<h1> css </h1>
26+
<pre><code class='language-css'>body {
27+
background: red;
28+
}
29+
</pre></code>
30+
*/});
31+
32+
var Docs = React.createClass({
33+
render: function () {
34+
return (
35+
<div>
36+
<p>html</p>
37+
<Highlight>
38+
{htmltxt}
39+
</Highlight>
40+
<Highlight className='html'>
41+
{str}
42+
</Highlight>
43+
<Highlight innerHTML={true} >
44+
{inner}
45+
</Highlight>
46+
</div>
47+
);
48+
}
49+
});
50+
51+
React.render(<Docs />, document.body);

‎docs/snippets/html.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<div>
3+
<p> Highlighting this html snippet </p>
4+
</div>
5+
```

‎docs/snippets/html.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<p> Highlighting this html snippet </p>
3+
</div>

‎gulpfile.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var gulp = require('gulp');
2+
var sass = require('gulp-ruby-sass');
3+
var webpack = require('webpack');
4+
var WebpackDevServer = require('webpack-dev-server');
5+
6+
gulp.task('copy', function () {
7+
gulp.src('./docs/index.html')
8+
.pipe(gulp.dest('build'));
9+
});
10+
11+
gulp.task('sass', function () {
12+
return gulp.src(['./docs/**/*.scss'])
13+
.pipe(sass({ loadPath : ['bower_components', 'node_modules'],}))
14+
.on('error', function (err) { console.log(err.message); })
15+
.pipe(gulp.dest('./build'));
16+
});
17+
18+
gulp.task('server', ['copy', 'sass'], function (callback) {
19+
var myConfig = require('./webpack.config.js');
20+
21+
var webpackCompiler = webpack(myConfig, function(err, stats) {
22+
});
23+
24+
new WebpackDevServer(webpackCompiler, {
25+
contentBase: './build',
26+
hot: true,
27+
debug: true
28+
}).listen(8000, 'localhost', function (err, result) {
29+
30+
});
31+
});
32+
33+
gulp.task('watch', function () {
34+
gulp.watch(['./docs/**/*{scss,sass}'], ['sass']);
35+
gulp.watch(['./docs/index.html'], ['copy']);
36+
});

‎index.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var hljs = require('highlight.js');
2+
var React = require('react');
3+
4+
var Highlight = React.createClass({
5+
componentDidMount: function () {
6+
var domNode = this.getDOMNode();
7+
var nodes = domNode.querySelectorAll('pre code');
8+
if (nodes.length > 0) {
9+
for (var i = 0; i < nodes.length; i=i+1) {
10+
hljs.highlightBlock(nodes[i]);
11+
}
12+
}
13+
},
14+
render: function () {
15+
if (this.props.innerHTML) {
16+
return <div dangerouslySetInnerHTML={{__html: this.props.children}}></div>;
17+
} else {
18+
return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
19+
}
20+
}
21+
});
22+
23+
module.exports = Highlight;

‎package.json

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "react-highlight",
3+
"version": "0.1.0",
4+
"description": "React component for syntax highlighting",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "./node_modules/.bin/gulp server"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/akiran/react-highlight.git"
12+
},
13+
"keywords": [
14+
"react",
15+
"highlight.js",
16+
"syntax",
17+
"highlighting"
18+
],
19+
"author": "Kiran Abburi",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/akiran/react-highlight/issues"
23+
},
24+
"homepage": "https://github.com/akiran/react-highlight",
25+
"devDependencies": {
26+
"autoprefixer-core": "^4.0.2",
27+
"css-loader": "^0.9.0",
28+
"gulp": "^3.8.10",
29+
"gulp-ruby-sass": "^0.7.1",
30+
"highlight.js": "^8.4.x",
31+
"html-loader": "^0.2.3",
32+
"jsx-loader": "^0.12.2",
33+
"markdown-loader": "^0.1.2",
34+
"multiline": "^1.0.1",
35+
"raw-loader": "^0.5.1",
36+
"react": "*",
37+
"react-hot-loader": "^0.5.0",
38+
"sass-loader": "^0.3.1",
39+
"style-loader": "^0.8.2",
40+
"webpack": "^1.4.13",
41+
"webpack-dev-server": "^1.6.6"
42+
},
43+
"peerDependencies": {
44+
"highlight.js": "^8.4.x",
45+
"react": "*"
46+
}
47+
}

‎webpack.config.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var webpack = require('webpack');
2+
var path = require('path');
3+
var autoprefixer = require('autoprefixer-core');
4+
5+
module.exports = {
6+
devtool: '#inline-source-map',
7+
entry: {
8+
'docs.js': './docs/index'
9+
},
10+
output: {
11+
path: path.join(__dirname, 'build'),
12+
filename: '[name]',
13+
},
14+
module: {
15+
loaders: [
16+
{test: /\.(js|jsx)$/, loaders: ['react-hot', 'jsx']},
17+
{
18+
test: /\.scss$/,
19+
loader: "style!css!postcss!sass?outputStyle=expanded&includePaths[]=" +
20+
(path.resolve(__dirname, './node_modules')) + "&includePaths[]=" + (path.resolve(__dirname, './bower_components'))
21+
},
22+
{ test: /\.md$/, loader: "raw!markdown" },
23+
],
24+
},
25+
postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ],
26+
resolve : {
27+
alias: {
28+
29+
},
30+
extensions: ['', '.js', '.jsx']
31+
},
32+
plugins: [
33+
new webpack.HotModuleReplacementPlugin(),
34+
new webpack.IgnorePlugin(/vertx/)
35+
]
36+
};

0 commit comments

Comments
 (0)