https://github.com/daneden/gatsby-remark-smallcaps
https://github.com/daneden/gatsby-remark-smallcaps
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/daneden/gatsby-remark-smallcaps
- Owner: daneden
- Created: 2019-08-04T14:01:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T06:44:47.000Z (over 3 years ago)
- Last Synced: 2025-10-10T10:30:39.422Z (8 months ago)
- Language: JavaScript
- Size: 117 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-remark-smallcaps
This Gatsby Remark plugin allows you to wrap strings of capital letters with a `span` to apply custom CSS.
Requires Gatsby and `gatsby-transformer-remark`.
## Installation and Usage
Install using `npm`:
```bash
npm install gatsby-transformer-remark gatsby-remark-smallcaps
```
or `yarn`:
```bash
yarn add gatsby-transformer-remark gatsby-remark-smallcaps
```
And add to your Gatsby config:
```js
// In gatsby-config.js
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: ["gatsby-remark-smallcaps"]
}
}
];
```
Or if you're using `gatsby-plugin-mdx`:
```js
// In gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [{ resolve: "gatsby-remark-smallcaps" }]
}
}
];
```
By default, the plugin will wrap capital strings in a span with a class name:
```jsx
// Input Markdown:
HTML and CSS
// Output:
HTML and CSS
```
You can apply CSS styles in a global stylesheet:
```css
.caps {
font-variant-caps: all-small-caps;
}
```
### Options
Currently the only configuration option is the class name used to wrap capital strings.
```js
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-smallcaps",
options: {
className: "caps" // Default value
}
}
]
}
}
];
```