@natsuneko-laboratory/remark-text-decoration
v0.1.1
Published
remark plugin to decorate text with markdown
Downloads
5,144
Readme
@natsuneko-laboratory/remark-text-decoration
remark-text-decoration is a remark plugin to add text decoration syntax.
Installation
$ yarn add @natsuneko-laboratory/remark-text-decoration
Usage
Add @natsuneko-laboratory/remark-text-decoration
to your remark plugins.
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
// <mark style="color:yellow">Hello</mark>, <mark style="color:#cccccc">World</mark>
Options
All options are described as follows:
type TextDecorationOptions = {
marker?: string;
markerWithOptions?: string;
markedAcceptedOptionsPattern?: string;
markerTag?: string;
markerClassNames?:
| ((options: string) => string | undefined)
| string
| undefined;
markerProperties?:
| ((options: string) => Record<string, string> | undefined)
| Record<string, string>
| 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