Skip to content

Commit 83da763

Browse files
urishurish
authored
fix react-syntax-highlighter#285: incorrect syntax highlighting for mutli-line comments (react-syntax-highlighter#289)
1 parent ae79f5a commit 83da763

File tree

4 files changed

+319
-23
lines changed

4 files changed

+319
-23
lines changed

‎__tests__/__snapshots__/light-async.js.snap

Lines changed: 120 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -736,26 +736,76 @@ exports[`SyntaxHighlighter renders fortran highlighted text 1`] = `
736736
'S FORMULA WE CALCULATE THE
737737
738738
</span>
739-
C AREA OF THE TRIANGLE
739+
<span
740+
className="hljs-string"
741+
style={Object {}}
742+
>
743+
C AREA OF THE TRIANGLE
740744
741-
799 S = FLOATF (IA + IB + IC) / 2.0
745+
</span>
746+
<span
747+
className="hljs-string"
748+
style={Object {}}
749+
>
750+
799 S = FLOATF (IA + IB + IC) / 2.0
742751
743-
AREA = SQRTF( S * (S - FLOATF(IA)) * (S - FLOATF(IB)) *
752+
</span>
753+
<span
754+
className="hljs-string"
755+
style={Object {}}
756+
>
757+
AREA = SQRTF( S * (S - FLOATF(IA)) * (S - FLOATF(IB)) *
744758
745-
+ (S - FLOATF(IC)))
759+
</span>
760+
<span
761+
className="hljs-string"
762+
style={Object {}}
763+
>
764+
+ (S - FLOATF(IC)))
746765
747-
WRITE OUTPUT TAPE 6, 601, IA, IB, IC, AREA
766+
</span>
767+
<span
768+
className="hljs-string"
769+
style={Object {}}
770+
>
771+
WRITE OUTPUT TAPE 6, 601, IA, IB, IC, AREA
748772
749-
601 FORMAT (4H A= ,I5,5H B= ,I5,5H C= ,I5,8H AREA= ,F10.2,
773+
</span>
774+
<span
775+
className="hljs-string"
776+
style={Object {}}
777+
>
778+
601 FORMAT (4H A= ,I5,5H B= ,I5,5H C= ,I5,8H AREA= ,F10.2,
750779
751-
+ 13H SQUARE UNITS)
780+
</span>
781+
<span
782+
className="hljs-string"
783+
style={Object {}}
784+
>
785+
+ 13H SQUARE UNITS)
752786
753-
STOP
787+
</span>
788+
<span
789+
className="hljs-string"
790+
style={Object {}}
791+
>
792+
STOP
754793
755-
END
794+
</span>
795+
<span
796+
className="hljs-string"
797+
style={Object {}}
798+
>
799+
END
756800
757-
801+
</span>
802+
<span
803+
className="hljs-string"
804+
style={Object {}}
805+
>
806+
758807
808+
</span>
759809
</code>
760810
</pre>
761811
`;
@@ -1533,26 +1583,76 @@ exports[`SyntaxHighlighter renders text while language loads 1`] = `
15331583
'S FORMULA WE CALCULATE THE
15341584
15351585
</span>
1536-
C AREA OF THE TRIANGLE
1586+
<span
1587+
className="hljs-string"
1588+
style={Object {}}
1589+
>
1590+
C AREA OF THE TRIANGLE
15371591
1538-
799 S = FLOATF (IA + IB + IC) / 2.0
1592+
</span>
1593+
<span
1594+
className="hljs-string"
1595+
style={Object {}}
1596+
>
1597+
799 S = FLOATF (IA + IB + IC) / 2.0
15391598
1540-
AREA = SQRTF( S * (S - FLOATF(IA)) * (S - FLOATF(IB)) *
1599+
</span>
1600+
<span
1601+
className="hljs-string"
1602+
style={Object {}}
1603+
>
1604+
AREA = SQRTF( S * (S - FLOATF(IA)) * (S - FLOATF(IB)) *
15411605
1542-
+ (S - FLOATF(IC)))
1606+
</span>
1607+
<span
1608+
className="hljs-string"
1609+
style={Object {}}
1610+
>
1611+
+ (S - FLOATF(IC)))
15431612
1544-
WRITE OUTPUT TAPE 6, 601, IA, IB, IC, AREA
1613+
</span>
1614+
<span
1615+
className="hljs-string"
1616+
style={Object {}}
1617+
>
1618+
WRITE OUTPUT TAPE 6, 601, IA, IB, IC, AREA
15451619
1546-
601 FORMAT (4H A= ,I5,5H B= ,I5,5H C= ,I5,8H AREA= ,F10.2,
1620+
</span>
1621+
<span
1622+
className="hljs-string"
1623+
style={Object {}}
1624+
>
1625+
601 FORMAT (4H A= ,I5,5H B= ,I5,5H C= ,I5,8H AREA= ,F10.2,
15471626
1548-
+ 13H SQUARE UNITS)
1627+
</span>
1628+
<span
1629+
className="hljs-string"
1630+
style={Object {}}
1631+
>
1632+
+ 13H SQUARE UNITS)
15491633
1550-
STOP
1634+
</span>
1635+
<span
1636+
className="hljs-string"
1637+
style={Object {}}
1638+
>
1639+
STOP
15511640
1552-
END
1641+
</span>
1642+
<span
1643+
className="hljs-string"
1644+
style={Object {}}
1645+
>
1646+
END
15531647
1554-
1648+
</span>
1649+
<span
1650+
className="hljs-string"
1651+
style={Object {}}
1652+
>
1653+
15551654
1655+
</span>
15561656
</code>
15571657
</pre>
15581658
`;

‎__tests__/__snapshots__/multiline-comments.js.snap

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Syntaxhighliter correctly renders multi-line comments in arduino language 1`] = `
4+
<pre
5+
style={
6+
Object {
7+
"background": "#F0F0F0",
8+
"color": "#444",
9+
"display": "block",
10+
"overflowX": "auto",
11+
"padding": "0.5em",
12+
}
13+
}
14+
>
15+
<code>
16+
<span
17+
style={Object {}}
18+
>
19+
20+
21+
</span>
22+
<span
23+
style={Object {}}
24+
>
25+
26+
</span>
27+
<span
28+
style={
29+
Object {
30+
"color": "#888888",
31+
}
32+
}
33+
>
34+
/* This is a multi-
35+
36+
</span>
37+
<span
38+
style={
39+
Object {
40+
"color": "#888888",
41+
}
42+
}
43+
>
44+
line comment.
45+
46+
</span>
47+
<span
48+
style={
49+
Object {
50+
"color": "#888888",
51+
}
52+
}
53+
>
54+
*/
55+
</span>
56+
<span
57+
style={Object {}}
58+
>
59+
60+
61+
</span>
62+
63+
64+
<span
65+
style={Object {}}
66+
>
67+
68+
</span>
69+
<span
70+
className="hljs-function"
71+
style={
72+
Object {
73+
"fontWeight": "bold",
74+
}
75+
}
76+
>
77+
void
78+
</span>
79+
<span
80+
className="hljs-function"
81+
style={Object {}}
82+
>
83+
84+
</span>
85+
<span
86+
className="hljs-function"
87+
style={
88+
Object {
89+
"color": "#880000",
90+
"fontWeight": "bold",
91+
}
92+
}
93+
>
94+
setup
95+
</span>
96+
<span
97+
className="hljs-function hljs-params"
98+
style={Object {}}
99+
>
100+
()
101+
</span>
102+
<span
103+
className="hljs-function"
104+
style={Object {}}
105+
>
106+
107+
</span>
108+
<span
109+
style={Object {}}
110+
>
111+
{
112+
113+
</span>
114+
}
115+
116+
117+
118+
<span
119+
style={Object {}}
120+
>
121+
122+
</span>
123+
<span
124+
className="hljs-function"
125+
style={
126+
Object {
127+
"fontWeight": "bold",
128+
}
129+
}
130+
>
131+
void
132+
</span>
133+
<span
134+
className="hljs-function"
135+
style={Object {}}
136+
>
137+
138+
</span>
139+
<span
140+
className="hljs-function"
141+
style={
142+
Object {
143+
"color": "#880000",
144+
"fontWeight": "bold",
145+
}
146+
}
147+
>
148+
loop
149+
</span>
150+
<span
151+
className="hljs-function hljs-params"
152+
style={Object {}}
153+
>
154+
()
155+
</span>
156+
<span
157+
className="hljs-function"
158+
style={Object {}}
159+
>
160+
161+
</span>
162+
<span
163+
style={Object {}}
164+
>
165+
{
166+
167+
</span>
168+
}
169+
170+
171+
172+
</code>
173+
</pre>
174+
`;

‎__tests__/multiline-comments.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import SyntaxHighlighter from '../src';
4+
5+
const code = `
6+
/* This is a multi-
7+
line comment.
8+
*/
9+
10+
void setup() {
11+
}
12+
13+
void loop() {
14+
}
15+
`;
16+
17+
test('Syntaxhighliter correctly renders multi-line comments in arduino language', () => {
18+
const tree = renderer
19+
.create(<SyntaxHighlighter language="arduino">{code}</SyntaxHighlighter>)
20+
.toJSON();
21+
expect(tree).toMatchSnapshot();
22+
});

‎src/highlight.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ function processLines(
175175
}
176176

177177
function createLine(children, lineNumber, className = []) {
178-
return wrapLines
178+
return wrapLines || className.length > 0
179179
? createWrappedLine(children, lineNumber, className)
180180
: createUnwrappedLine(children, lineNumber);
181181
}
@@ -204,7 +204,7 @@ function processLines(
204204
const line = createLine(children, lineNumber);
205205
newTree.push(line);
206206

207-
// if it's neither the first nor the last line
207+
// if it's the last line
208208
} else if (i === splitValue.length - 1) {
209209
const stringChild =
210210
tree[index + 1] &&
@@ -227,7 +227,7 @@ function processLines(
227227
newTree.push(line);
228228
}
229229

230-
// if it's the last line
230+
// if it's neither the first nor the last line
231231
} else {
232232
const children = [newChild];
233233
const line = createLine(

0 commit comments

Comments
 (0)