@shikijs/rehype: theme background and color not applied to plain text blocks

[karlhorky]

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Using @shikijs/rehype, a text / txt / plain code block will appear without background or color from the theme specified:

next.config.ts

import rehypeShiki from '@shikijs/rehype';

// ...

[
  rehypeShiki,
  {
    theme: 'dark-plus',
    addLanguageClass: true,
  },
],

MDX:

```sql
CREATE TABLE animals (
  id integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  slug varchar(80) UNIQUE NOT NULL,
  name varchar(80) NOT NULL
);

SELECT
  *
FROM
  animals;

-- id | slug   | name
-- ---|--------|------
-- 13 | lucia  | Lucia
-- 34 | macca  | Macca

https://example.com/animals/lucia
https://example.com/animals/macca

![Screenshot 2024-10-09 at 18 53 48](https://github.com/user-attachments/assets/0f83a87f-67a0-4c74-97e4-29b4f53f3cda)

### Reproduction

https://github.com/karlhorky/repro-shikijs-rehype-text-theme-styles-not-visible

### Contributes

- [ ] I am willing to submit a PR to fix this issue
- [ ] I am willing to submit a PR with failing tests

[karlhorky]

Workaround

Use pre:has(> code.language-txt) selector to manually apply background and color matching your theme:

/**
 * Apply dark-plus background and color for plain text code blocks
 *
 * TODO: Remove if @shikijs/rehype is updated to do this out of the box:
 * - https://github.com/shikijs/shiki/issues/805
 *
 */
pre:has(> code.language-txt) {
  @apply bg-[#1E1E1E] text-[#D4D4D4];
}