Skip to content

Commit 0adfef1

Browse files
mxstbrmxstbr
committed
Merge pull request draft-js-plugins#37 from nikgraf/code-highlighting
WIP code highlighting
2 parents 05182b5 + bb66a76 commit 0adfef1

File tree

6 files changed

+188
-1
lines changed

6 files changed

+188
-1
lines changed

‎site/components/CodeHighlight/index.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
default as React,
3+
Component,
4+
PropTypes,
5+
} from "react";
6+
7+
import {
8+
default as ReactComponentWithPureRenderMixin,
9+
} from "react-addons-pure-render-mixin";
10+
11+
export default class Code extends Component {
12+
static propTypes = {
13+
className: PropTypes.string,
14+
children: PropTypes.any,
15+
};
16+
17+
componentDidMount() {
18+
this._highlight();
19+
}
20+
21+
shouldComponentUpdate = ReactComponentWithPureRenderMixin.shouldComponentUpdate;
22+
23+
componentDidUpdate() {
24+
this._highlight();
25+
}
26+
27+
_highlight() {
28+
Prism.highlightElement(this.refs.code);
29+
}
30+
31+
render() {
32+
const className = (this.props.language ? 'language-' + this.props.language : '');
33+
return (
34+
<code
35+
ref="code"
36+
className={className}
37+
>
38+
{this.props.code}
39+
</code>
40+
);
41+
}
42+
}

‎site/components/StatePreview/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Component } from 'react';
22
import styles from './styles';
33

4+
import Code from "../CodeHighlight";
5+
46
export default class StatePreview extends Component {
57

68
render() {
@@ -17,7 +19,10 @@ export default class StatePreview extends Component {
1719
return (
1820
<div style={ styles.root }>
1921
<pre style={ codeStyle }>
20-
{ JSON.stringify(this.props.editorState.getCurrentContent().toJS(), null, 2) }
22+
<Code
23+
language="javascript"
24+
code={ JSON.stringify(this.props.editorState.getCurrentContent().toJS(), null, 2) }
25+
/>
2126
</pre>
2227
</div>
2328
);

‎site/css/prism.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* prism.js default theme for JavaScript, CSS and HTML
3+
* Based on dabblet (http://dabblet.com)
4+
* @author Lea Verou
5+
*/
6+
7+
code[class*="language-"],
8+
pre[class*="language-"] {
9+
color: black;
10+
text-shadow: 0 1px white;
11+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
12+
direction: ltr;
13+
text-align: left;
14+
white-space: pre;
15+
word-spacing: normal;
16+
word-break: normal;
17+
line-height: 1.5;
18+
19+
-moz-tab-size: 4;
20+
-o-tab-size: 4;
21+
tab-size: 4;
22+
23+
-webkit-hyphens: none;
24+
-moz-hyphens: none;
25+
-ms-hyphens: none;
26+
hyphens: none;
27+
}
28+
29+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
30+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
31+
text-shadow: none;
32+
background: #b3d4fc;
33+
}
34+
35+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
36+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
37+
text-shadow: none;
38+
background: #b3d4fc;
39+
}
40+
41+
@media print {
42+
code[class*="language-"],
43+
pre[class*="language-"] {
44+
text-shadow: none;
45+
}
46+
}
47+
48+
/* Code blocks */
49+
pre[class*="language-"] {
50+
padding: 1em;
51+
margin: .5em 0;
52+
overflow: auto;
53+
}
54+
55+
:not(pre) > code[class*="language-"],
56+
pre[class*="language-"] {
57+
background: #f5f2f0;
58+
}
59+
60+
/* Inline code */
61+
:not(pre) > code[class*="language-"] {
62+
padding: .1em;
63+
border-radius: .3em;
64+
}
65+
66+
.token.comment,
67+
.token.prolog,
68+
.token.doctype,
69+
.token.cdata {
70+
color: slategray;
71+
}
72+
73+
.token.punctuation {
74+
color: #999;
75+
}
76+
77+
.namespace {
78+
opacity: .7;
79+
}
80+
81+
.token.property,
82+
.token.tag,
83+
.token.boolean,
84+
.token.number,
85+
.token.constant,
86+
.token.symbol,
87+
.token.deleted {
88+
color: #905;
89+
}
90+
91+
.token.selector,
92+
.token.attr-name,
93+
.token.string,
94+
.token.char,
95+
.token.builtin,
96+
.token.inserted {
97+
color: #690;
98+
}
99+
100+
.token.operator,
101+
.token.entity,
102+
.token.url,
103+
.language-css .token.string,
104+
.style .token.string {
105+
color: #a67f59;
106+
background: hsla(0, 0%, 100%, .5);
107+
}
108+
109+
.token.atrule,
110+
.token.attr-value,
111+
.token.keyword {
112+
color: #07a;
113+
}
114+
115+
.token.function {
116+
color: #DD4A68;
117+
}
118+
119+
.token.regex,
120+
.token.important,
121+
.token.variable {
122+
color: #e90;
123+
}
124+
125+
.token.important {
126+
font-weight: bold;
127+
}
128+
129+
.token.entity {
130+
cursor: help;
131+
}

‎site/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" href="css/normalize.css">
99
<link rel="stylesheet" href="css/style.css">
1010
<link rel="stylesheet" href="css/Draft.css">
11+
<link rel="stylesheet" href="css/prism.css">
1112
<link rel="stylesheet" href="bundle.css">
1213
</head>
1314
<body>
@@ -44,6 +45,7 @@ <h2 class="available-plugins">Available Plugins</h2>
4445
</span>
4546
on Planet Earth :)
4647
</footer>
48+
<script src="node_modules/prismjs/prism.js"></script>
4749
<script src="static/bundle.js"></script>
4850
</body>
4951
</html>

‎site/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"url": "http://github.com/nikgraf/unicorn-editor.git"
1414
},
1515
"dependencies": {
16+
"prismjs": "1.4.1",
1617
"react": "=0.14.7",
18+
"react-addons-pure-render-mixin": "0.14.7",
1719
"react-dom": "^=0.14.7"
1820
},
1921
"devDependencies": {

‎site/server.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ app.use(require('webpack-dev-middleware')(compiler, {
1919
app.use(require('webpack-hot-middleware')(compiler));
2020

2121
app.get('*', (req, res) => {
22+
// Get prism.js
23+
if (req.originalUrl === '/node_modules/prismjs/prism.js') {
24+
res.sendFile(path.join(__dirname, 'node_modules/prismjs/prism.js'));
25+
return;
26+
}
2227
res.sendFile(path.join(__dirname, 'index.html'));
2328
});
2429

0 commit comments

Comments
 (0)