Project Maintenance License

CI npm version

Twitter Follow

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


npm install --save gatsby-remark-acronyms


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`,


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>


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} />