element-hq / element-hq/element-web

Text is not highlighted in code blocks when using a custom theme

Open
#20,020 2 comments 0 reactions 0 assignees View on GitHub
A-Themes-Custom A-Timeline O-Uncommon S-Minor T-Defect Z-Labs
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. Add and select a custom Element theme, for example [Discord Dark](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Discord/Discord-Dark/Discord-Dark-Theme.json) (instructions [here](https://github.com/aaronraimist/element-themes#how-to-use-themes))
2. Send a code block

![2021-12-02_183743](https://user-images.githubusercontent.com/82098328/144484481-915bc89f-b414-45dc-85d5-03ee0c11c759.png)
3. Either
- restart Element (a custom theme will be used by default) or
- switch theme from Dark to a custom one _two_ times

### Outcome

#### What did you expect?

Code stays highlighted with different colors.

#### What happened instead?

Code is not highlighted. Animation:

![element-code-block](https://user-images.githubusercontent.com/82098328/144485490-75f7fc17-f741-4402-9dca-f3afd74b5e64.gif)

### Operating system

Windows 10

### Application version

Element version 1.9.5

### How did you install the app?

From https://element.io/get-started

### Homeserver

matrix.org

### Will you send logs?

No

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in Element using the linked Discord Dark theme, then inspect the custom-theme handling and code-block rendering paths. Verify behavior after restarting and after switching themes twice; done means code blocks retain syntax highlighting with different colors under the custom theme.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.