![FreeSewing](https://static.freesewing.org/banner.png)

rehype-jargon on NPM License: MIT Code quality on DeepScan Open issues tagged pkg:rehype-jargon All Contributors

Follow @freesewing_org on Twitter Chat with us on Discord Become a FreeSewing Patron Follow @freesewing_org on Twitter

# rehype-jargon A Rehype plugin for jargon terms ## About This [Rehype](https://github.com/rehypejs/rehype) plugin allows you to use _jargon_ in your markdown/mdx/html content and use a centrally managed file of jargon terms and their definitions. ![An example of this plugin being used on freesewing.org](example.png) ## Install To install this plugin, run: ``` npm install --save rehype-jargon ``` ## Getting started > **Tip**: See https://github.com/joostdecock/rehype-jargon-example for a minimal repository that uses this plugin ### Create your jargon file This plugin requires a _jargon file_ with terms defenitions. For example: ```js export const jargon = { rehype: "rehype is a tool that transforms HTML with plugins. These plugins can inspect and change the HTML. You can use rehype on the server, the client, CLIs, deno, etc.", freesewing: "FreeSewing is an open source platform for made-to-measure sewing patterns. See freesewing.org" } ``` ### Import the plugin Now import the plugin, and pass it your jargon: ```js var remark = require('remark') var html = require('remark-html') var plugin = require('remark-jargon') var jargon = require('./jargon.js') remark() .use(html) .use(plugin, { jargon: jargon }) .process('This is a plugin for _remark_ originally written for _freesewing_.', function (err, file) { console.log(String(file)) }) ``` > **Note** > > This plugin will only add markup to your jargon if you _emphasize_ it. ### Style your jargon You will need to add CSS to style your jargon properly, and hide the definition by default. Below is an example to get you started: ```css // Add a dashed line under jargon terms .jargon-term { text-decoration: underline dotted #228be6 } // Add a question mark behind/above jargon terms .jargon-term::after { content: "?"; font-weight: bold; display: inline-block; transform: translate(0, -0.5em); font-size: 75%; color: #228be6; margin-left: 3px; } // Hover behavior for the therm itself .jargon-term:hover { position: relative; text-decoration: none; cursor: help; } // Hide info by default .jargon-term .jargon-info { display: none } // Show info on hover .jargon-term:hover .jargon-info { display: block; position: absolute; top: 1.5em; left: 0; background: #F8F8F8; border: 1px solid #DCDCDC; padding: 1rem; border-radius: 4px; font-size: 90%; min-width: 250px; max-width: 450px; z-index: 1; } ``` ## Tips for using jargon ### Lowercase your terms in the jargon file When looking for terms to match, we lowercase the term your emphazised. So in the jargon file, you should use `msf`, but in your text, you can use `MSF`, `Msf`, or `msf`. ### If you use HTML, only use inline elements Your jargon term definition can contain HTML, but only inline elements. Typically, you will want to stick to: - Making things **bold** - Inserting [links](#) ## Getting help This plugin is written by/for [FreeSewing](https://github.com/freesewing). For help or feedback, please stop by [the FreeSewing chat room](https://gitter.im/freesewing/development) or [create an issue](https://github.com/freesewing/freesewing/issues/new). ## Use with Gatsby Please see [gatsby-remark-jargon](https://github.com/freesewing/freesewing/tree/develop/packages/gatsby-remark-jargon) for info and instructions on how to use this plugin with [Gatsby](https://www.gatsbyjs.org/). > #### Note: Version 3 is a work in progress > > We are working on a new major version (v3) but it is not ready for prime-time. > For production use, please refer to our v2 packages (the `latest` on NPM) > or [the `v2` branch in our monorepo](https://github.com/freesewing/freesewing/tree/v2). > > We the `main` branch and `next` packages on NPM holds v3 code. But it's alpha for now. ## What am I looking at? πŸ€” This repository is our *monorepo* holding all our NPM designs, plugins, other NPM packages, and (web)sites. This folder holds: rehype-jargon If you're not entirely sure what to do or how to start, type this command: ``` npm run tips ``` > If you don't want to set up a dev environment, you can run it in your browser: > > [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/freesewing/freesewing) > > We recommend that you fork our repository and then > put `gitpod.io/# to start up a browser-based dev environment of your own. ## About FreeSewing πŸ’€ Where the world of makers and developers collide, that's where you'll find FreeSewing. If you're a maker, checkout [freesewing.org](https://freesewing.org/) where you can generate our sewing patterns adapted to your measurements. If you're a developer, our documentation is on [freesewing.dev](https://freesewing.dev/). Our [core library](https://freesewing.dev/reference/api/) is a *batteries-included* toolbox for parametric design of sewing patterns. But we also provide a range of [plugins](https://freesewing.dev/reference/plugins/) that further extend the functionality of the platform. If you have NodeJS installed, you can try it right now by running: ```bash npx create-freesewing-pattern ``` Or, consult our getting started guides for [Linux](https://freesewing.dev/tutorials/getting-started-linux/), [MacOS](https://freesewing.dev/tutorials/getting-started-mac/), or [Windows](https://freesewing.dev/tutorials/getting-started-windows/). We also have a [pattern design tutorial](https://freesewing.dev/tutorials/pattern-design/) that walks you through your first parametric design, and [a friendly community](https://freesewing.org/community/where/) with people who can help you when you get stuck. ## Support FreeSewing: Become a patron πŸ₯° FreeSewing is an open source project run by a community, and financially supported by our patrons. If you feel what we do is worthwhile, and you can spend a few coind without hardship, then you should [join us and become a patron](https://freesewing.org/community/join). ## Links πŸ‘©β€πŸ’» - πŸ’» Makers website: [freesewing.org](https://freesewing.org) - πŸ’» Developers website: [freesewing.dev](https://freesewing.dev) - πŸ’¬ Chat: On Discord via [discord.freesewing.org](https://discord.freesewing.org/) - βœ… Todo list/Kanban board: On Github via [todo.freesewing.org](https://todo.freesewing.org/) - 🐦 Twitter: [@freesewing_org](https://twitter.com/freesewing_org) - πŸ“· Instagram: [@freesewing_org](https://instagram.com/freesewing_org) ## License: MIT πŸ€“ Β© [Joost De Cock](https://github.com/joostdecock). See [the license file](https://github.com/freesewing/freesewing/blob/develop/LICENSE) for details. ## Where to get help 🀯 Our [chatrooms on Discord](https://chat.freesewing.org/) are the best place to ask questions, share your feedback, or just hang out. If you want to report a problem, please [create an issue](https://github.com/freesewing/freesewing/issues/new). ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Adam Tomkins
Adam Tomkins

πŸ“–
Alexandre Ignjatovic
Alexandre Ignjatovic

πŸ’»
AlfaLyr
AlfaLyr

πŸ’» πŸ”Œ 🎨
Andrew James
Andrew James

πŸ“–
Anneke
Anneke

πŸ“– 🌍
Annie Kao
Annie Kao

πŸ“–
Anternative
Anternative

πŸ“–
Anthony
Anthony

πŸ’¬
Ari Grayzel-student
Ari Grayzel-student

πŸ’»
Bart
Bart

πŸ“–
BenJamesBen
BenJamesBen

πŸ’» πŸ“– πŸ›
Cameron Dubas
Cameron Dubas

πŸ“–
Carsten Biebricher
Carsten Biebricher

πŸ“–
Cathy Zoller
Cathy Zoller

πŸ“–
Chantal Lapointe
Chantal Lapointe

🌍
Damien PIQUET
Damien PIQUET

πŸ’»
Darigov Research
Darigov Research

πŸ“– πŸ€”
Elena FdR
Elena FdR

πŸ“– πŸ“
Emmanuel Nyachoke
Emmanuel Nyachoke

πŸ’» πŸ“–
Enoch Riese
Enoch Riese

πŸ’»
EvEkSwed
EvEkSwed

🌍
Fantastik-Maman
Fantastik-Maman

🌍
Forrest O.
Forrest O.

πŸ“–
FrΓ©dΓ©ric
FrΓ©dΓ©ric

🌍
Glenn Matthews
Glenn Matthews

πŸ“–
Greg Sadetsky
Greg Sadetsky

πŸ“–
Igor Couto
Igor Couto

πŸ›
Ikko Ashimine
Ikko Ashimine

πŸ“–
Irapeke
Irapeke

🌍
Jacek Sawoszczuk
Jacek Sawoszczuk

πŸ“–
Jason Williams
Jason Williams

πŸ“–
Jeremy Jackson
Jeremy Jackson

πŸ’»
Jeroen Hoek
Jeroen Hoek

πŸ“–
Joe Schofield
Joe Schofield

πŸ“–
Joebidido
Joebidido

🌍
Joost De Cock
Joost De Cock

🚧
Josh Essman
Josh Essman

πŸ“–
Kake
Kake

πŸ“–
Kapunahele Wong
Kapunahele Wong

πŸ“–
Karen
Karen

πŸ“– πŸ“‹
Katie McGinley
Katie McGinley

πŸ“–
Kieran Klaassen
Kieran Klaassen

πŸ’»
Kittycatou
Kittycatou

🌍
Kris
Kris

πŸ“–
Kristin Ruben
Kristin Ruben

πŸ’»
Loudepeuter
Loudepeuter

🌍
Lucian
Lucian

πŸ“‹
MA-TATAS
MA-TATAS

πŸ“–
Marcus
Marcus

🌍
Martin Tribo
Martin Tribo

πŸ“–
Nadege Michel
Nadege Michel

⚠️ πŸ“–
Natalia
Natalia

πŸ’» 🎨 πŸ“
Nathan Yergler
Nathan Yergler

πŸ“–
Nick Dower
Nick Dower

πŸ“– πŸ’» πŸ›
Nikhil Chelliah
Nikhil Chelliah

πŸ“–
OysteinHoiby
OysteinHoiby

πŸ’»
Patrick Forringer
Patrick Forringer

πŸ”Œ
Paul
Paul

πŸ“– πŸ“ 🌍
Phillip Thelen
Phillip Thelen

πŸ’»
Pixieish
Pixieish

πŸ“–
Prof. dr. Sorcha NΓ­ Dhubhghaill
Prof. dr. Sorcha NΓ­ Dhubhghaill

πŸ“–
Quentin FELIX
Quentin FELIX

πŸ’» 🎨
Rik Hekker
Rik Hekker

πŸ›
Sam Livingston-Gray
Sam Livingston-Gray

πŸ“–
Sanne
Sanne

πŸ’» πŸ“–
Sara Latorre
Sara Latorre

🌍
SeaZeeZee
SeaZeeZee

πŸ“– πŸ’»
SimonbJohnson
SimonbJohnson

πŸ›
SirCharlotte
SirCharlotte

🌍
Slylele
Slylele

πŸ“– 🌍
Soazillon
Soazillon

🌍
SoneaTheBest
SoneaTheBest

🌍
Stefan Sydow
Stefan Sydow

🌍 πŸ“– πŸ’»
TrΓ­ona
TrΓ­ona

πŸ“–
Unmutual
Unmutual

πŸ“–
Wouter van Wageningen
Wouter van Wageningen

πŸ’» 🎨 πŸ”§
amysews
amysews

πŸ“–
anna-puk
anna-puk

πŸ’»
beautifulsummermoon
beautifulsummermoon

🌍
berce
berce

πŸ“–
biou
biou

πŸ’»
bobgeorgethe3rd
bobgeorgethe3rd

πŸ’» πŸ“– 🎨
brmlyklr
brmlyklr

πŸ“–
chri5b
chri5b

πŸ’» ⚠️
dingcycle
dingcycle

🌍
drowned-in-books
drowned-in-books

πŸ’¬
econo202
econo202

πŸ“–
ericamattos
ericamattos

🌍
fightingrabbit
fightingrabbit

πŸ’»
gaylyndie
gaylyndie

πŸ“–
grimlokason
grimlokason

πŸ’»
hellgy
hellgy

🎨
jackseye
jackseye

πŸ“–
marckiesel
marckiesel

🌍
mergerg
mergerg

πŸ“–
mesil
mesil

πŸ›
starfetch
starfetch

πŸ’» πŸ“– 🌍 🎨
timorl
timorl

πŸ’»
ttimearl
ttimearl

πŸ–‹
tuesgloomsday
tuesgloomsday

πŸ“–
valadaptive
valadaptive

πŸ’»
viocky
viocky

🌍
woolishboy
woolishboy

πŸ’»
yc
yc

🌍
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!