freesewing/markdown/dev/reference/packages/rehype-jargon/en.md

title
rehype-jargon

Published as @freesewing/rehype-jargon, this package provides a Rehype plugin for adding HTML markup for jargon terms. It allows you to use jargon in your markdown/mdx/html content and use a centrally managed file of jargon terms and their definitions.

Installation

npm install @freesewing/rehype-jargon

Usage

In file jargon.mjs:

export const jargon = {
  term: '<b>term</b> has this description',
  term2: 'A <i>differenti</i> description',
}

In NodeJS:

import rehypeJargon from @freesewing/rehype-jargon
import { jargon } from './jargon.mjs'

...
   rehypePlugins: [
     [rehypeJargon, { jargon: jargon }],
   ],

Example

Here is an example of jargon in markdown.

Configuration

Property	Type	Default	Description
jargon	Object		Key/Value pairs where the key is a jargon term and the value is the jargon description. The description is a string that can contain HTML tags. Required.
transform	Function	(see below)	Given the jargon term and description, returns a string with the final HTML to output.

Default transform function

The default transform function is:

(term, html) =>
   `<span class="jargon-term">${term}<span class="jargon-info">${html}</span></span>`

The default transform function applies these CSS classes:

• jargon-term is applied to jargon terms
• jargon-info is applied to jargon descriptions

You can style your jargon by adding styles to these CSS classes.

Notes

• Markup will be added to jargon only if the terms are emphasized.

• Keys should be in all lowercase characters in the jargon file. This is because terms are converted to lowercase before they are matched against the jargon file.

• How terms are capitalized does not matter, for the same reason.

• If you use HTML in your jargon descriptions, use only inline elements such as adding bold/italic formatting and inserting links.

Please see Using Jargon for information about how Jargon is used in the FreeSewing websites.