marka-js
v0.3.4
Published
![](https://badgen.net/jsdelivr/v/npm/marka-js)
Downloads
36
Readme
marka-js
Marka is a JavaScript lib that runs in the browser, it will mark anchor elements and add icons according to the href. It is inspired by https://beepb00p.xyz and anchorjs.
See the demo on vercel.
It has some pre-defined recognized sites:
- github.com
- gitlab.com
- wikipedia.org
- stackoverflow.com
- youtube.com
- facebook.com
- google.com
- twitter.com
- medium.com
- zhihu.com
- douban.com
- music.163.com
And pre-defined recognized file extensions:
You can also add your own rules, see the #Usage section.
Install
Import style and script to your html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/marka-js/dist/marka.css" />
<script src="https://cdn.jsdelivr.net/npm/marka-js/dist/marka-js.umd.min.js"></script>
You can also add an onload
callback as below and marka will inspect default imageBaseDir
by script's src.
<script src="https://cdn.jsdelivr.net/npm/marka-js/dist/marka-js.umd.min.js" onload="marka.onScriptLoaded(this)"></script>
Usage
marka.init(MarkaOptions)
example:
window.addEventListener('DOMContentLoaded', function() {
marka.init({
container: 'body',
imageBaseDir: 'https://cdn.jsdelivr.net/npm/marka-js/dist/images',
extraRules: [
{ type: 'miniflux', hostPattern: /miniflux\.app/, imagePath: 'https://raw.githubusercontent.com/miniflux/logo/master/icon.svg' },
{ type: 'tex', pathPattern: /\.tex$/, imagePath: 'https://raw.githubusercontent.com/primer/octicons/master/icons/file-code-16.svg' },
]
})
})
MarkaOptions:
All fields are optional.
| Name | Type | Description |
|-----------|--------|----------------------------------------------------------------------------|
| container | string
or HTMLElement
| marka container, marking will only affect elements inside it |
| imageBaseDir | string
| Base directory for images, default is ./images
|
| ignore | (ele: Element, rule: MarkaRule): boolean
| If returned true
, the element will be ignored |
| rules | MarkaRule[]
| rules used to match anchor elements |
| extraRules | MarkaRule[]
| extra rules besides default rules |
MarkaRule
A rule for matching and generating css rule for anchor elements.
type MarkaRule = {
/** a regex pattern to match against url pathname */
pathPattern?: RegExp
/** a regex pattern to match against url host */
hostPattern?: RegExp
/** will affect generated css selector, e.g. 'github'/'twitter' */
type: string
/** the url of image, e.g. 'https://cdn.jsdelivr.net/npm/marka-js/dist/images/github.svg' */
imagePath?: string
}
Customize styles
Override css variables:
body {
--marka-link-color: purple;
}