Skip to content

Commit 2ff9188

Browse files
andrewbranchandrewbranch
authored
Fix blank lines collapsing (#111)
* Prevent blank lines from collapsing * Fix typo
1 parent c2d7993 commit 2ff9188

19 files changed

+441
-1
lines changed

‎MIGRATING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### Line highlighting is visible without custom CSS.
66

7-
Previously, the default line highlight background color was `transparent`, which meant a color had to be set with a CSS variable by the user. The reason for this limitation was that there is no sensible default that works for both light themes and dark themes, as a light highlight would be invisible on white, and a dark highlight would be invisible on black. As of v3, the plugin the luminance of each theme’s background color and selects a translucent white or translucent black highlight color as a default.
7+
Previously, the default line highlight background color was `transparent`, which meant a color had to be set with a CSS variable by the user. The reason for this limitation was that there is no sensible default that works for both light themes and dark themes, as a light highlight would be invisible on white, and a dark highlight would be invisible on black. As of v3, the plugin computes the luminance of each theme’s background color and selects a translucent white or translucent black highlight color as a default.
88

99
This is unlikely to break existing sites, as the CSS variables continue to work as a customization. However, as part of upgrading to v3, you may be able to remove the variables you set if you’re happy with the new defaults. If, for some reason, you were relying on the old behavior of an invisible default, sorry, don’t do that 🤷🏻‍♂️
1010

‎styles.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@
5252
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
5353
}
5454

55+
.grvsc-source:empty::after {
56+
content: ' ';
57+
-webkit-user-select: none;
58+
-moz-user-select: none;
59+
user-select: none;
60+
}
61+
5562
.grvsc-gutter + .grvsc-source {
5663
padding-left: 0.75rem;
5764
padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);

‎test/__snapshots__/index.js.snap

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,226 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`GraphQL resolvers blank-lines 1`] = `
4+
Object {
5+
"data": Object {
6+
"markdownRemark": Object {
7+
"grvscCodeBlocks": Array [
8+
Object {
9+
"codeClassName": "grvsc-code",
10+
"defaultTheme": Object {
11+
"conditions": Array [
12+
Object {
13+
"condition": "default",
14+
"value": null,
15+
},
16+
],
17+
"identifier": "Default Dark+",
18+
},
19+
"html": "<pre class=\\"grvsc-container default-dark\\" data-language=\\"ts\\" data-index=\\"0\\"><code class=\\"grvsc-code\\"><span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// You have to make sure</span></span></span>
20+
<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>
21+
<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// blank lines</span></span></span>
22+
<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>
23+
<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// don’t disappear</span></span></span></code></pre>",
24+
"index": 0,
25+
"language": "ts",
26+
"meta": Object {},
27+
"preClassName": "grvsc-container default-dark",
28+
"text": "// You have to make sure
29+
30+
// blank lines
31+
32+
// don’t disappear",
33+
"tokenizedLines": Array [
34+
Object {
35+
"attrs": Object {},
36+
"className": "grvsc-line",
37+
"data": Object {},
38+
"diff": null,
39+
"html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// You have to make sure</span></span></span>",
40+
"isHighlighted": null,
41+
"lineNumber": null,
42+
"text": "// You have to make sure",
43+
"tokens": Array [
44+
Object {
45+
"additionalThemeTokenData": Array [],
46+
"className": "mtk3",
47+
"defaultThemeTokenData": Object {
48+
"bold": false,
49+
"className": "mtk3",
50+
"color": "#6A9955",
51+
"italic": false,
52+
"themeIdentifier": "Default Dark+",
53+
"underline": false,
54+
},
55+
"endIndex": 2,
56+
"html": "<span class=\\"mtk3\\">//</span>",
57+
"scopes": Array [
58+
"source.ts",
59+
"comment.line.double-slash.ts",
60+
"punctuation.definition.comment.ts",
61+
],
62+
"startIndex": 0,
63+
"text": "//",
64+
},
65+
Object {
66+
"additionalThemeTokenData": Array [],
67+
"className": "mtk3",
68+
"defaultThemeTokenData": Object {
69+
"bold": false,
70+
"className": "mtk3",
71+
"color": "#6A9955",
72+
"italic": false,
73+
"themeIdentifier": "Default Dark+",
74+
"underline": false,
75+
},
76+
"endIndex": 24,
77+
"html": "<span class=\\"mtk3\\"> You have to make sure</span>",
78+
"scopes": Array [
79+
"source.ts",
80+
"comment.line.double-slash.ts",
81+
],
82+
"startIndex": 2,
83+
"text": " You have to make sure",
84+
},
85+
],
86+
},
87+
Object {
88+
"attrs": Object {},
89+
"className": "grvsc-line",
90+
"data": Object {},
91+
"diff": null,
92+
"html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>",
93+
"isHighlighted": null,
94+
"lineNumber": null,
95+
"text": "",
96+
"tokens": Array [],
97+
},
98+
Object {
99+
"attrs": Object {},
100+
"className": "grvsc-line",
101+
"data": Object {},
102+
"diff": null,
103+
"html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// blank lines</span></span></span>",
104+
"isHighlighted": null,
105+
"lineNumber": null,
106+
"text": "// blank lines",
107+
"tokens": Array [
108+
Object {
109+
"additionalThemeTokenData": Array [],
110+
"className": "mtk3",
111+
"defaultThemeTokenData": Object {
112+
"bold": false,
113+
"className": "mtk3",
114+
"color": "#6A9955",
115+
"italic": false,
116+
"themeIdentifier": "Default Dark+",
117+
"underline": false,
118+
},
119+
"endIndex": 2,
120+
"html": "<span class=\\"mtk3\\">//</span>",
121+
"scopes": Array [
122+
"source.ts",
123+
"comment.line.double-slash.ts",
124+
"punctuation.definition.comment.ts",
125+
],
126+
"startIndex": 0,
127+
"text": "//",
128+
},
129+
Object {
130+
"additionalThemeTokenData": Array [],
131+
"className": "mtk3",
132+
"defaultThemeTokenData": Object {
133+
"bold": false,
134+
"className": "mtk3",
135+
"color": "#6A9955",
136+
"italic": false,
137+
"themeIdentifier": "Default Dark+",
138+
"underline": false,
139+
},
140+
"endIndex": 14,
141+
"html": "<span class=\\"mtk3\\"> blank lines</span>",
142+
"scopes": Array [
143+
"source.ts",
144+
"comment.line.double-slash.ts",
145+
],
146+
"startIndex": 2,
147+
"text": " blank lines",
148+
},
149+
],
150+
},
151+
Object {
152+
"attrs": Object {},
153+
"className": "grvsc-line",
154+
"data": Object {},
155+
"diff": null,
156+
"html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"></span></span>",
157+
"isHighlighted": null,
158+
"lineNumber": null,
159+
"text": "",
160+
"tokens": Array [],
161+
},
162+
Object {
163+
"attrs": Object {},
164+
"className": "grvsc-line",
165+
"data": Object {},
166+
"diff": null,
167+
"html": "<span class=\\"grvsc-line\\"><span class=\\"grvsc-source\\"><span class=\\"mtk3\\">// don’t disappear</span></span></span>",
168+
"isHighlighted": null,
169+
"lineNumber": null,
170+
"text": "// don’t disappear",
171+
"tokens": Array [
172+
Object {
173+
"additionalThemeTokenData": Array [],
174+
"className": "mtk3",
175+
"defaultThemeTokenData": Object {
176+
"bold": false,
177+
"className": "mtk3",
178+
"color": "#6A9955",
179+
"italic": false,
180+
"themeIdentifier": "Default Dark+",
181+
"underline": false,
182+
},
183+
"endIndex": 2,
184+
"html": "<span class=\\"mtk3\\">//</span>",
185+
"scopes": Array [
186+
"source.ts",
187+
"comment.line.double-slash.ts",
188+
"punctuation.definition.comment.ts",
189+
],
190+
"startIndex": 0,
191+
"text": "//",
192+
},
193+
Object {
194+
"additionalThemeTokenData": Array [],
195+
"className": "mtk3",
196+
"defaultThemeTokenData": Object {
197+
"bold": false,
198+
"className": "mtk3",
199+
"color": "#6A9955",
200+
"italic": false,
201+
"themeIdentifier": "Default Dark+",
202+
"underline": false,
203+
},
204+
"endIndex": 18,
205+
"html": "<span class=\\"mtk3\\"> don’t disappear</span>",
206+
"scopes": Array [
207+
"source.ts",
208+
"comment.line.double-slash.ts",
209+
],
210+
"startIndex": 2,
211+
"text": " don’t disappear",
212+
},
213+
],
214+
},
215+
],
216+
},
217+
],
218+
"grvscCodeSpans": Array [],
219+
},
220+
},
221+
}
222+
`;
223+
3224
exports[`GraphQL resolvers bug-37 1`] = `
4225
Object {
5226
"data": Object {

‎test/cases/blank-lines/test.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Blank lines
2+
3+
```ts
4+
// You have to make sure
5+
6+
// blank lines
7+
8+
// don’t disappear
9+
```

‎test/html/baselines/blank-lines.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<h1>Blank lines</h1>
2+
<pre class="grvsc-container default-dark" data-language="ts" data-index="0"><code class="grvsc-code"><span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// You have to make sure</span></span></span>
3+
<span class="grvsc-line"><span class="grvsc-source"></span></span>
4+
<span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// blank lines</span></span></span>
5+
<span class="grvsc-line"><span class="grvsc-source"></span></span>
6+
<span class="grvsc-line"><span class="grvsc-source"><span class="mtk3">// don’t disappear</span></span></span></code></pre>
7+
<style class="grvsc-styles">
8+
.grvsc-container {
9+
overflow: auto;
10+
position: relative;
11+
-webkit-overflow-scrolling: touch;
12+
padding-top: 1rem;
13+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
14+
padding-bottom: 1rem;
15+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
16+
border-radius: 8px;
17+
border-radius: var(--grvsc-border-radius, 8px);
18+
font-feature-settings: normal;
19+
line-height: 1.4;
20+
}
21+
22+
.grvsc-code {
23+
display: table;
24+
}
25+
26+
.grvsc-line {
27+
display: table-row;
28+
box-sizing: border-box;
29+
width: 100%;
30+
position: relative;
31+
}
32+
33+
.grvsc-line > * {
34+
position: relative;
35+
}
36+
37+
.grvsc-gutter-pad {
38+
display: table-cell;
39+
padding-left: 0.75rem;
40+
padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
41+
}
42+
43+
.grvsc-gutter {
44+
display: table-cell;
45+
-webkit-user-select: none;
46+
-moz-user-select: none;
47+
user-select: none;
48+
}
49+
50+
.grvsc-gutter::before {
51+
content: attr(data-content);
52+
}
53+
54+
.grvsc-source {
55+
display: table-cell;
56+
padding-left: 1.5rem;
57+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
58+
padding-right: 1.5rem;
59+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
60+
}
61+
62+
.grvsc-source:empty::after {
63+
content: ' ';
64+
-webkit-user-select: none;
65+
-moz-user-select: none;
66+
user-select: none;
67+
}
68+
69+
.grvsc-gutter + .grvsc-source {
70+
padding-left: 0.75rem;
71+
padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);
72+
}
73+
74+
/* Line transformer styles */
75+
76+
.grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {
77+
content: ' ';
78+
position: absolute;
79+
width: 100%;
80+
}
81+
82+
.grvsc-line-diff-add::before {
83+
background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));
84+
}
85+
86+
.grvsc-line-diff-del::before {
87+
background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));
88+
}
89+
90+
.grvsc-line-number {
91+
padding: 0 2px;
92+
text-align: right;
93+
opacity: 0.7;
94+
}
95+
96+
.default-dark {
97+
background-color: #1E1E1E;
98+
color: #D4D4D4;
99+
}
100+
.default-dark .mtk3 { color: #6A9955; }
101+
.default-dark .grvsc-line-highlighted::before {
102+
background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));
103+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));
104+
}
105+
</style>

‎test/html/baselines/bug-37.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@
6464
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
6565
}
6666

67+
.grvsc-source:empty::after {
68+
content: ' ';
69+
-webkit-user-select: none;
70+
-moz-user-select: none;
71+
user-select: none;
72+
}
73+
6774
.grvsc-gutter + .grvsc-source {
6875
padding-left: 0.75rem;
6976
padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);

‎test/html/baselines/bug-93.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@ <h1>TypeError: Cannot read property 'marker' of undefined</h1>
6363
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
6464
}
6565

66+
.grvsc-source:empty::after {
67+
content: ' ';
68+
-webkit-user-select: none;
69+
-moz-user-select: none;
70+
user-select: none;
71+
}
72+
6673
.grvsc-gutter + .grvsc-source {
6774
padding-left: 0.75rem;
6875
padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);

0 commit comments

Comments
 (0)