Bedazzlr is a BABLR-powered client side syntax highlighter for the web. It goes beyond just making text colorful, though! Bedazzlr also provides semantic selection inside code blocks and makes it possible for the reader to explore the syntax tree embedded in a code example.

Bedazzlr use streaming parse output from BABLR to wrap spans of text in HTML node elements. Code examples are then styled using CSS.

Usage

We are using Bedazzlr to power the code examples in this docs site... like this one! Try clicking and dragging to trigger semantic selection.

import { highlightAll } from "bedazzlr";
import * as BMap from "@bablr/agast-helpers/b-map";
import { evaluateReturn } from "@bablr/agast-helpers/stream";

import cstml from "@bablr/language-en-cstml";
import esnext from "@bablr/language-en-esnext";
import json from "@bablr/language-en-json";

let { entry } = BMap;

let languages = BMap.from(
  entry(cstml.canonicalURL, cstml),
  entry(esnext.canonicalURL, esnext),
  entry(json.canonicalURL, json),
);

let highlightIterator = highlightAll(languages);

// Highlighting is async so that interaction is not blocked
evaluateReturn(highlightIterator);