Skip to content

Commit 76d71d8

Browse files
committed
docs: document glossary case sensitivity and accordion options
1 parent 943680c commit 76d71d8

4 files changed

Lines changed: 185 additions & 86 deletions

File tree

‎docs/plugins/glossary/index.md‎

Lines changed: 100 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Hover over the dotted-underlined words in this paragraph. Every push to `main` r
2020
npm install --save-dev markdown-it-glossary
2121
```
2222

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+
2325
## Use
2426

2527
```ts
@@ -38,7 +40,27 @@ export default defineConfig({
3840
});
3941
```
4042

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`:
48+
49+
```ts
50+
// .vitepress/config.mts
51+
import { withGlossary } from 'markdown-it-glossary/vitepress';
52+
53+
export default withGlossary(
54+
defineConfig({
55+
// ...your normal config
56+
}),
57+
{ file: path.resolve(import.meta.dirname, '../glossary.md') },
58+
);
59+
```
60+
61+
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' })`.
4264

4365
### Hover, click and tap
4466

@@ -67,7 +89,7 @@ export default {
6789
| `touchOnly` | `false` | Respond to touch input only, leaving mouse users the native tooltip. |
6890
| `injectStyles` | `true` | Inject the default popover styles. `false` lets you style `.glossary-popover`. |
6991

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.
7193

7294
## Writing the glossary file
7395

@@ -83,9 +105,54 @@ Continuous Integration: automatically building and testing every change before i
83105
The block of YAML at the very top of a Markdown file that holds page settings.
84106
```
85107

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).
87110
- A comma-separated heading defines aliases: `### frontmatter, front matter` tooltips both spellings. Try it: frontmatter, front matter.
88111
- 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:
117+
118+
| Where | Setting | Applies to |
119+
| ---------------------------- | ------------------------------- | ------------------------------------- |
120+
| 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.
89156

90157
## Section glossaries
91158

@@ -109,9 +176,9 @@ docs/
109176
└─ team-b/index.md
110177
```
111178

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/).
113180

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.
115182

116183
### Which definition wins
117184

@@ -137,7 +204,7 @@ glossary:
137204
---
138205
```
139206

140-
Use `local: false` to skip all section glossaries and 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.
141208

142209
## Opt a page out
143210

@@ -163,7 +230,7 @@ We cut a release every sprint, and each one is gated on CI passing.
163230
*[CI]: Continuous Integration, only this page's definition applies.
164231
```
165232

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.
167234

168235
### Override one term on one page
169236

@@ -175,16 +242,33 @@ The same syntax works on a page that has _not_ opted out. A page-local definitio
175242

176243
## Options
177244

178-
| Option | Default | Description |
179-
| ---------------- | --------------- | ---------------------------------------------------------------------------- |
180-
| `file` | none | Path to a glossary Markdown file. Give this or `entries`. |
181-
| `entries` | none | Pre-parsed entries, for sourcing terms from somewhere else. |
182-
| `headingLevel` | `3` | Heading level that marks a term. |
183-
| `frontmatterKey` | `'glossary'` | Frontmatter key for the opt-out. `false` disables it. |
184-
| `root` | none | Docs folder. Enables section glossaries found below it. |
185-
| `scopedFile` | `'glossary.md'` | File name that marks a section glossary. |
186-
| `scopes` | `[]` | Section glossaries declared explicitly (`dir`, `file` or `entries`, `site`). |
245+
The same options work for `glossaryAbbr(md, options)` and `withGlossary(config, options)`.
246+
247+
| Option | Default | Description |
248+
| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------- |
249+
| `file` | none | Path to a glossary Markdown file. Give this or `entries`. |
250+
| `entries` | none | Pre-parsed entries, for sourcing terms from somewhere else. |
251+
| `headingLevel` | `3` | Heading level that marks a term. |
252+
| `frontmatterKey` | `'glossary'` | Frontmatter key for the opt-out. `false` disables it. |
253+
| `caseSensitive` | `false` | Match terms only in their exact case. The site-wide default; see [Case sensitivity](#case-sensitivity). |
254+
| `root` | none | Docs folder. Enables section glossaries found below it. |
255+
| `scopedFile` | `'glossary.md'` | File name that marks a section glossary. |
256+
| `scopes` | `[]` | Section glossaries declared explicitly (`dir`, `file` or `entries`, `site`, `caseSensitive`). |
257+
258+
### Frontmatter keys
259+
260+
| Key | Where | Values |
261+
| ------------------------- | ------------------------- | ---------------------------------------------------- |
262+
| `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
187269

188270
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.
189271

272+
The full README also covers the exported parser API, for sourcing terms from somewhere other than one Markdown file.
273+
190274
[Source and full README on GitHub](https://github.com/binarynoir/markdown-it-glossary)

‎docs/plugins/sidebar-accordion.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,20 @@ export default defineConfig({
7878

7979
Groups without `collapsed` are always open, and the accordion leaves them alone.
8080

81+
### Options
82+
83+
`useSidebarAccordion()` takes an options object:
84+
85+
| Option | Default | What it does |
86+
| ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
87+
| `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+
8195
### With Auto Sidebar
8296

8397
[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
107121
| ---------------------------- | ---------------------------------------------------------------------- |
108122
| `handleSidebarClick(event)` | The capture-phase click handler `useSidebarAccordion` adds. |
109123
| `keepActiveBranchOnly(root)` | Opens the current page's branch and closes the rest. |
124+
| `openActiveBranch(root)` | Opens the current page's branch and leaves the rest as they are. |
110125
| `closeOpenSiblings(item)` | Closes the open groups beside `item`, and any open groups inside them. |
111126
| `getSiblingItems(item)` | The sidebar items at the same level as `item`. |
112127
| `toggleGroup(group)` | Opens or closes a group by clicking its caret. |

0 commit comments

Comments
 (0)