yapp 4.0.90 → 4.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -15
- package/example.html +2 -2
- package/example.js +10 -10
- package/lib/gutter.js +2 -2
- package/lib/highlights.js +2 -2
- package/lib/lineNumbers.js +2 -2
- package/lib/prettyPrinter.js +2 -2
- package/lib/richTextarea.js +2 -2
- package/lib/syntax.js +2 -2
- package/lib/yapp.js +4 -4
- package/package.json +1 -1
- package/src/gutter.js +5 -0
- package/src/highlights.js +5 -2
- package/src/lineNumbers.js +7 -1
- package/src/prettyPrinter.js +2 -1
- package/src/richTextarea.js +5 -1
- package/src/syntax.js +5 -0
- package/src/yapp.js +6 -6
package/README.md
CHANGED
|
@@ -189,9 +189,9 @@ If you choose to enable Fira Code then you need to provide the necessary web fon
|
|
|
189
189
|
|
|
190
190
|
```
|
|
191
191
|
@font-face {
|
|
192
|
-
font-family: "Fira Code";
|
|
193
192
|
src: url("css/woff2/FiraCode-Light.woff2");
|
|
194
|
-
font-
|
|
193
|
+
font-family: "Fira Code";
|
|
194
|
+
font-weight: normal;
|
|
195
195
|
}
|
|
196
196
|
```
|
|
197
197
|
You do not have to provide this, rendering Yapp's styles will do so, but it is recommended that you check the network tab in your browser's developer tools to ensure that these files are being served.
|
|
@@ -199,8 +199,8 @@ You do not have to provide this, rendering Yapp's styles will do so, but it is r
|
|
|
199
199
|
You can also preload the font files by putting the following in the header of the containing HTML page:
|
|
200
200
|
|
|
201
201
|
```
|
|
202
|
-
<link rel="preload" href="${host}/css/woff2/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
203
|
-
<link rel="preload" href="${host}/css/woff2/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
202
|
+
<link rel="preload" href="${host}/css/woff2/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin >
|
|
203
|
+
<link rel="preload" href="${host}/css/woff2/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin >
|
|
204
204
|
```
|
|
205
205
|
|
|
206
206
|
A `host` variable has been included here, the value of which should be the same as the `host` argument passed to the `firaCodeStyle()` function mentioned in the section on syntax styles further down. You may need to change the markup in the above snippet, depending on your templating library.
|
|
@@ -221,7 +221,7 @@ Rendering the styles in this manner should always be done before any instance of
|
|
|
221
221
|
|
|
222
222
|
### Overall styles
|
|
223
223
|
|
|
224
|
-
|
|
224
|
+
The following styles can be overridden. The most elegant way to do this is with programmatic styles. You can take the following approach, for example:
|
|
225
225
|
|
|
226
226
|
```
|
|
227
227
|
"use strict";
|
|
@@ -234,21 +234,19 @@ export default withStyle(Yapp)`
|
|
|
234
234
|
border: 2px dotted;
|
|
235
235
|
|
|
236
236
|
color: green;
|
|
237
|
-
caret-color: white;
|
|
238
|
-
border-color: yellow;
|
|
239
|
-
background-color: red;
|
|
240
|
-
|
|
241
237
|
font-size: 14px;
|
|
242
238
|
line-height: 20px;
|
|
243
|
-
font-family:
|
|
244
|
-
|
|
245
|
-
|
|
239
|
+
font-family: monospace;
|
|
240
|
+
font-weight: bold;
|
|
241
|
+
caret-color: white;
|
|
242
|
+
border-color: yellow;
|
|
243
|
+
text-rendering: initial;
|
|
244
|
+
background-color: black;
|
|
245
|
+
font-feature-settings: initial;
|
|
246
246
|
|
|
247
|
-
`;
|
|
248
247
|
```
|
|
249
|
-
Now you can import this class rather than the package's `Yapp` class and your style will always be used without the need for repetition.
|
|
250
248
|
|
|
251
|
-
|
|
249
|
+
Now you can import this class rather than the package's `Yapp` class and your styles will always be used without the need for repetition. Note that all of the above styles will be inherited by all of the child elements with the exception of the `border` style, which is only used at the topmost level; a few other sty3es such as the `background` style, which some child elements need to override. A little experimentation is recommended.
|
|
252
250
|
|
|
253
251
|
```
|
|
254
252
|
.yaap > textarea::selection {
|
package/example.html
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Yapp</title>
|
|
5
5
|
|
|
6
|
-
<link rel="preload" href="css/woff2/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
7
|
-
<link rel="preload" href="css/woff2/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
6
|
+
<link rel="preload" href="css/woff2/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin >
|
|
7
|
+
<link rel="preload" href="css/woff2/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin >
|
|
8
8
|
|
|
9
9
|
<style>
|
|
10
10
|
|