feat: Add default styling for code blocks (pre/code tags) across components

[SasikaA073]

Description

This PR implements the feature requested in issue #2662 to provide default styling for code blocks across Taipy GUI components.

Changes Made

• Added default CSS styling for <code> (inline code) and <pre> (code blocks) tags in frontend/taipy-gui/public/stylekit/base/typography.css
• Styles include:
  • Monospaced font (Consolas, Monaco, Courier New)
  • Distinctive background colors for both light and dark modes
  • Proper padding and border radius
  • Border for code blocks
  • Overflow handling for long code
• Added comprehensive test application (test_code_block_styling.py) demonstrating the feature across:
  • Text component with markdown mode
  • Chat component with code in messages
  • Text component with pre mode

Features

Light Mode

• Inline code: subtle gray background (rgba(0, 0, 0, 0.06))
• Code blocks: light gray background (rgba(0, 0, 0, 0.04)) with border

Dark Mode

• Inline code: subtle white background (rgba(255, 255, 255, 0.1))
• Code blocks: lighter background (rgba(255, 255, 255, 0.08)) with visible border

Testing

Run the test application:

python test_code_block_styling.py

This will demonstrate code block styling in:

• Markdown text with inline code and code blocks
• Chat messages containing code snippets
• Pre-formatted text

Components Affected

• ✅ Chat component
• ✅ Text component (mode='md' and mode='pre')
• ✅ Any component rendering markdown with code

Benefits

• Code samples and responses from LLMs are more readable and aesthetically pleasing
• Developers don't need to add custom styling for code blocks
• Consistent with modern UI/UX practices for developer tools
• Styling can be overridden via custom CSS if needed

Closes #2662

[SasikaA073]

✅ Acceptance Criteria Update

I've added the following to complete the acceptance criteria:

🧪 Tests Added

• E2E Tests in tests/gui/e2e/test_code_block_styling.py:
  • ✅ Light mode styling test
  • ✅ Dark mode styling test
  • ✅ Chat component code block test
  • ✅ Pre mode text component test
  • ✅ CSS override functionality test

📚 Documentation Added

• Feature Documentation: docs/CODE_BLOCK_STYLING.md

  • Overview and examples
  • Customization guide
  • Migration notes
  • Technical details

• Release Notes: RELEASE_NOTES_CODE_BLOCKS.md

  • Feature summary
  • Impact and benefits
  • Migration guide
  • Breaking changes (none)

🎯 Acceptance Criteria Status

✅ Working demo/example - test_code_block_styling.py
✅ Integration tests - E2E tests added
⚠️ Unit tests - E2E tests cover the CSS styling (unit tests not applicable for pure CSS)
⚠️ Code coverage ≥90% - Test coverage for CSS styling via E2E tests
✅ Documentation - Feature docs and release notes added

📝 Notes

• The implementation is pure CSS, so traditional unit tests aren't applicable
• E2E tests verify the styling is correctly applied across all components
• Tests include verification of light/dark mode, different components, and CSS override capability

The PR is now complete and ready for review! 🚀

[arcanaxion]

Hi @SasikaA073, thank you for your PR. I see you've added a release note and test in the repo root which must have been mistake. Could you check this and give me a ping when this is ready for review

[SasikaA073]

@arcanaxion yes, that was my mistake. Now I have checked this one, and edited the PR with only the required changes.

I've removed the files that were in the wrong location. Now the PR only contains

• CSS styling changes in frontend/taipy-gui/public/stylekit/base/typography.css
• E2E tests in tests/gui/e2e/test_code_block_styling.py

[SasikaA073]

Hi @arcanaxion Is there any other modification needed?