https://github.com/pedrolamas/gatsby-remark-acronyms

:gear: Gatsby Remark plugin to show description tooltips for acronyms found in text
https://github.com/pedrolamas/gatsby-remark-acronyms

acronyms gatsby gatsby-plugin remark typescript

Last synced: 5 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/pedrolamas/gatsby-remark-acronyms
• Owner: pedrolamas
• License: mit
• Created: 2019-09-12T20:00:55.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-10T17:41:09.000Z (almost 2 years ago)
• Last Synced: 2025-05-21T22:53:16.396Z (5 months ago)
• Topics: acronyms, gatsby, gatsby-plugin, remark, typescript
• Language: TypeScript
• Homepage: https://www.gatsbyjs.org/packages/gatsby-remark-acronyms/
• Size: 572 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# gatsby-remark-acronyms

[![Project Maintenance](https://img.shields.io/maintenance/yes/2022.svg)](https://github.com/pedrolamas/gatsby-remark-acronyms 'GitHub Repository')

[![License](https://img.shields.io/github/license/pedrolamas/gatsby-remark-acronyms.svg)](https://github.com/pedrolamas/gatsby-remark-acronyms/blob/master/LICENSE 'License')

[![CI](https://github.com/pedrolamas/gatsby-remark-acronyms/workflows/CI/badge.svg)](https://github.com/pedrolamas/gatsby-remark-acronyms/actions 'Build Status')

[![npm version](https://img.shields.io/npm/v/gatsby-remark-acronyms)](https://www.npmjs.com/package/gatsby-remark-acronyms 'NPM package')

[![Twitter Follow](https://img.shields.io/twitter/follow/pedrolamas?style=social)](https://twitter.com/pedrolamas '@pedrolamas')

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

## Installation

```sh

npm install --save gatsby-remark-acronyms

```

or

```sh

yarn add gatsby-remark-acronyms

```

## How to use

```js

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

```text

My site uses HTML and CSS!

```

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

```html

My site uses HTML and CSS!

```


## 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](https://mdxjs.com/), you can use [MDXProvider](https://mdxjs.com/getting-started#mdxprovider) to completely control how the `abbr` element should be rendered:

```jsx

// src/App.js

import React from 'react';

import { MDXProvider } from '@mdx-js/react';

const Acronym = (props) => ;

const components = {

  abbr: Acronym,

};

export default (props) => (

  

    

  

);

```

## License

MIT