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.