Bylight Example

Basic Usage

Bylight allows you highlight code using special links in nearby text. Here's how it works:

1. Create a link with the bylight: protocol.
2. Specify what to highlight using either:
   • The link text itself, or
   • The match parameter in the URL.
3. Optionally, use the in parameter to target specific pre elements.

Let's see it in action with a simple rhyme:

Roses are red, violets are blue,
Bylight makes highlighting easy for you!
    

• Highlight Roses (using link text, and specifying color=red)
• Highlight violets (using match=violets parameter)
• Highlight rhyming words (multiple patterns, match=blue,you )
• Highlight a phrase (using wildcards, match=Bylight...highlighting)

In these examples, we use the in parameter to specify which pre element to target. The value in=-1 tells Bylight to look in the nearest preceding pre element relative to the link. Positive values target elements after the link, while negative values target elements before it.

Multiple Patterns

The match param accepts multiple patterns, seperated by commas. See the rhyme and alliteration below, achieved via match=fries,disguise and match=Pickles,pizza respectively.

Pickles on pizza, ice cream on fries,
Else clauses on Tuesdays, if blocks in disguise!

Regex Pattern

Here's an example using the regex pattern match=/const\s\w%2B/ to match const declarations. Note that one must URL-encode the regex, so + is written %2B.

const PI = 3.14159;
const MAX_SIZE = 100;
let variable = "This won't be highlighted";
const COLORS = ['red', 'green', 'blue'];

Color Scheme

Aa aA #59a14f, Bb bB #b82efe, Cc cC #007bfe, Dd dD #f28e2c, Ee eE #ff4245, Ff fF #7c2d00, Gg gG #76b7b2, Hh hH #d4af37, Ii iI #ff9da7, Jj jJ #6a6a6a

Aa aA Bb bB Cc cC Dd dD Ee eE Ff fF Gg gG Hh hH Ii iI Jj jJ

One can override the color scheme by passing a list of color strings as a colorScheme option.

Directional Highlighting

Use the in and dir query parameters to specify which pre elements to match, relative to the link.

By default, a link will target the next `pre` below it on the page. This is the same as specifying in=1.

A B C D E 1 2 3 4 5

A B C D E 1 2 3 4 5

A B C D E 1 2 3 4 5

Examples:

• match=A&in=-3
• match=B&in=-2
• match=C&in=-1

The in parameter can also be positive to target pre elements below the link:

• match=D&in=1
• match=D&in=2
• match=D&in=3

A B C D E 1 2 3 4 5

A B C D E 1 2 3 4 5

A B C D E 1 2 3 4 5

Use the dir parameter to select all matches down from a link:

• match=E&dir=down

A B C D E 1 2 3 4 5

A B C D E 1 2 3 4 5

Programmatic Highlighting

bylight.highlight("#example-1", [
  "Dots,dashes",
  "swirls,lines",
  "Stripes,zebras",
  {match: "spots,cats", color: "black"}
]);

    Dots and dashes, swirls and lines,
    Playful shapes in fun designs.
    Stripes on zebras, spots on cats,
    Ripples in streams, and that is that!

Installation and Usage

Install Bylight using npm:

npm install bylight

Bylight supports multiple import methods:

1. ES Modules

    import bylight from 'bylight';
    import 'bylight/styles';

    bylight();
    

2. CommonJS

    const bylight = require('bylight');
    require('bylight/styles');

    bylight();
    

3. Browser (IIFE)

Include the script and CSS in your HTML:

    <script src="https://unpkg.com/bylight/dist/index.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bylight/styles/bylight.css">

    <script>
      bylight();
    </script>