Huet

 

Code here is highlighted once, at build time, withhuetShikiTheme(): a Shiki theme whose colors are Huet variables such as var(--huet-code-keyword, var(--huet-red)). The theme you pick in the configurator fills them in for each block's own background. Nothing is re-highlighted.

Before and after

The same Shiki output for a markmiro.com snippet

markmiro.com today · github-dark, fixed colors
var sales = (
  <sales vendor="John">
    <item type="peas" price="4" quantity="6"/>
    <item type="carrot" price="3" quantity="10"/>
    <item type="chips" price="5" quantity="3"/>
  </sales>
);
Huet theme · follows the configurator
var sales = (
  <sales vendor="John">
    <item type="peas" price="4" quantity="6"/>
    <item type="carrot" price="3" quantity="10"/>
    <item type="chips" price="5" quantity="3"/>
  </sales>
);

In a post

How I learned to code

In Flash, you could write XML right in your code, which looked a lot like JSX does today:

var sales = (
  <sales vendor="John">
    <item type="peas" price="4" quantity="6"/>
    <item type="carrot" price="3" quantity="10"/>
    <item type="chips" price="5" quantity="3"/>
  </sales>
);
From “How I learned to code” · jsx

The point of nesting functions like this is to make it clear that second() and third() aren't used anywhere else:

export function first() {
  const bla = 2;
  return second(3, bla);
}

const second = (a, bla) => {
  const foobar = a + bla;
  return third(3, foobar);
};
From “Scope creep” · js

And here's the kind of class list Tailwind's home page shows:

<div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
  <!-- ... -->
</div>
From “Too much Tailwind” · html

Highlighted rows

Removed, added and highlighted rows from Shiki's // [!code --],// [!code ++] and // [!code highlight] notation. Each row is a Huet surface nested in the block, so tokens and the +/− markers are solved against the row they sit on.

const second = (a, bla) => { 
  const foobar = a + bla;
  const third = (b) => { 
    return foobar + b; 
  }; 
  return third(3, foobar);
};
const third = (b, foobar) => foobar + b;
Block huet-bg-5 

Other languages

Scopes follow GitHub's VS Code theme

import { mountTheme, type Theme } from "huet";

// Relative colors: 25% contrast against the parent background.
const theme: Theme = { neutral: ["#233b91", "#ffffff"] };
const colors = mountTheme(document.querySelector<HTMLElement>("#app")!, theme);
colors.update(theme, { background: 0 });
ts
.huet-bg-blue-20 {
  /* Supplied by mountTheme for this surface */
  background-color: var(--huet-background);
  padding: 0.5rem 1rem;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}
css
@@ -1,4 +1,6 @@
 export default defineConfig({
-  integrations: [react(), mdx()],
+  integrations: [react(), mdx()],
+  markdown: {
+    shikiConfig: { theme: huetShikiTheme(), transformers: [huetShikiTransformer()] },
+  },
 });
diff
{
  "name": "huet",
  "version": "1.0.0-beta.3",
  "sideEffects": ["**/*.css"],
  "private": false
}
json

Every theme

Identical HTML in every card, on the page's background. The page is already a theme root, so each card's colors are written inline instead of through a nested mount.

Base
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Radioactive
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Blueprint
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Terminal
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Paperback
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Deep Dive
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Royal Purple
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Orange Boost
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Faded Future
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
A Box of Macaroni
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Sunset
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};
Astro
const App = () => {
  // Hello from every theme
  return <p className="hi">Hello, {name}!</p>;
};