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

[karlhorky]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• 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
```

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

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];
}