ALX Code Focus

One of the main motivations for this project was how plain code snippets looked on exercise and project pages. There was no syntax highlighting, which made reading and understanding code harder than it should be.

I am the kind of developer who spends a lot of time customizing my development environment because I believe it improves my productivity and helps me stay focused. Since we spent long hours learning on this platform (the intranet), I felt that improving its look and readability could make a real difference for me and other students. The main goal was to add code highlighting and more comfortable color themes.


:Before
ALX Code Focus
:After
ALX Code Focus

The challenge

One of the main challenges was that the intranet platform’s HTML structure changes frequently. This made it harder to reliably target page elements using CSS selectors.

Another challenge was handling code highlighting automatically. Code snippets on the intranet can be written in different languages, so I needed a way to detect the language and apply the correct syntax highlighting without manual setup.

Solution & Decisions

To handle the frequent HTML changes, I spent time creating solid and reliable CSS selectors that could survive small layout and structure updates without breaking the extension.

For code highlighting, I used Highlight.js to automatically detect the programming language and apply proper syntax highlighting to code snippets. This made code easier to read and closer to what developers are used to in real editors.

After the initial release, I continued to push fixes and small improvements over the following months in response to platform changes and user feedback, helping keep the extension stable in production.

One other important decision was making it very easy for other students to contribute. Adding a new theme only requires creating a single JSON file with a color palette and dropping it into the themes directory. The extension automatically detects and loads new themes without extra configuration.

Next Project

Next ProjectAtlasLingua