sphinx-exercise
sphinx-exercise copied to clipboard
FEAT: Add solution_after_exercise style option and improve dropdown UX
Add style_solution_after_exercise config option and improve dropdown UX
Summary
This PR adds two requested features to improve the styling and usability of solution directives, particularly for projects like QuantEcon lectures where solutions immediately follow exercises.
Changes
1. New Configuration Option: style_solution_after_exercise
Adds a new configuration option style_solution_after_exercise (default: False) that can be enabled in conf.py:
style_solution_after_exercise = True
Purpose: When enabled, this removes hyperlinks from solution titles while keeping the exercise reference text.
Before (default behavior with hyperlink):
Solution to Exercise 1 (Factorial Function) [← clickable link]
After (with style_solution_after_exercise = True):
Solution to Exercise 1 (Factorial Function) [← plain text, no link]
This is particularly useful when solutions follow exercises directly in the content, as it reduces confusion when users click on the dropdown to show the solution.
2. Improved Dropdown Button Text
Modified CSS to customize the dropdown toggle button text for a cleaner UI:
- Changed "Click to show" → "Show"
- Changed "Click to hide" → "Hide"
This applies to both exercise and solution directives when using the dropdown class from sphinx-togglebutton.
Implementation Details
-
Modified Files:
sphinx_exercise/__init__.py- Registered new config optionsphinx_exercise/post_transforms.py- Added conditional logic to remove hyperlinkssphinx_exercise/assets/html/exercise.css- CSS customization for dropdown buttonsdocs/source/syntax.md- Documentation for both features
-
New Files:
tests/test_style_solution_after_exercise.py- Comprehensive test coverage
Features
✅ Backward compatible - Default behavior unchanged (opt-in configuration)
✅ Well-tested - 3 new tests, all 113 tests pass
✅ Properly handles:
- Numbered and unnumbered exercises
- Exercises with and without titles
- Math expressions in titles (ensures MathJax is loaded)
Testing
All tests pass:
================================== 113 passed, 1 warning in 35.95s ==================================
New tests verify:
- Solutions without hyperlinks when
style_solution_after_exercise=True - Solutions with hyperlinks when
style_solution_after_exercise=False(default) - Both numbered and unnumbered exercises
Usage Example
Configuration (conf.py):
extensions = [
"sphinx_exercise",
"sphinx_togglebutton", # for dropdown functionality
]
# Enable new styling for solutions that follow exercises
style_solution_after_exercise = True
Content:
:::{exercise} Factorial Function
:label: ex-factorial
Write a function to calculate the factorial of a number.
:::
:::{solution} ex-factorial
:class: dropdown
Here's the solution...
:::
With style_solution_after_exercise = True, the solution title displays plain text without a hyperlink, and the dropdown button shows "Show" instead of "Click to show".
Documentation
- Updated
docs/source/syntax.mdwith full documentation - Includes configuration examples for both Sphinx and Jupyter Book projects
- Documents the dropdown button text customization
Related Issues
Addresses user request for QuantEcon lectures where solutions follow exercises, reducing confusion with clickable links when using the dropdown class.
- [x] testing completed on real world lecture repository https://github.com/QuantEcon/lecture-python.myst/pull/670