You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 76d71d8
Browse filesBrowse the repository at this point in the historyBrowse files
@@ -20,6 +20,8 @@ Hover over the dotted-underlined words in this paragraph. Every push to `main` r
20
20
npm install --save-dev markdown-it-glossary
21
21
```
22
22
23
+
Needs Node 22 or later and markdown-it 15. VitePress 1 and 2 are both supported, and VitePress is optional: the plugin works with any markdown-it setup.
24
+
23
25
## Use
24
26
25
27
```ts
@@ -38,7 +40,27 @@ export default defineConfig({
38
40
});
39
41
```
40
42
41
-
Or wrap the config with `withGlossary` from `markdown-it-glossary/vitepress`. It plays nicely with other `withX()` wrappers.
43
+
Every page now tooltips every term in `glossary.md`. Ship that file as a normal page (add it to your nav) and it doubles as a browsable reference; it isn't a special page type.
44
+
45
+
### `withGlossary` shortcut
46
+
47
+
If you'd rather wrap your config than touch `markdown.config`, use `withGlossary`, the same idea as `withMermaid`:
It won't overwrite a `markdown.config` you already have, including one set by another `withX()` wrapper: it installs the glossary plugin, then calls whatever was already there.
62
+
63
+
It also works with plain markdown-it: `new MarkdownIt().use(glossaryAbbr, { file: 'glossary.md' })`.
42
64
43
65
### Hover, click and tap
44
66
@@ -67,7 +89,7 @@ export default {
67
89
|`touchOnly`|`false`| Respond to touch input only, leaving mouse users the native tooltip. |
68
90
|`injectStyles`|`true`| Inject the default popover styles. `false` lets you style `.glossary-popover`. |
69
91
70
-
The default look follows VitePress theme colors and can be overridden with the `--glossary-popover-bg`, `--glossary-popover-fg`, and `--glossary-popover-border` CSS variables. `enableGlossaryTooltips()` returns a function that removes its listeners.
92
+
Terms get a help (question mark) cursor for mouse users, which you can override in your own CSS. On touch screens they get a pointer cursor instead, which iOS Safari needs before it will deliver taps. The default look follows VitePress theme colors and can be overridden with the `--glossary-popover-bg`, `--glossary-popover-fg`, and `--glossary-popover-border` CSS variables. `enableGlossaryTooltips()` returns a function that removes its listeners.
71
93
72
94
## Writing the glossary file
73
95
@@ -83,9 +105,54 @@ Continuous Integration: automatically building and testing every change before i
83
105
The block of YAML at the very top of a Markdown file that holds page settings.
84
106
```
85
107
86
-
- Matching is exact-text and case-sensitive, and only applies to plain prose, never inline code.
108
+
- The definition becomes the tooltip text. Markdown formatting (bold, code, links) is stripped to plain text, so keep it to a sentence or two.
109
+
- Matching ignores case by default (`CI` also matches `ci`), matches whole words only, and only applies to plain prose, never inline code. To match exact case only, see [Case sensitivity](#case-sensitivity).
87
110
- A comma-separated heading defines aliases: `### frontmatter, front matter` tooltips both spellings. Try it: frontmatter, front matter.
88
111
- A heading with a parenthetical qualifier is parsed but never tooltipped, for words that mean something else elsewhere. The last term in [the glossary](/reference/glossary) does this with the word Pages.
112
+
- Headings inside fenced code blocks are ignored, so a glossary page can show example syntax without it becoming terms.
113
+
114
+
## Case sensitivity
115
+
116
+
Terms match regardless of case by default. Turn exact-case matching on or off at five levels. The closest setting to the term wins:
| Plugin options |`caseSensitive: true`| the whole site (the base default) |
121
+
| Master glossary frontmatter |`glossary-case-sensitive: true`| the whole site, overriding the option |
122
+
| Section glossary frontmatter |`glossary-case-sensitive: true`| that folder and every folder below it |
123
+
| Any page's frontmatter |`glossary-case-sensitive: true`| that page only |
124
+
| The term's heading |`### IT {.exact}`| that term, on every page |
125
+
126
+
Use `false` at any level to turn it back off from that point down. For example, a case-sensitive site with one section that ignores case again:
127
+
128
+
```md
129
+
---
130
+
# glossary.md (the master)
131
+
glossary-case-sensitive: true
132
+
---
133
+
```
134
+
135
+
```md
136
+
---
137
+
# team-a/glossary.md: team-a/ and below ignore case
138
+
glossary-case-sensitive: false
139
+
---
140
+
```
141
+
142
+
-**It follows folders, not terms.** The setting controls how every term on a page is matched, whichever glossary the term came from. A section glossary marked `glossary-scope: site` still only sets case sensitivity for its own folder.
143
+
-**Short acronyms can collide with ordinary words** when case is ignored: `IT` matches "it", `US` matches "us". Flag those terms `{.exact}`.
144
+
145
+
### Per-term flags
146
+
147
+
End a heading with `{.exact}` to match that term in exact case only, or `{.anycase}` to match any case, whatever the site, section or page says:
148
+
149
+
```md
150
+
### IT, Information Technology {.exact}
151
+
152
+
The team that runs our laptops and servers.
153
+
```
154
+
155
+
The flag covers the whole heading, aliases included. It combines with a custom anchor (`{#it .exact}`), and VitePress hides the block on the rendered glossary page. With `entries`, set `caseSensitive` on the entry instead.
89
156
90
157
## Section glossaries
91
158
@@ -109,9 +176,9 @@ docs/
109
176
└─ team-b/index.md
110
177
```
111
178
112
-
To use a different file name, set the `scopedFile` option. This site sets `scopedFile: 'section-glossary.md'` so that its own [Glossary](/reference/glossary) page, `reference/glossary.md`, is never mistaken for a section glossary. See it working on the [live section glossary demo](/plugins/glossary/section-demo/).
179
+
To use a different file name, set the `scopedFile` option, or list section glossaries explicitly with `scopes` (see the [README](https://github.com/binarynoir/markdown-it-glossary#readme)). This site sets `scopedFile: 'section-glossary.md'` so that its own [Glossary](/reference/glossary) page, `reference/glossary.md`, is never mistaken for a section glossary. See it working on the [live section glossary demo](/plugins/glossary/section-demo/).
113
180
114
-
To apply a section glossary to the whole site instead, set `glossary-scope: site` in that file's frontmatter. Section glossaries are found when the config loads, so adding or editing one needs a dev-server restart.
181
+
To apply a section glossary to the whole site instead, set `glossary-scope: site` in that file's frontmatter (`section` is the default). Section glossaries are found when the config loads, skipping `node_modules`, `dist` and folders that start with a dot like `.vitepress`, so adding or editing one needs a dev-server restart. The master glossary file is never mistaken for a section glossary.
115
182
116
183
### Which definition wins
117
184
@@ -137,7 +204,7 @@ glossary:
137
204
---
138
205
```
139
206
140
-
Use `local: false` to skip all section glossariesand keep the master. `glossary: false` still turns everything off.
207
+
Use `local: false` to skip all section glossaries, including site-wide ones from other folders, and keep the master. `glossary: false` still turns everything off. Page-local `*[Term]: …` definitions work in every case.
141
208
142
209
## Opt a page out
143
210
@@ -163,7 +230,7 @@ We cut a release every sprint, and each one is gated on CI passing.
163
230
*[CI]: Continuous Integration, only this page's definition applies.
164
231
```
165
232
166
-
Every exact, case-sensitive occurrence of `CI` on that page becomes an `<abbr title>`, and nothing else from the glossary does. The definition line itself isn't rendered. Use this to keep a few terms on an otherwise opted-out page, or to define terms that aren't in the glossary at all.
233
+
Every occurrence of `CI` on that page (in any case, unless the page is [case-sensitive](#case-sensitivity)) becomes an `<abbr title>`, and nothing else from the glossary does. The definition line itself isn't rendered. Use this to keep a few terms on an otherwise opted-out page, or to define terms that aren't in the glossary at all.
167
234
168
235
### Override one term on one page
169
236
@@ -175,16 +242,33 @@ The same syntax works on a page that has _not_ opted out. A page-local definitio
|`glossary`| any page |`false`, or `{ master: false }` / `{ local: false }`|
263
+
|`glossary-scope`| a section glossary |`section` (default) or `site`|
264
+
|`glossary-case-sensitive`| any glossary file or page |`true` or `false`|
265
+
266
+
On a term heading, `{.exact}` and `{.anycase}` set that term's case rule.
267
+
268
+
## Styling
187
269
188
270
The plugin itself emits plain `<abbr title>` tags and injects no CSS. This site adds a dotted underline in its theme so the terms are discoverable, and `enableGlossaryTooltips()` adds the popover and a help (question mark) cursor.
189
271
272
+
The full README also covers the exported parser API, for sourcing terms from somewhere other than one Markdown file.
273
+
190
274
[Source and full README on GitHub](https://github.com/binarynoir/markdown-it-glossary)
|`closeOthers`|`true`| Close the other groups at the same level when a group is opened, and the branches beside the current page's after navigating. |
88
+
89
+
Set `closeOthers: false` to let readers open and close groups one by one without the others closing. They can keep several groups open, or start with every group closed and open only the ones they want. After each navigation the current page's branch is still opened, but nothing else is closed.
90
+
91
+
```ts
92
+
useSidebarAccordion({ closeOthers: false });
93
+
```
94
+
81
95
### With Auto Sidebar
82
96
83
97
[Auto Sidebar](/plugins/auto-sidebar/) sets `collapsed` on every group it generates through its `collapsed` option. This site does exactly that:
@@ -107,6 +121,7 @@ It reads VitePress's own class names (`.VPSidebarItem`, `.collapsible`, `.collap
0 commit comments