fix: scope pre bg and color to code blocks with a language

[binlabs]

What does this change?

Narrows the theme background/foreground rule so it only targets <pre> elements whose <code> has actually been marked up for highlighting, rather than every <pre><code> on the page.

Closes #28.

Problem

Every theme file styled code blocks with:

[data-syntax-theme="..."] pre:has(code) {
  background-color: var(--syntax-background);
  color: var(--syntax-foreground);
}

Because data-syntax-theme lives on the root element, pre:has(code) matches any <pre> containing a <code> anywhere on the page. So the theme's background and text colors bled onto unrelated code blocks that microlighter never touched (see #28).

Change

The :has() now requires a code that carries a language marker. Either:

1. A language-* class, which would be applied by the user in the scripted approach
2. OR, a data-language attribute which would be applied by the component

[data-syntax-theme="..."] pre:has(code[class^="language-"], code[data-language]) { ... }

The class approach is what I saw the scripted method targeting, and the data-language attribute is what the component adds.

The comma inside :has() is an OR selector list, so this stays a single (admittedly ugly) rule per theme. Applied across all 12 theme files.

Checklist

• npm test passes locally
• The size budget still passes (note any size impact below)
• Added/updated tests or the demo (docs/index.html) if behavior changed
• For a new grammar/theme, followed the steps in CONTRIBUTING.md

Size impact

                        file  raw (min)      gzip
  --------------------------  ---------  --------
          themes/cobalt2.css   2.01 KiB  0.59 KiB
          themes/dracula.css   2.01 KiB  0.58 KiB
          themes/flexoki.css   2.20 KiB  0.71 KiB
           themes/github.css   2.01 KiB  0.59 KiB
          themes/gruvbox.css   2.01 KiB  0.60 KiB
              themes/min.css   2.00 KiB  0.57 KiB
          themes/monokai.css   2.01 KiB  0.57 KiB
        themes/night-owl.css   2.01 KiB  0.58 KiB
  themes/solarized-light.css   2.03 KiB  0.59 KiB
      themes/tokyo-night.css   2.02 KiB  0.61 KiB
           themes/vesper.css   2.01 KiB  0.55 KiB
      themes/vscode-plus.css   2.02 KiB  0.60 KiB

[davatron5000]

Can you make a reduced test case of this issue in a CodePen or something? Where are you putting your data-syntax-theme attribute? Have you tried putting it on the <micro-lighter> element itself?

<micro-lighter data-syntax-theme="github">
  <pre>
    <code class="language-js">const onlyThis = "should be highlighted"</code>
  </pre>
</micro-lighter>