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:

• 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
}

Customize styles

Override css variables:

body {
  --marka-link-color: purple;
}