Marka-js NPM | npm.io

marka-js

npm.io

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:

And pre-defined recognized file extensions:

pdf
txt
csv
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
}