@cosense-toolbox/style 0.1.0-beta.0 → 0.1.0-beta.3
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 +28 -19
- package/package.json +15 -5
- package/style.css +55 -3
package/README.md
CHANGED
|
@@ -10,13 +10,16 @@ npm i @cosense-toolbox/style@beta
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
```ts
|
|
13
|
-
import
|
|
13
|
+
import "@cosense-toolbox/style"
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
> ⚠️ これは Cosense (Scrapbox) 本体の CSS **ではありません**。本体の CSS はエディタの DOM
|
|
17
17
|
> (`.line > .text > 1 文字ごとの .char-index`) に当てたもので `toHtml` の出力には当たらないため、
|
|
18
18
|
> 見た目を寄せた別実装として書き起こしたものです。
|
|
19
19
|
|
|
20
|
+
Tailwind CSS を使っているなら、この CSS を読み込む代わりに [`@cosense-toolbox/tailwind`](../tailwind) を使える。
|
|
21
|
+
`class="cosense"` を付けた要素の中に、同じスタイルが当たる。
|
|
22
|
+
|
|
20
23
|
## 前提
|
|
21
24
|
|
|
22
25
|
すべてのルールが `.page` の下にスコープされている。`toHtml(page)` の出力はルートに `.page` を持つので
|
|
@@ -37,22 +40,23 @@ CSS 変数を定義するだけでよい。定義した変数が最優先にな
|
|
|
37
40
|
}
|
|
38
41
|
```
|
|
39
42
|
|
|
40
|
-
| 変数
|
|
41
|
-
|
|
42
|
-
| `--cosense-text`
|
|
43
|
-
| `--cosense-title`
|
|
44
|
-
| `--cosense-bg`
|
|
45
|
-
| `--cosense-link`
|
|
46
|
-
| `--cosense-link-hover`
|
|
47
|
-
| `--cosense-code-text`
|
|
48
|
-
| `--cosense-code-bg`
|
|
49
|
-
| `--cosense-quote-bg`
|
|
50
|
-
| `--cosense-badge-text` / `--cosense-badge-bg` | `#342d9c` / `#ffcfc6`
|
|
51
|
-
| `--cosense-font`
|
|
52
|
-
| `--cosense-font-size`
|
|
53
|
-
| `--cosense-line-height`
|
|
54
|
-
| `--cosense-code-font`
|
|
55
|
-
| `--cosense-
|
|
43
|
+
| 変数 | 既定 | 本体テーマの変数 |
|
|
44
|
+
| --------------------------------------------- | ------------------------------------------------------------ | ------------------------- |
|
|
45
|
+
| `--cosense-text` | `#4a4a4a` | `--page-text-color` |
|
|
46
|
+
| `--cosense-title` | 本文と同じ | `--line-title-color` |
|
|
47
|
+
| `--cosense-bg` | `#fefefe` | `--page-bg` |
|
|
48
|
+
| `--cosense-link` | `#3d72f5` | `--page-link-color` |
|
|
49
|
+
| `--cosense-link-hover` | `#0d4ff3` | `--page-link-hover-color` |
|
|
50
|
+
| `--cosense-code-text` | `#342d9c` | `--code-color` |
|
|
51
|
+
| `--cosense-code-bg` | `rgba(0,0,0,.04)` | `--code-bg` |
|
|
52
|
+
| `--cosense-quote-bg` | `rgba(0,0,0,.05)` | `--quote-bg-color` |
|
|
53
|
+
| `--cosense-badge-text` / `--cosense-badge-bg` | `#342d9c` / `#ffcfc6` | — |
|
|
54
|
+
| `--cosense-font` | `"Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif` | — |
|
|
55
|
+
| `--cosense-font-size` | `15px` | — |
|
|
56
|
+
| `--cosense-line-height` | `1.87` | — |
|
|
57
|
+
| `--cosense-code-font` | `ui-monospace, …` | — |
|
|
58
|
+
| `--cosense-line-number` | `rgba(0,0,0,.35)` | — |
|
|
59
|
+
| `--cosense-indent` | `1.5em` | — |
|
|
56
60
|
|
|
57
61
|
「本体テーマの変数」の列は fallback として参照している。Cosense のテーマ変数を持つページに
|
|
58
62
|
埋め込めば、`--cosense-*` を書かなくても見た目が揃う。
|
|
@@ -71,9 +75,14 @@ CSS 変数を定義するだけでよい。定義した変数が最優先にな
|
|
|
71
75
|
Cosense と同じく、字下げの右端に中点を出す。`toHtml` の既定の出力には中点にあたる要素が
|
|
72
76
|
無いので `.line[data-indent]::before` で描いている。
|
|
73
77
|
|
|
74
|
-
`toHtml(page, { showPads: true })`
|
|
78
|
+
`toHtml(page, { showPads: true })` でCosense Web と同じ `.indent-mark` / `.pad` / `.dot` を
|
|
75
79
|
書き出した場合は、擬似要素を止めて要素側のスタイルを使う。どちらでも見た目は同じ。
|
|
76
80
|
|
|
81
|
+
## コードブロックの行番号
|
|
82
|
+
|
|
83
|
+
`@cosense-toolbox/parser/html` の `codeLineNumbers()` を描画の拡張 (`extensions`) に渡すと、本体行に `data-line` と `data-line-digits` が付き、このスタイルが行の左に番号の欄を取って番号を出す。
|
|
84
|
+
欄の幅はブロックの最後の番号の桁数で決まる。番号は選択の対象にならないので、コードをコピーしても入らない。色は `--cosense-line-number` で変える。
|
|
85
|
+
|
|
77
86
|
## 名前の衝突を避ける
|
|
78
87
|
|
|
79
88
|
`toHtml` の既定の class 名は接頭辞を持たない (`.line` / `.title` / `.code` / `.table`)。
|
|
@@ -85,7 +94,7 @@ Cosense と同じく、字下げの右端に中点を出す。`toHtml` の既定
|
|
|
85
94
|
- この CSS をカスケードレイヤーに入れて、ページ側の CSS を常に優先させる
|
|
86
95
|
|
|
87
96
|
```css
|
|
88
|
-
@import
|
|
97
|
+
@import "@cosense-toolbox/style" layer(cosense);
|
|
89
98
|
```
|
|
90
99
|
|
|
91
100
|
## ライセンス
|
package/package.json
CHANGED
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cosense-toolbox/style",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.3",
|
|
4
4
|
"description": "Default stylesheet for the HTML that @cosense-toolbox/parser renders.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"sideEffects": [
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"**/*.css"
|
|
9
|
+
],
|
|
8
10
|
"style": "./style.css",
|
|
9
11
|
"exports": {
|
|
10
12
|
".": "./style.css",
|
|
11
13
|
"./style.css": "./style.css",
|
|
12
14
|
"./package.json": "./package.json"
|
|
13
15
|
},
|
|
14
|
-
"files": [
|
|
15
|
-
|
|
16
|
+
"files": [
|
|
17
|
+
"style.css",
|
|
18
|
+
"README.md",
|
|
19
|
+
"LICENSE"
|
|
20
|
+
],
|
|
21
|
+
"keywords": [
|
|
22
|
+
"cosense",
|
|
23
|
+
"scrapbox",
|
|
24
|
+
"css",
|
|
25
|
+
"stylesheet"
|
|
26
|
+
],
|
|
16
27
|
"repository": {
|
|
17
28
|
"type": "git",
|
|
18
29
|
"url": "git+https://github.com/qaynam/cosense-toolbox.git",
|
|
@@ -20,7 +31,6 @@
|
|
|
20
31
|
},
|
|
21
32
|
"publishConfig": {
|
|
22
33
|
"access": "public",
|
|
23
|
-
"tag": "beta",
|
|
24
34
|
"registry": "https://registry.npmjs.org/"
|
|
25
35
|
}
|
|
26
36
|
}
|
package/style.css
CHANGED
|
@@ -188,13 +188,15 @@
|
|
|
188
188
|
*/
|
|
189
189
|
.page .line.code-block > code {
|
|
190
190
|
display: block;
|
|
191
|
+
/* 空の行も 1 行ぶんの高さを保つ。中身が無いと行の箱ができず、高さが 0 になるため。 */
|
|
192
|
+
min-height: 1.7em;
|
|
191
193
|
line-height: 1.7em;
|
|
192
194
|
tab-size: 4;
|
|
193
195
|
background: var(--cosense-code-bg, var(--code-bg, rgba(0, 0, 0, 0.04)));
|
|
194
196
|
}
|
|
195
197
|
|
|
196
198
|
/*
|
|
197
|
-
* 本体行はヘッダより 1 段深いが、ブロックの左端はヘッダに揃える (
|
|
199
|
+
* 本体行はヘッダより 1 段深いが、ブロックの左端はヘッダに揃える (Cosense Web と同じ)。
|
|
198
200
|
* 1 段ぶん左に出してから同じだけ padding で戻すことで、文字の位置は保ったまま背景だけ広げる。
|
|
199
201
|
*/
|
|
200
202
|
.page .line.code-block > .code-body {
|
|
@@ -204,7 +206,7 @@
|
|
|
204
206
|
white-space: pre-wrap;
|
|
205
207
|
}
|
|
206
208
|
|
|
207
|
-
/*
|
|
209
|
+
/* ファイル名はCosense Web と同じ見出しバッジ。 */
|
|
208
210
|
.page .code-block-start {
|
|
209
211
|
padding: 1px 2px;
|
|
210
212
|
font-size: 0.95em;
|
|
@@ -212,11 +214,61 @@
|
|
|
212
214
|
background: var(--cosense-badge-bg, #ffcfc6);
|
|
213
215
|
}
|
|
214
216
|
|
|
215
|
-
/* 中点が付くのはヘッダ行だけ (
|
|
217
|
+
/* 中点が付くのはヘッダ行だけ (Cosense Web では本体行に dot が無い)。 */
|
|
216
218
|
.page .line.code-block:not(:has(> .code-start))::before {
|
|
217
219
|
content: none;
|
|
218
220
|
}
|
|
219
221
|
|
|
222
|
+
/*
|
|
223
|
+
* 行番号。codeLineNumbers() の拡張を渡したときだけ、本体行に data-line と data-line-digits が付く。
|
|
224
|
+
*
|
|
225
|
+
* エディタと同じく、本文の左に番号の欄を取る。欄の幅はブロックの最後の番号の桁数 (data-line-digits) で決め、
|
|
226
|
+
* 同じブロックの行はすべて同じ位置から本文が始まる。番号は行の要素の擬似要素なので本文の文字には混ざらず、
|
|
227
|
+
* attr() の中身は選択されないので、コードをコピーしても番号は入らない。
|
|
228
|
+
* 桁数を calc に持ち込む手段 (attr() の type 指定) がまだ広く使えないので、インデントと同じく桁数ごとに変数を置く。
|
|
229
|
+
*/
|
|
230
|
+
.page .line.code-block[data-line-digits="1"] {
|
|
231
|
+
--cosense-line-digits: 1;
|
|
232
|
+
}
|
|
233
|
+
.page .line.code-block[data-line-digits="2"] {
|
|
234
|
+
--cosense-line-digits: 2;
|
|
235
|
+
}
|
|
236
|
+
.page .line.code-block[data-line-digits="3"] {
|
|
237
|
+
--cosense-line-digits: 3;
|
|
238
|
+
}
|
|
239
|
+
.page .line.code-block[data-line-digits="4"] {
|
|
240
|
+
--cosense-line-digits: 4;
|
|
241
|
+
}
|
|
242
|
+
.page .line.code-block[data-line-digits="5"] {
|
|
243
|
+
--cosense-line-digits: 5;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/*
|
|
247
|
+
* 番号の欄の幅は「0.6em + 桁数ぶんの数字」。ch はコードの書体の数字 1 つぶんなので、欄と本文の両方で同じ書体を使う。
|
|
248
|
+
* 本文は欄の右に数字 1 つぶんの間を空けて始める。
|
|
249
|
+
*/
|
|
250
|
+
.page .line.code-block[data-line] > .code-body {
|
|
251
|
+
padding-left: calc(0.6em + (var(--cosense-line-digits, 5) + 1) * 1ch);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.page .line.code-block[data-line]::before {
|
|
255
|
+
content: attr(data-line);
|
|
256
|
+
top: 0;
|
|
257
|
+
/* ブロックの左端 (ヘッダ行と同じ位置) から、番号の欄の幅だけを使う。 */
|
|
258
|
+
left: calc(var(--cosense-indent, 1.5em) * (var(--cosense-depth, 1) - 1));
|
|
259
|
+
width: calc(0.6em + var(--cosense-line-digits, 5) * 1ch);
|
|
260
|
+
height: auto;
|
|
261
|
+
display: flex;
|
|
262
|
+
justify-content: flex-end;
|
|
263
|
+
white-space: nowrap;
|
|
264
|
+
border-radius: 0;
|
|
265
|
+
background: none;
|
|
266
|
+
font-family: var(--cosense-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
|
|
267
|
+
/* 文字の大きさを変えると、欄の幅の ch と em が本文とずれるので変えない。 */
|
|
268
|
+
line-height: 1.7em;
|
|
269
|
+
color: var(--cosense-line-number, rgba(0, 0, 0, 0.35));
|
|
270
|
+
}
|
|
271
|
+
|
|
220
272
|
/* ---------------------------------------------------------------------------
|
|
221
273
|
* 引用
|
|
222
274
|
* ------------------------------------------------------------------------- */
|