Package Exports

gatsby-remark-acronyms

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-remark-acronyms) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gatsby-remark-acronyms

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

Installation

npm install --save gatsby-node-helpers

yarn add gatsby-node-helpers

How to use

// In your gatsby-config.js
plugins: [
  `gatsby-plugin-sharp`,
  {
    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 <acronym title="Hypertext Markup Language">HTML</acronym> and <acronym title="Cascading Style Sheets">CSS</acronym>!</p>

Styling

Just globally style the acronym 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 acronym element should be rendered:

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

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

const components = {
  acronym: Acronym,
};

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

License

MIT