Skip to content

Commit 1cea368

Browse files
kittenkitten
authored
Merge pull request #389 from FormidableLabs/feature/bundled-prism
Bundle Prism and use react-live's Editor instead
2 parents eaefcb5 + c190c00 commit 1cea368

File tree

12 files changed

+207
-138
lines changed

12 files changed

+207
-138
lines changed

‎README.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,11 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
123123
<title>Spectacle</title>
124124
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
125125
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
126-
<link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
127126
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
128127
<link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
129128
</head>
130129
<body>
131130
<div id="root"></div>
132-
<script src="https://unpkg.com/prismjs@1/prism.js"></script>
133-
<script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
134131
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
135132
<script src="https://unpkg.com/react@15/dist/react.js"></script>
136133
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
@@ -487,8 +484,6 @@ This tag displays a styled, highlighted code preview. I prefer putting my code s
487484
|lang|PropTypes.string| Prism compatible language name. i.e: 'javascript' |
488485
|source| PropTypes.string| String of code to be shown |
489486

490-
You can change your syntax highlighting theme by swapping the prism.js CSS file in `index.html`
491-
492487
<a name="code-base"></a>
493488
#### Code (Base)
494489

‎docs/tag-api.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ This tag displays a styled, highlighted code preview. I prefer putting my code s
112112
|lang|PropTypes.string| Prism compatible language name. i.e: 'javascript' |
113113
|source| PropTypes.string| String of code to be shown |
114114

115-
You can change your syntax highlighting theme by swapping the prism.js CSS file in `index.html`. Prism.js supports `Markup`, `CSS`, `C-like`and `Javascript` languages out of the box. To add more [supported languages](http://prismjs.com/#languages-list), you have to load the respective language's prism.js plugin in your index.html.
115+
Prism.js supports `Markup`, `CSS`, `C-like`and `Javascript` languages out of the box. To add more [supported languages](http://prismjs.com/#languages-list), you have to import the respective language's prism.js component/plugin from `prismjs/components/prism-LANG`, where `LANG` is the language/component you'd like to add.
116116

117117
<a name="code-base"></a>
118118
### Code (Base)

‎index.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,9 @@
66
<title>Spectacle</title>
77
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
88
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
9-
<link href="https://unpkg.com/[email protected]/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
109
</head>
1110
<body>
1211
<div id="root"></div>
13-
<script src="https://unpkg.com/[email protected]/prism.js"></script>
14-
<script src="https://unpkg.com/[email protected]/components/prism-jsx.min.js"></script>
1512
<script src="./dist/bundle.js"></script>
1613
</body>
1714
</html>

‎one-page.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,17 @@
66
<title>Spectacle</title>
77
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
88
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
9-
<link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
109
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
11-
<link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
10+
<link href="https://unpkg.com/spectacle@^4/lib/themes/default/index.css" rel="stylesheet" type="text/css">
1211
</head>
1312
<body>
1413
<div id="root"></div>
15-
<script src="https://unpkg.com/prismjs@1/prism.js"></script>
16-
<script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
1714
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
1815
<script src="https://unpkg.com/react@15/dist/react.js"></script>
1916
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
2017
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
21-
<script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
22-
<script src="https://unpkg.com/spectacle/lib/one-page.js"></script>
18+
<script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
19+
<script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
2320
<script type="text/spectacle">
2421
() => {
2522
// --------------------------------------------------------------------

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828
"lodash": "^4.17.4",
2929
"marksy": "^0.4.2",
3030
"normalize.css": "^7.0.0",
31+
"prismjs": "^1.6.0",
3132
"react-emotion": "^8.0.8",
32-
"react-live": "^1.7.1",
33+
"react-live": "^1.8.0-1",
3334
"react-redux": "^5.0.5",
3435
"react-transition-group": "^1.1.3",
3536
"react-typography": "^0.16.5",

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
exports[`<CodePane /> should render correctly. 1`] = `
44
<CodePane
5+
className=""
6+
contentEditable={false}
57
lang="jsx"
68
source="
79
const myButton = (
@@ -13,57 +15,80 @@ exports[`<CodePane /> should render correctly. 1`] = `
1315
</CustomButton>
1416
);
1517
"
18+
theme="dark"
1619
>
17-
<Styled(pre)
18-
className={undefined}
20+
<Styled(div)
21+
className="react-live react-live-dark "
1922
styles={
2023
Array [
21-
Object {},
24+
undefined,
2225
Object {},
2326
undefined,
2427
]
2528
}
2629
>
27-
<pre
28-
className="css-0"
30+
<div
31+
className="react-live react-live-dark css-0"
2932
>
30-
<Styled(code)
31-
className="language-jsx"
32-
dangerouslySetInnerHTML={
33-
Object {
34-
"__html": "
35-
const myButton = (
36-
&lt;CustomButton
37-
style={{ background: '#f00' }}
38-
onClick={this.action}
39-
&gt;
40-
Click Me
41-
&lt;/CustomButton&gt;
42-
);
43-
",
44-
}
45-
}
33+
<Styled(Editor)
34+
code="
35+
const myButton = (
36+
<CustomButton
37+
style={{ background: '#f00' }}
38+
onClick={this.action}
39+
>
40+
Click Me
41+
</CustomButton>
42+
);
43+
"
44+
contentEditable={false}
45+
language="jsx"
4646
styles={undefined}
4747
>
48-
<code
49-
className="language-jsx css-0"
50-
dangerouslySetInnerHTML={
51-
Object {
52-
"__html": "
53-
const myButton = (
54-
&lt;CustomButton
55-
style={{ background: '#f00' }}
56-
onClick={this.action}
57-
&gt;
58-
Click Me
59-
&lt;/CustomButton&gt;
60-
);
61-
",
48+
<Editor
49+
className="css-0"
50+
code="
51+
const myButton = (
52+
<CustomButton
53+
style={{ background: '#f00' }}
54+
onClick={this.action}
55+
>
56+
Click Me
57+
</CustomButton>
58+
);
59+
"
60+
contentEditable={false}
61+
language="jsx"
62+
styles={undefined}
63+
>
64+
<pre
65+
className="prism-code css-0"
66+
contentEditable={false}
67+
dangerouslySetInnerHTML={
68+
Object {
69+
"__html": "
70+
<span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
71+
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
72+
<span class=\\"token attr-name\\">style</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> background<span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">'#f00'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>
73+
<span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>action<span class=\\"token punctuation\\">}</span></span>
74+
<span class=\\"token punctuation\\">></span></span>
75+
Click Me
76+
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
77+
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
78+
",
79+
}
6280
}
63-
}
64-
/>
65-
</Styled(code)>
66-
</pre>
67-
</Styled(pre)>
81+
language="jsx"
82+
onClick={undefined}
83+
onKeyDown={undefined}
84+
onKeyUp={undefined}
85+
spellCheck="false"
86+
style={undefined}
87+
styles={undefined}
88+
/>
89+
</Editor>
90+
</Styled(Editor)>
91+
</div>
92+
</Styled(div)>
6893
</CodePane>
6994
`;

0 commit comments

Comments
 (0)