Literate shaders

For a literate book, write the fragment shader in the block itself. The body is a Shadertoy-style mainImage and the engine compiles and runs it in the window. The inputs are iResolution (vec3), iTime (float), iAccent (vec3, the current theme accent) and iBackground (vec3, the theme background — use it as your base color so the shader suits light and dark palettes). When a block has a body its source is shown alongside the window by default:

void mainImage(out vec4 fragColor, in vec2 fragCoord){
  vec2 uv = fragCoord / iResolution.xy;
  float wave = sin(uv.x * 12.0 + iTime)
             * cos(uv.y * 9.0 - iTime * 0.6);
  float v = 0.5 + 0.5 * wave;
  vec3 col = mix(iBackground, iAccent, v);
  fragColor = vec4(col, 1.0);
}

A GLSL compile error is shown right in the window, so you can iterate on the shader as you write. Use :source false to hide the source box for a block that has one.

Because iAccent follows the site theme, a literate shader recolors with the palette — try switching themes while one is playing.