Example: Zebra Stripes
This example defines an extension that styles every Nth line with a background.
To style the stripes in a way that allows themes to override them, we start by defining a base theme. It styles the cm-zebraStripe class, with different backgrounds for light and dark base themes.
import EditorView> from "@codemirror/view" const baseTheme = EditorView.baseTheme( "&light .cm-zebraStripe": backgroundColor: "#d4fafa">, "&dark .cm-zebraStripe": backgroundColor: "#1a2727"> >) Next, as an excuse for including configuration functionality, we’ll allow the caller to configure the distance between the stripes. To store the configured distance in a way that is well-defined even if multiple instances of the extension are added, we’ll store it in a facet.
The facet takes any number of step values (input type number , the first type parameter), and takes their minimum, or 2 if no values were provided, as its value (output type, the second type parameter, also number ).
import Facet> from "@codemirror/state" const stepSize = Facet.definenumber, number>( combine: values => values.length ? Math.min(. values) : 2 >) We’ll export a single function, which returns the extension that installs the zebra stripe functionality.
Note that extension values can be individual extensions (such as facet values, created with the of method), or arrays, possibly nested, of extensions. Thus they can be easily composed into bigger extensions.
In this case, the function returns our base theme, a value for the stepSize facet, if a configuration was provided, and showStripes , the view plugin that actually adds the styling, which we’ll define in a moment.
import Extension> from "@codemirror/state" export function zebraStripes(options: step?: number> = >): Extension return [ baseTheme, options.step == null ? [] : stepSize.of(options.step), showStripes ] > First, this helper function, given a view, iterates over the visible lines, creating a line decoration for every Nth line.
The plugin will simply recompute its decorations every time something changes. Using a builder, this is not very expensive. In other cases, it can be preferable to preserve decorations (mapping them through document changes) across updates.
Note that, because facets are always available on every state, whether they have been added to that state or not, we can simply read the value of stepSize to get the appropriate step size. When no one configured it, it’ll have the value 2 (the result of calling its combine function with the empty array).
import Decoration> from "@codemirror/view" import RangeSetBuilder> from "@codemirror/state" const stripe = Decoration.line( attributes: class: "cm-zebraStripe"> >) function stripeDeco(view: EditorView) let step = view.state.facet(stepSize) let builder = new RangeSetBuilderDecoration>() for (let from, to> of view.visibleRanges) for (let pos = from; pos to;) let line = view.state.doc.lineAt(pos) if ((line.number % step) == 0) builder.add(line.from, line.from, stripe) pos = line.to + 1 > > return builder.finish() > The showStripes view plugin, then, only has to advertise that it provides decorations (the decorations option), and make sure its decorations property is recomputed when the document or the viewport changes.
import ViewPlugin, DecorationSet, ViewUpdate> from "@codemirror/view" const showStripes = ViewPlugin.fromClass(class decorations: DecorationSet constructor(view: EditorView) this.decorations = stripeDeco(view) > update(update: ViewUpdate) if (update.docChanged || update.viewportChanged) this.decorations = stripeDeco(update.view) > >, decorations: v => v.decorations >) The result looks like this:
How do a zebra’s stripes act as camouflage?
When all the zebras keep together as a big group, the pattern of each zebra’s stripes blends in with the stripes of the zebras around it. See more pictures of African animals.
Mayela Lopez/AFP/Getty Images
To humans, a zebra’s stripes stick out like a sore thumb, so it’s hard to imagine that the stripes act as camouflage. Zoologists believe stripes offer zebras protection from predators in a couple of different ways.
The first is as simple pattern-camouflage, much like the type the military uses in its fatigue design. The wavy lines of a zebra blend in with the wavy lines of the tall grass around it. It doesn’t matter that the zebra’s stripes are black and white and the lines of the grass are yellow, brown or green, because the zebra’s main predator, the lion, is colorblind. The pattern of the camouflage is much more important than its color, when hiding from these predators. If a zebra is standing still in matching surroundings, a lion may overlook it completely.
This benefit may help an individual zebra in some situations, but the more significant means of protection has to do with zebra herds. Zebras usually travel in large groups, in which they stay very close to one another. Even with their camouflage pattern, it’s highly unlikely a large gathering of zebras would be able to escape a lion’s notice, but their stripes help them use this large size to their advantage. When all the zebras keep together as a big group, the pattern of each zebra’s stripes blends in with the stripes of the zebras around it. This is confusing to the lion, who sees a large, moving, striped mass instead of many individual zebras. The lion has trouble picking out any one zebra, and so it doesn’t have a very good plan of attack. It’s hard for the lion to even recognize which way each zebra is moving: Imagine the difference in pursuing one animal and charging into an amorphous blob of animals moving every which way. The lion’s inability to distinguish zebras also makes it more difficult for it to target and track weaker zebras in the herd.
So do zebra stripes confuse zebras as much as they confuse lions? Oddly enough, while making zebras indistinguishable to other animals, zebra stripes actually help zebras recognize one another. Stripe patterns are like zebra fingerprints: Every zebra has a slightly different arrangement. Zoologists believe this is how zebras distinguish who’s who in a zebra herd. This certainly has significant benefits. A zebra mare and her foal can keep track of each other in the large herd, for example, and a zebra can very quickly distinguish its own herd from another. This also helps human researchers, because it enables them to track particular zebras in the wild.
