Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-remark-acronyms with all npm packages installed. Try it out:

require("gatsby/package.json"); // gatsby is a peer dependency. var gatsbyRemarkAcronyms = require("gatsby-remark-acronyms")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-remark-acronyms v1.1.0

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

gatsby-remark-acronyms

npm version

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

NameDefaultDescription
acronymsObject 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free