Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mika-f/remark-text-decoration
remark-text-decoration is a remark plugin to add text decoration syntax.
https://github.com/mika-f/remark-text-decoration
Last synced: 4 days ago
JSON representation
remark-text-decoration is a remark plugin to add text decoration syntax.
- Host: GitHub
- URL: https://github.com/mika-f/remark-text-decoration
- Owner: mika-f
- License: mit
- Created: 2023-10-08T14:06:17.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-08T18:47:27.000Z (about 1 year ago)
- Last Synced: 2024-05-02T02:21:29.238Z (7 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@natsuneko-laboratory/remark-text-decoration
- Size: 53.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @natsuneko-laboratory/remark-text-decoration
[remark-text-decoration](https://www.npmjs.com/package/@natsuneko-laboratory/remark-text-decoration) is a remark plugin to add text decoration syntax.
## Installation
```bash
$ yarn add @natsuneko-laboratory/remark-text-decoration
```
## Usage
Add `@natsuneko-laboratory/remark-text-decoration` to your remark plugins.
```typescript
import remark from "remark";
import RemarkTextDecoration from "@natsuneko-laboratory/remark-text-decoration";
const result = await remark()
.use(RemarkTextDecoration, {
marker: "==",
markerWithOptions: "=",
markerClassName: undefined,
markerTag: "mark",
markerProperties: (options) => {
return {
color: options ? `#${options}` : "yellow",
};
},
})
.process("==Hello==, =cccccc=World==");
// result is
// Hello, World
```
## Options
All options are described as follows:
```typescript
type TextDecorationOptions = {
marker?: string;
markerWithOptions?: string;
markedAcceptedOptionsPattern?: string;
markerTag?: string;
markerClassNames?:
| ((options: string) => string | undefined)
| string
| undefined;
markerProperties?:
| ((options: string) => Record | undefined)
| Record
| undefined;
};
```
### `marker`
A marker to decorate text.
### `markerWithOptions`
A marker to decorate text with options. If you want to decorate text with options, you should use this marker.
For example, if you want to decorate text with arguments, you can use this marker like `={some args here}=Hello`.
### `markedAcceptedOptionsPattern`
A pattern to accept options. If you want to accept options, you should use this option.
For example, if you want to accept options like `={some args here}=Hello`, you can use this option like `markedAcceptedOptionsPattern: "some args here"`.
This value is used as `new RegExp(markedAcceptedOptionsPattern, "g")`, so you must use a valid regular expression.
### `markerTag`
A tag name to decorate text. If you want to decorate text with tag name, you should use this option.
For example, if you want to decorate text with tag name, you can use this option like `markerTag: "span"`.
### `markerClassName`
A class name to decorate text. If you want to decorate text with class name, you should use this option.
For example, if you want to decorate text with class name, you can use this option like `markerClassName: "some-class-name"`.
If you want to decorate text with arguments, you can use this option like `markerClassName: (options) => options ? "some-class-name" : "another-class-name"`.
### `markerProperties`
A properties to decorate text. If you want to decorate text with properties, you should use this option.
For example, if you want to decorate text with properties, you can use this option like ``markerProperties: (options) => { return { color: options ? `#${options}` : "yellow" } }``.
## License
MIT by [@6jz](https://twitter.com/6jz)