link-styler
Version:
JavaScript package that simplifies the task of identifying links within text and applying custom styling by automatically replacing them with tags.
102 lines (101 loc) • 3.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>link-styler example</title>
<script src="https://unpkg.com/link-styler/dist/link-styler.js"></script>
<!-- <script src="link-styler.js"></script> -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong"
/>
<style>
body {
font-family: 'Trirong', serif;
background-color: #5d5d5d;
}
.box {
width: 700px;
height: auto;
margin: auto;
background: #ffffff;
padding: 20px;
border-radius: 20px;
border: 1px solid #cfcece;
}
</style>
</head>
<body>
<div class="box">
<h1>link-styler</h1>
<p>
Welcome to Link Styler, a plugin designed to make links on your website
look more stylish and attractive. With Link Styler, you can customize
the appearance of links including background color, text color, and
border radius.
</p>
<p>
You can find Link Styler on npm by visiting
https://www.npmjs.com/package/link-styler . To learn more about Link
Styler and see examples of how it can enhance the appearance of links on
your website, please visit https://sheikhoo.github.io/link-styler/ .
</p>
<p>
If you would like to contribute to the development of Link Styler or
report any issues, you can find our source code and issue tracker on
https://github.com/sheikhoo/link-styler .
</p>
<p>Thank you for choosing Link Styler!</p>
</div>
<div class="box" style="margin-top: 5px">
<p>
Hi,we are CherikCoders(@Sheikhoo,@Behroz_Shafei) you can find our linkin
page here https://www.linkedin.com/company/cherikcoders
</p>
<p>
We have +5 years of experience in a variety of programming languages,
including #JAVA, #Springboot, #JavaScript, #Oracle, #MySQL, #React, and
more.
</p>
<p>
Can find project in https://github.com/cherikcoders or in our personal
github https://github.com/sheikhoo and https://github.com/BehrozShafei
</p>
</div>
<script>
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: false,
underline: true,
removeAtsignChar: false,
},
hashTag: {
enable: true,
path: 'https://www.linkedin.com/feed/hashtag/?keywords=',
bg: false,
textColor: '#0250ffd9',
showIcon: false,
underline: false,
removeHashTagChar: false,
},
};
linkStyler.start(options);
</script>
</body>
</html>