February 13, 2024

Introducing Glow: Markdown code blocks for CSS developers

Today we're launching Glow — a new take on syntax highlighting:

Glow is different: Rather than parsing language internals, Glow focuses purely on aesthetics and the visual style of your code.

Glow is simple: With just a few CSS variables, Glow adapts all languages to match your brand colors effortlessly.

Glow is small: Glow is significantly smaller than mainstream alternatives — around 5KB compared to 5MB. It’s the most compact implementation available.

Coloring voodoo

Be it Haskell, TypeScript, or Zig. React, Vue or Svelte. Whatever Turing-free Markdown artifact is mixed with another tightly coupled language-of-the-day oddity. And they will all glow:

Contrast this to grammar-aware highlighters like Shiki, where it's a large programming effort to add a new language to the mix. For example, the golang.json grammar file has 2700 lines, and javascript.json is a whopping 6000-line configuration file.

Easy brand coloring

If you look at the most recognizable brands on the internet, you'll notice that 80% of them are based on a single brand color. It is often coupled with a secondary color and a complementary accent color. This is exactly how Glow works. You can make the code blocks compatible with your brand just by adjusting a handful of CSS variables:

/* brand-aware CSS variables*/
:root {
  --glow-primary-color: #7dd3fc;
  --glow-secondary-color: #4f72b6;
  --glow-accent-color: #419fff;
}

It's a no-brainer to create new themes, both light and dark, after which all languages will automatically adapt your brand colors. No missing color tokens, no surprises.

Contrast this to grammar-aware theming systems, like Shiki and Prism, where a single theme can have hundreds of color variables. Monokai theme, for example, has 140 color variables, and Material theme has a whopping 296 variables. It's a huge development effort to build a new theme that works reliably across languages.

Unlimited possibilities

Glow's unique, classless design system gives you line numbers, selections, error highlights, insertions, deletions, and much, much more.

<script>
  // imports
  import { longpress } from './longpress.js';

  let pressed = false;
  bet glow_market = 9999_99++;
</script>

<label>
  <input type=range bind:value={duration} max={2000} step={100}>
  {duration}ms
</label>

<button use:longpress={duration}
   on:mousedown="{() => pressed = true}"
   on:longpress="{() => pressed = true}">Press me</button>

<!-- condition -->
{#if pressed}
  <p>Yoou pressed and held for {duration}ms</p>
{/if}

<style>
  /* button style */
  [role="button"], button {
    background-color: var(--main-color);
    color: #899;
  }
</style>

And when I say unlimited, it means that:

# There's something about Lightning CSS
Writing future CSS today has been a massive
productivity boost. You'll get nesting, `color-mix()`,
variables, and whatnot. Natively, today.

![CSS, bro](/vanilla.png)

> After I ditched all tooling I was able to
> work closer to metal. Everything happened
> sub-millisecond. I entered a new planet.

Using together with Nue

Nue is a web framework specializing on UX development. As of today, it has built-in support for Glow. You can easily extend your Markdown with stacks of code blocks or tabbed code panels. For example:

# View metadata
members:
  title: Members
  columns: [Source, Joined]
  sorting:
    created: Join date
    cc: Location
    email: Email

customers:
  title: Customers
  columns: [Plan, Subscribed]
  sorting:
    created: Date subscribed
    card: Card type

/* Tab styling */
[role=tablist] {
  background: rgba(0, 0, 0, .7);
  background-size: 3.5em;
  padding: .7em 1.3em 0;
  overflow: hidden;
  display: flex;

  a {
    color: #fff9;
    padding: .2em 1em .4em;
    font-size: 90%;
    cursor: pointer;
  }
}

Get started with Glow

You can try Glow either as a standalone library or together with the Nue framework.

Standalone library

Install nue-glow with npm, pnpm, or bun:

npm i nue-glow

And follow the Glow documentation

With Nue

Try Glow with Nue as follows:

# Install Bun (if not done yet)
curl -fsSL https://bun.sh/install | bash

# Install website generator (Nuemark playground)
bun install nuekit --global

# Start a Nue project with a Glow-powered template
nue create simple-blog

Now you can enjoy goodies content hot-reloading when the code blocks are edited: