Automattic / Automattic/syntaxhighlighter
div for syntaxhighligther is larger than it should be
- Dominant language
- CSS
- Stars
- 251
- Forks
- 81
- PR merge metrics
- No merged PRs in 30d
Description
The problem is in this tag:
Exactly in syntaxhighlighter style because it defines "width: 100% !important;" of this div.
As a result I get the div area and the padding exactly to the page size. That is not good because all other elements has normal padding and have some space between the right edge of the page and themself.
The problem can be solved if change width: 100% to auto. But the tag !important is not allowing to do this.
I also can't ovveride it with other CSS (including the style that can be added at the settings page) because CSS for syntaxhiglighter is enabled via JS and at the same late time.
What shall I do with this?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the syntaxhighlighter CSS rule that applies width: 100% !important to the generated div with id highlighter_131566. Reproduce the layout on a WordPress page containing a highlighted snippet, then verify that the div no longer reaches the page edge while the code remains correctly styled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100