CodeYourFuture Curriculum
Added filename label support for code blocks in CodeYourFuture's curriculum so technical lessons could show file context directly above snippets.
Overview
Added a Hugo render hook that reads title or filename attributes on code fences and renders a styled filename label above the highlighted block. Paired it with theme styling so the labels fit the curriculum's existing code presentation.
01
Context
Curriculum authors needed a way to show which file a code snippet belonged to, especially in lessons that refer to directory structure or ask learners to create specific files.
Without a filename label, code blocks lost important context and made teaching multi-file workflows harder to follow for beginners.
02
Implementation
Added a new render hook at common-theme/layouts/_default/_markup/render-codeblock.html to intercept standard code blocks and surface title or filename metadata when present.
Used Hugo's highlight pipeline to preserve the existing syntax highlighting behavior while layering the filename label above the rendered snippet.
Extended common-theme/assets/styles/03-elements/misc-phrasing.scss with code-block filename styling so the label visually attaches to the code block instead of feeling like separate content.
03
Impact
Made curriculum content easier to teach and follow by letting lessons attach clear file context directly to code examples across the site.
Delivered a reusable theme-level improvement in a Hugo-based education platform, so future lessons can opt into filename labels without custom per-page workarounds.