Thonny CSS Highlighter

A small Thonny front-end plug-in that adds syntax highlighting for .css files. It is designed primarily for viewing and editing CSS in teaching projects where HTML, CSS, and Python files are kept together.

Highlighted constructs

• block comments and quoted strings
• selectors, classes, IDs, pseudo-classes, and pseudo-elements
• property names and custom properties
• at-rules and !important
• numbers, dimensions, percentages, and hexadecimal colors
• CSS functions such as var(), calc(), clamp(), and rgb()
• common CSS value keywords
• nested rules and common rule-list at-rules such as @media, @supports, @container, @layer, and @keyframes

The plug-in reuses Thonny's standard syntax-theme tags. Consequently, CSS highlighting follows the syntax theme selected under Tools → Options → Theme & Font.

Install the wheel

1. Open Thonny.
2. Select Tools → Manage plug-ins.
3. Choose Install from local file.
4. Select thonny_css_highlighter-0.1.0-py3-none-any.whl.
5. Restart Thonny.
6. Open a .css file.

The source directory can also be installed during development:

python -m pip install -e .

Run tests with:

python -m pytest

Compatibility

The package requires Python 3.10 or newer and targets Thonny 4.1 through 5.x. It uses Thonny's current plug-in convention: a package below the thonnycontrib namespace with a parameterless load_plugin() function.

Implementation note

Thonny's built-in colorer is Python-specific and clears the standard theme tags for non-Python files. This plug-in bypasses that colorer only for editors whose file type is css, then applies its own tolerant lexer. Other editor types keep Thonny's normal behavior.