@riebeckite/plugin-highlight 0.0.11 → 0.0.13
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 +91 -91
- package/README_ja.md +91 -91
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# @riebeckite/plugin-highlight
|
|
2
|
-
|
|
3
|
-
Inline `==highlight==` support. Text wrapped in double equals is rendered as a
|
|
4
|
-
`<mark>` element at build time.
|
|
5
|
-
|
|
6
|
-
[日本語](./README_ja.md)
|
|
7
|
-
|
|
8
|
-
## Overview
|
|
9
|
-
|
|
10
|
-
`highlight()` registers a remark transformer that rewrites `==text==` in
|
|
11
|
-
Markdown text nodes into raw HTML before the tree is converted to HTML. It
|
|
12
|
-
complements `remark-gfm` (which only understands `~~strikethrough~~`).
|
|
13
|
-
|
|
14
|
-
## Usage
|
|
15
|
-
|
|
16
|
-
```ts
|
|
17
|
-
import { defineConfig } from "@riebeckite/core";
|
|
18
|
-
import { highlight } from "@riebeckite/plugin-highlight";
|
|
19
|
-
|
|
20
|
-
export default defineConfig({
|
|
21
|
-
// ...
|
|
22
|
-
plugins: [highlight()],
|
|
23
|
-
});
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Syntax
|
|
27
|
-
|
|
28
|
-
```md
|
|
29
|
-
This sentence has a ==highlighted phrase== inside it.
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Output:
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
This sentence has a <mark class="rb-highlight">highlighted phrase</mark> inside it.
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
Highlights are matched non-greedily, must stay on a single line, and are
|
|
39
|
-
ignored when they are empty or contain only whitespace. Matches inside code
|
|
40
|
-
blocks, inline code, raw HTML, and frontmatter are left untouched.
|
|
41
|
-
|
|
42
|
-
## Options
|
|
43
|
-
|
|
44
|
-
| Option | Type | Default | Description |
|
|
45
|
-
| ------ | ---- | ------- | ----------- |
|
|
46
|
-
| `className` | `string` | `"rb-highlight"` | CSS class on each generated element |
|
|
47
|
-
| `tag` | `string` | `"mark"` | HTML tag used for the highlight |
|
|
48
|
-
|
|
49
|
-
```ts
|
|
50
|
-
highlight({ className: "my-highlight", tag: "span" });
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Styling
|
|
54
|
-
|
|
55
|
-
The package ships `style.css`, exposed as
|
|
56
|
-
`@riebeckite/plugin-highlight/style.css`. The default rule styles
|
|
57
|
-
`.rb-highlight` with a subtle accent background and falls back to the
|
|
58
|
-
`--rb-color-accent` theme variable when available:
|
|
59
|
-
|
|
60
|
-
```css
|
|
61
|
-
.rb-highlight {
|
|
62
|
-
--rb-highlight-accent: var(--rb-color-accent, #f6d365);
|
|
63
|
-
padding: 0.05em 0.25em;
|
|
64
|
-
border-radius: 0.2em;
|
|
65
|
-
background: color-mix(in srgb, var(--rb-highlight-accent) 45%, transparent);
|
|
66
|
-
color: inherit;
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Because the plugin registers a style asset, the host site includes this
|
|
71
|
-
stylesheet automatically; override the class or supply your own CSS to change
|
|
72
|
-
the appearance.
|
|
73
|
-
|
|
74
|
-
## Limitations
|
|
75
|
-
|
|
76
|
-
- A highlight never spans multiple text nodes or lines, so `==` delimiters
|
|
77
|
-
cannot wrap other Markdown (links, emphasis, code) or line breaks.
|
|
78
|
-
- Nested highlights are not supported; the innermost `==` pair wins.
|
|
79
|
-
- The transformer emits raw HTML, so enable raw HTML output in the pipeline
|
|
80
|
-
(the default Riebeckite pipeline does).
|
|
81
|
-
|
|
82
|
-
## Exports
|
|
83
|
-
|
|
84
|
-
- `highlight(options?)` — plugin factory
|
|
85
|
-
- `highlightPlugin` — alias of `highlight`
|
|
86
|
-
- `remarkHighlight(options?)` — the underlying remark transformer
|
|
87
|
-
- Type: `HighlightOptions`
|
|
88
|
-
|
|
89
|
-
## See also
|
|
90
|
-
|
|
91
|
-
- [Plugin guide](../../../docs/en/plugin-
|
|
1
|
+
# @riebeckite/plugin-highlight
|
|
2
|
+
|
|
3
|
+
Inline `==highlight==` support. Text wrapped in double equals is rendered as a
|
|
4
|
+
`<mark>` element at build time.
|
|
5
|
+
|
|
6
|
+
[日本語](./README_ja.md)
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
`highlight()` registers a remark transformer that rewrites `==text==` in
|
|
11
|
+
Markdown text nodes into raw HTML before the tree is converted to HTML. It
|
|
12
|
+
complements `remark-gfm` (which only understands `~~strikethrough~~`).
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import { defineConfig } from "@riebeckite/core";
|
|
18
|
+
import { highlight } from "@riebeckite/plugin-highlight";
|
|
19
|
+
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
// ...
|
|
22
|
+
plugins: [highlight()],
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Syntax
|
|
27
|
+
|
|
28
|
+
```md
|
|
29
|
+
This sentence has a ==highlighted phrase== inside it.
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Output:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
This sentence has a <mark class="rb-highlight">highlighted phrase</mark> inside it.
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Highlights are matched non-greedily, must stay on a single line, and are
|
|
39
|
+
ignored when they are empty or contain only whitespace. Matches inside code
|
|
40
|
+
blocks, inline code, raw HTML, and frontmatter are left untouched.
|
|
41
|
+
|
|
42
|
+
## Options
|
|
43
|
+
|
|
44
|
+
| Option | Type | Default | Description |
|
|
45
|
+
| ------ | ---- | ------- | ----------- |
|
|
46
|
+
| `className` | `string` | `"rb-highlight"` | CSS class on each generated element |
|
|
47
|
+
| `tag` | `string` | `"mark"` | HTML tag used for the highlight |
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
highlight({ className: "my-highlight", tag: "span" });
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Styling
|
|
54
|
+
|
|
55
|
+
The package ships `style.css`, exposed as
|
|
56
|
+
`@riebeckite/plugin-highlight/style.css`. The default rule styles
|
|
57
|
+
`.rb-highlight` with a subtle accent background and falls back to the
|
|
58
|
+
`--rb-color-accent` theme variable when available:
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
.rb-highlight {
|
|
62
|
+
--rb-highlight-accent: var(--rb-color-accent, #f6d365);
|
|
63
|
+
padding: 0.05em 0.25em;
|
|
64
|
+
border-radius: 0.2em;
|
|
65
|
+
background: color-mix(in srgb, var(--rb-highlight-accent) 45%, transparent);
|
|
66
|
+
color: inherit;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Because the plugin registers a style asset, the host site includes this
|
|
71
|
+
stylesheet automatically; override the class or supply your own CSS to change
|
|
72
|
+
the appearance.
|
|
73
|
+
|
|
74
|
+
## Limitations
|
|
75
|
+
|
|
76
|
+
- A highlight never spans multiple text nodes or lines, so `==` delimiters
|
|
77
|
+
cannot wrap other Markdown (links, emphasis, code) or line breaks.
|
|
78
|
+
- Nested highlights are not supported; the innermost `==` pair wins.
|
|
79
|
+
- The transformer emits raw HTML, so enable raw HTML output in the pipeline
|
|
80
|
+
(the default Riebeckite pipeline does).
|
|
81
|
+
|
|
82
|
+
## Exports
|
|
83
|
+
|
|
84
|
+
- `highlight(options?)` — plugin factory
|
|
85
|
+
- `highlightPlugin` — alias of `highlight`
|
|
86
|
+
- `remarkHighlight(options?)` — the underlying remark transformer
|
|
87
|
+
- Type: `HighlightOptions`
|
|
88
|
+
|
|
89
|
+
## See also
|
|
90
|
+
|
|
91
|
+
- [Plugin guide](../../../docs/en/reference/plugin-api.md)
|
package/README_ja.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# @riebeckite/plugin-highlight
|
|
2
|
-
|
|
3
|
-
`==ハイライト==` を `<mark>` 要素として表示するプラグインです。Markdown の
|
|
4
|
-
テキストノードをビルド時に書き換えます。
|
|
5
|
-
|
|
6
|
-
[English](./README.md)
|
|
7
|
-
|
|
8
|
-
## 概要
|
|
9
|
-
|
|
10
|
-
`highlight()` は、Markdown のテキストノードにある `==テキスト==` を HTML に
|
|
11
|
-
変換する前に生の HTML へ置き換える remark トランスフォーマーを登録します。
|
|
12
|
-
`~~打ち消し線~~` だけを扱う `remark-gfm` を補完します。
|
|
13
|
-
|
|
14
|
-
## 設定する
|
|
15
|
-
|
|
16
|
-
```ts
|
|
17
|
-
import { defineConfig } from "@riebeckite/core";
|
|
18
|
-
import { highlight } from "@riebeckite/plugin-highlight";
|
|
19
|
-
|
|
20
|
-
export default defineConfig({
|
|
21
|
-
// ...
|
|
22
|
-
plugins: [highlight()],
|
|
23
|
-
});
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## 構文
|
|
27
|
-
|
|
28
|
-
```md
|
|
29
|
-
この文には ==ハイライトする語句== が含まれます。
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
出力:
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
この文には <mark class="rb-highlight">ハイライトする語句</mark> が含まれます。
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
ハイライトは非貪欲に一致し、改行をまたぎません。空、または空白だけの
|
|
39
|
-
ハイライトは無視します。コードブロック、インラインコード、生の HTML、
|
|
40
|
-
フロントマターの内部は変更しません。
|
|
41
|
-
|
|
42
|
-
## オプション
|
|
43
|
-
|
|
44
|
-
| 項目 | 型 | 既定値 | 説明 |
|
|
45
|
-
| --- | --- | --- | --- |
|
|
46
|
-
| `className` | `string` | `"rb-highlight"` | 生成する要素に付ける CSS クラス |
|
|
47
|
-
| `tag` | `string` | `"mark"` | ハイライトに使う HTML タグ |
|
|
48
|
-
|
|
49
|
-
```ts
|
|
50
|
-
highlight({ className: "my-highlight", tag: "span" });
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## スタイル
|
|
54
|
-
|
|
55
|
-
このパッケージは `style.css` を同梱し、
|
|
56
|
-
`@riebeckite/plugin-highlight/style.css` として公開します。既定のルールは
|
|
57
|
-
`.rb-highlight` に控えめなアクセント背景を付け、テーマ変数
|
|
58
|
-
`--rb-color-accent` があればそれを使います。
|
|
59
|
-
|
|
60
|
-
```css
|
|
61
|
-
.rb-highlight {
|
|
62
|
-
--rb-highlight-accent: var(--rb-color-accent, #f6d365);
|
|
63
|
-
padding: 0.05em 0.25em;
|
|
64
|
-
border-radius: 0.2em;
|
|
65
|
-
background: color-mix(in srgb, var(--rb-highlight-accent) 45%, transparent);
|
|
66
|
-
color: inherit;
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
プラグインはスタイルアセットを登録するため、ホスト側のサイトはこの
|
|
71
|
-
スタイルシートを自動的に取り込みます。見た目を変えたい場合はクラスを指定する
|
|
72
|
-
か、独自の CSS で上書きしてください。
|
|
73
|
-
|
|
74
|
-
## 制限
|
|
75
|
-
|
|
76
|
-
- ハイライトは複数のテキストノードや行をまたげません。`==` で他の Markdown
|
|
77
|
-
(リンク、強調、コード) や改行を囲むことはできません。
|
|
78
|
-
- 入れ子のハイライトには対応しません。最も内側の `==` の組が優先されます。
|
|
79
|
-
- 生の HTML を出力するため、パイプラインで生 HTML の出力を有効にする必要が
|
|
80
|
-
あります(Riebeckite の既定パイプラインでは有効です)。
|
|
81
|
-
|
|
82
|
-
## 主なエクスポート
|
|
83
|
-
|
|
84
|
-
- `highlight(options?)`: プラグインを作成する
|
|
85
|
-
- `highlightPlugin`: `highlight` の別名
|
|
86
|
-
- `remarkHighlight(options?)`: 内部の remark トランスフォーマー
|
|
87
|
-
- 型: `HighlightOptions`
|
|
88
|
-
|
|
89
|
-
## 関連資料
|
|
90
|
-
|
|
91
|
-
- [プラグインガイド](../../../docs/ja/plugin-
|
|
1
|
+
# @riebeckite/plugin-highlight
|
|
2
|
+
|
|
3
|
+
`==ハイライト==` を `<mark>` 要素として表示するプラグインです。Markdown の
|
|
4
|
+
テキストノードをビルド時に書き換えます。
|
|
5
|
+
|
|
6
|
+
[English](./README.md)
|
|
7
|
+
|
|
8
|
+
## 概要
|
|
9
|
+
|
|
10
|
+
`highlight()` は、Markdown のテキストノードにある `==テキスト==` を HTML に
|
|
11
|
+
変換する前に生の HTML へ置き換える remark トランスフォーマーを登録します。
|
|
12
|
+
`~~打ち消し線~~` だけを扱う `remark-gfm` を補完します。
|
|
13
|
+
|
|
14
|
+
## 設定する
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import { defineConfig } from "@riebeckite/core";
|
|
18
|
+
import { highlight } from "@riebeckite/plugin-highlight";
|
|
19
|
+
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
// ...
|
|
22
|
+
plugins: [highlight()],
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 構文
|
|
27
|
+
|
|
28
|
+
```md
|
|
29
|
+
この文には ==ハイライトする語句== が含まれます。
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
出力:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
この文には <mark class="rb-highlight">ハイライトする語句</mark> が含まれます。
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
ハイライトは非貪欲に一致し、改行をまたぎません。空、または空白だけの
|
|
39
|
+
ハイライトは無視します。コードブロック、インラインコード、生の HTML、
|
|
40
|
+
フロントマターの内部は変更しません。
|
|
41
|
+
|
|
42
|
+
## オプション
|
|
43
|
+
|
|
44
|
+
| 項目 | 型 | 既定値 | 説明 |
|
|
45
|
+
| --- | --- | --- | --- |
|
|
46
|
+
| `className` | `string` | `"rb-highlight"` | 生成する要素に付ける CSS クラス |
|
|
47
|
+
| `tag` | `string` | `"mark"` | ハイライトに使う HTML タグ |
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
highlight({ className: "my-highlight", tag: "span" });
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## スタイル
|
|
54
|
+
|
|
55
|
+
このパッケージは `style.css` を同梱し、
|
|
56
|
+
`@riebeckite/plugin-highlight/style.css` として公開します。既定のルールは
|
|
57
|
+
`.rb-highlight` に控えめなアクセント背景を付け、テーマ変数
|
|
58
|
+
`--rb-color-accent` があればそれを使います。
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
.rb-highlight {
|
|
62
|
+
--rb-highlight-accent: var(--rb-color-accent, #f6d365);
|
|
63
|
+
padding: 0.05em 0.25em;
|
|
64
|
+
border-radius: 0.2em;
|
|
65
|
+
background: color-mix(in srgb, var(--rb-highlight-accent) 45%, transparent);
|
|
66
|
+
color: inherit;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
プラグインはスタイルアセットを登録するため、ホスト側のサイトはこの
|
|
71
|
+
スタイルシートを自動的に取り込みます。見た目を変えたい場合はクラスを指定する
|
|
72
|
+
か、独自の CSS で上書きしてください。
|
|
73
|
+
|
|
74
|
+
## 制限
|
|
75
|
+
|
|
76
|
+
- ハイライトは複数のテキストノードや行をまたげません。`==` で他の Markdown
|
|
77
|
+
(リンク、強調、コード) や改行を囲むことはできません。
|
|
78
|
+
- 入れ子のハイライトには対応しません。最も内側の `==` の組が優先されます。
|
|
79
|
+
- 生の HTML を出力するため、パイプラインで生 HTML の出力を有効にする必要が
|
|
80
|
+
あります(Riebeckite の既定パイプラインでは有効です)。
|
|
81
|
+
|
|
82
|
+
## 主なエクスポート
|
|
83
|
+
|
|
84
|
+
- `highlight(options?)`: プラグインを作成する
|
|
85
|
+
- `highlightPlugin`: `highlight` の別名
|
|
86
|
+
- `remarkHighlight(options?)`: 内部の remark トランスフォーマー
|
|
87
|
+
- 型: `HighlightOptions`
|
|
88
|
+
|
|
89
|
+
## 関連資料
|
|
90
|
+
|
|
91
|
+
- [プラグインガイド](../../../docs/ja/reference/plugin-api.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-highlight",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@types/mdast": "^4.0.4",
|
|
19
19
|
"unist-util-visit": "^5.1.0",
|
|
20
|
-
"@riebeckite/core": "0.0.
|
|
20
|
+
"@riebeckite/core": "0.0.13"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"tsx": "^4.22.4",
|
|
24
|
-
"@riebeckite/test": "0.0.
|
|
24
|
+
"@riebeckite/test": "0.0.13"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|