1.2.1 • Published 1 year ago
gatsby-remark-acronyms v1.2.1
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
1.2.0
1 year ago
1.2.1
1 year ago
1.1.4
2 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.8
4 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.6-dev.1
5 years ago
1.0.6-dev.0
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago