link-styler
is a JavaScript package that helps you find links in text and replace them with a tag that has custom styling.
link
demo | issues |
Installation
You can install link-styler using npm:
npm install link-styler
Usage
Here is an example of how to use link-styler:
import { linkStyler } from 'link-styler';
linkStyler.start();
<script src="https://unpkg.com/link-styler/dist/link-styler.js"></script>
<script>
linkStyler.start();
</script>
This will output the following:
By default, link-styler will style the link with '#000000d9'
color and '#a9a9a94f'
background color by border radius 15px. It will also add an external link icon. You can customize the styling by passing options to the linkStyler function:
const options = {
bg: true,
bgColor: '#c7c7c7c2',
textColor: '#000000d9',
borderRadius: 15,
showIcon: true,
iconColor: true,
underline: false,
link: {
pathnameLengthLimit: 20,
},
atsign: {
enable: true,
path: 'https://www.linkedin.com/in/',
bg: false,
textColor: '#e31a1ad9',
showIcon: true,
underline: true,
},
hashTag: {
enable: true,
path: 'https://www.linkedin.com/feed/hashtag/?keywords=',
bg: false,
textColor: '#0250ffd9',
showIcon: true,
underline: false,
},
};
linkStyler.start(options);
Options
link-styler
accepts the following options:
Option | Default Value | Type | Optional | Description |
---|---|---|---|---|
bg | true |
boolean | * | - |
bgColor | '#a9a9a94f' |
string | * | - |
textColor | '#000000d9' |
string | * | - |
borderRadius | 15 |
number | * | - |
showIcon | true |
boolean | * | - |
iconColor | true |
boolean | * | - |
underline | false |
boolean | * | - |
link.pathnameLengthLimit | 20 |
number | * | - |
link.bg | boolean | * | - | |
link.bgColor | string | * | - | |
link.textColor | string | * | - | |
link.borderRadius | number | * | - | |
link.showIcon | boolean | * | - | |
link.iconColor | boolean | * | - | |
link.underline | boolean | * | - | |
atsign.path | '' |
string | * | - |
atsign.enable | true |
boolean | * | - |
atsign.bg | false |
boolean | * | - |
atsign.bgColor | string | * | - | |
atsign.textColor | '#e31a1ad9' |
string | * | - |
atsign.borderRadius | number | * | - | |
atsign.showIcon | false |
boolean | * | - |
atsign.iconColor | boolean | * | - | |
atsign.underline | true |
boolean | * | - |
atsign.removeAtsignChar | false |
boolean | * | - |
hashTag.enable | true |
boolean | * | - |
hashTag.path | '' |
string | * | - |
hashTag.bg | false |
boolean | * | - |
hashTag.bgColor | string | * | - | |
hashTag.textColor | '#0250ffd9' |
string | * | - |
hashTag.borderRadius | number | * | - | |
hashTag.showIcon | false |
boolean | * | - |
hashTag.iconColor | boolean | * | - | |
hashTag.underline | false |
boolean | * | - |
hashTag.removeHashTagChar | false |
boolean | * | - |
License
link-styler is licensed under the MIT License.