diff --git a/packages/remark-jargon/info.md b/packages/remark-jargon/info.md index fb25cc73eef..c6b8d932844 100644 --- a/packages/remark-jargon/info.md +++ b/packages/remark-jargon/info.md @@ -5,5 +5,122 @@ markdown/mdx content and use a centrally managed file of jargon terms and their ![An example of this plugin being used on freesewing.org](example.png) +## Install + +To install this plugin, run: + +``` +npm install --save remark-jargon +``` + +## Getting started + +> **Tip**: See https://github.com/joostdecock/remark-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 +module.exports = { + remark: "remark is a markdown processor powered by plugins. See remark.js.org.", + 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 -more info and instructions. +info and instructions on how to use this plugin with [Gatsby](https://www.gatsbyjs.org/).