gatsby-remark-acronyms

Gatsby Remark plugin to show description tooltips for acronyms found in text.

Installation

npm install --save gatsby-remark-acronyms

or

yarn add gatsby-remark-acronyms

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-acronyms`,
          options: {
            acronyms: {
              CSS: `Cascading Style Sheets`,
              HTML: `Hypertext Markup Language`,
            },
          },
        },
      ],
    },
  },
];

Options

| Name | Default | Description | | ---------- | ------- | --------------------------------------------------------------- | | acronyms | | Object containing keys for acronyms and values for descriptions |

Usage in Markdown

My site uses HTML and CSS!

Given the configuration presented above and this small markdown snippet, the rendered HTML output would be:

<p>My site uses <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>!</p>

Styling

Just globally style the abbr element as you would any other element through a style sheet.

If you are using the plugin with MDX, you can use MDXProvider to completely control how the abbr element should be rendered:

// src/App.js
import React from 'react';
import { MDXProvider } from '@mdx-js/react';

const Acronym = (props) => <abbr style={{ color: 'green' }} {...props} />;

const components = {
  abbr: Acronym,
};

export default (props) => (
  <MDXProvider components={components}>
    <main {...props} />
  </MDXProvider>
);

License

MIT