Skip to content

fix(ui): syntax / code block highlighting support (#12)#28

Merged
hossamkhero merged 2 commits intoBLEU-IO:masterfrom
Abo3baziz:master
Apr 13, 2026
Merged

fix(ui): syntax / code block highlighting support (#12)#28
hossamkhero merged 2 commits intoBLEU-IO:masterfrom
Abo3baziz:master

Conversation

@Abo3baziz
Copy link
Copy Markdown
Contributor

@Abo3baziz Abo3baziz commented Apr 10, 2026

🐞 Identify issue

Closes #12

  1. Syntax highlighting does not work even when the @11ty/eleventy-plugin-syntaxhighlight is used in the Eleventy config file (.eleventy.js)
  2. The problem was in the configuration of the plugin — it was not configured correctly

✅ Issue solution

  1. Add prismjs package
  2. Add theme in input.css file
  3. Remove conflicting CSS variables

🧾 Supported languages

  • JavaScript (js)
  • TypeScript (ts)
  • Python
  • PHP
  • HTML
  • CSS
  • Bash / Shell
  • JSON
  • SQL
  • Java
  • Rust
  • C++
  • C
  • C#

Screenshots

Before

Screenshot 2026-04-10 222321

After

Screenshot 2026-04-10 222504

- Add prismjs package
- load prism-okaidia in global CSS
- Remove prose code/pre overrides superseded by Prism
…locks

- Add styling for `.token.deleted` and `.token.inserted` to visually distinguish removed and added lines in diffs
- Introduce a shared `pre[class*="language-"]::before` base rule to display code block language labels
- Add language-specific labels for multiple PrismJS languages (JS, TS, Python, PHP, HTML, CSS, Bash, JSON, SQL, Java, Rust, C/C++, C#, Diff, etc.)
- Normalize label appearance using consistent typography, positioning, and background styling
@hossamkhero hossamkhero merged commit de4dbd1 into BLEU-IO:master Apr 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Better Support for Code Blocks

2 participants