Skip to content

Commit a88fe4e

Browse files
authored
Fixes markdown code styles (#1702)
We were importing the highlight.js styles but only using parts of them. Solarized-light and dark were both imported but only dark was being used as the styles were being made global. We covered this up by modifying the background color and text color to match the theme. This removes those cover ups and uses the scss so the resulting css is not scoped globally.
1 parent 21b8cfc commit a88fe4e

File tree

3 files changed

+7
-19
lines changed

3 files changed

+7
-19
lines changed

RELEASE-NOTES.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
### Fixes
88

9+
- Fixed markdown code styles [#1702](https://github.com/Automattic/simplenote-electron/pull/1702)
10+
911
### Other Changes
1012

1113
- Updated dependencies [#1693](https://github.com/Automattic/simplenote-electron/pull/1693)

lib/note-detail/style.scss

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
}
115115

116116
.note-detail-markdown {
117-
@import '../node_modules/highlight.js/styles/solarized-light.css';
117+
@import '../node_modules/highlight.js/scss/solarized-light.scss';
118118

119119
h1,
120120
h2,
@@ -179,22 +179,13 @@
179179
}
180180
}
181181

182-
code {
183-
background: $studio-gray-5;
184-
}
185-
186182
pre {
187183
border: 1px solid $studio-gray-20;
188184
padding: 1em;
189185
border-radius: $border-radius;
190186
font-size: 85%;
191187
}
192188

193-
pre code {
194-
color: $studio-gray-90;
195-
background: transparent;
196-
}
197-
198189
table {
199190
border-collapse: collapse;
200191
border-spacing: 0;

scss/theme.scss

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@
7272
background-color: transparent;
7373
}
7474

75-
.transparent-input::placeholder, input::placeholder {
75+
.transparent-input::placeholder,
76+
input::placeholder {
7677
color: $studio-gray-20;
7778
}
7879

@@ -128,7 +129,7 @@
128129
}
129130

130131
.note-detail-markdown {
131-
@import '../node_modules/highlight.js/styles/solarized-dark.css';
132+
@import '../node_modules/highlight.js/scss/solarized-dark.scss';
132133

133134
hr {
134135
border-color: $studio-gray-80;
@@ -138,16 +139,10 @@
138139
border-color: $studio-gray-80;
139140
}
140141

141-
code {
142-
background: $studio-gray-60;
143-
}
144142
pre {
145143
border-color: $studio-gray-80;
146144
}
147-
pre code {
148-
color: $studio-gray-50;
149-
background: transparent;
150-
}
145+
151146
table {
152147
th,
153148
td {

0 commit comments

Comments
 (0)