Zola and Shaders

2026-01-23

Zola got updated and now has Giallo as syntax highlighter. Despite not being entirely css-themable in the way I want (that would be closer to highlight-js), it doesn't bork theming done via css nearly as bad as syntect, so that's nice. This means I can probably get away with modifying/making a theme that emits color names instead, making it easier to theme with some preset global colors.

Shaders!

I also added an option to view shaders to the site, with a shortcode. This means I don't have to rely on shadertoy for hosting shaders anymore. Now I can do this:

{{ shader(main="shader.glsl") }}

or

{% shader() %}
```glsl
void mainImage(out vec4 fragColor, in vec2 fragCoord) { ... }
```
{% end %}

and it will load a shader. I've used this for The atmospheric scattering explained post so far. Below is it in action on the default shadertoy shader:

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = fragCoord / iResolution.xy;

  // Time varying pixel color
  vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));

  // Output to screen
  fragColor = vec4(col, 1.0);
}

It also adds a dropdown for the shader code, tho I should probably style this a bit better.

I can't do multiple buffers, images, and so on just yet, but I'll probably add that depending on how needed that is. Thank you to this project for kinda showing how to do it.