fix: add filename label support for <code> blocks

[NathanaelFetue]

This PR follows up on #173 by extending the filename attribute support to plain <code> blocks, ensuring UI consistency across all code display methods on the Academy platform.

Changes

• Added CSS rules for code[filename] selector
• Maintains same styling as existing .highlight[filename] blocks
• Backward compatible - no breaking changes

Implementation

code[filename] {
  display: block;
  margin-top: 2rem;
}

code[filename]::before {
  content: attr(filename);
  // ... same styling as .highlight[filename]::before
}

Fixes #177

cc @CodexRaunak

[CodexRaunak]

@NathanaelFetue can you also provide a screenshot

[NathanaelFetue]

@CodexRaunak Here's a screenshot demonstrating both implementations:

Test 1 - Existing .highlight[filename] behavior from #173:

• HTML: <div class="highlight" filename="config.yaml"><pre><code>...</code></pre></div>
• Result: ✅ Label displays (existing feature)

Test 2 - NEW code[filename] support (this PR):

• HTML: <code filename="example.js">console.log("...");</code>
• Result: ✅ Label displays (new feature - previously didn't work!)

The CSS I added applies the same styling to code[filename] as the existing .highlight[filename], maintaining UI consistency across all code display methods:

code[filename]::before {
  content: attr(filename);
  // ... same styling properties
}