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

SasikaA073 · 2025-10-09T10:11:18Z

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 · 2025-10-09T10:21:44Z

✅ 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 · 2025-10-10T04:10:14Z

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

- Added default CSS styling for inline code and code blocks - Styles include monospaced font, background color, padding, and border - Supports both light and dark modes using existing color variables - Code blocks are visually distinctive with proper readability - Added E2E tests for light/dark modes, chat, text components, and CSS override Fixes Avaiga#2662

SasikaA073 · 2025-10-10T05:15:12Z

@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 · 2025-10-10T21:22:35Z

Hi @arcanaxion Is there any other modification needed?

github-actions · 2025-10-29T09:07:26Z

This PR has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this PR, then please add new commit or another comment, otherwise this PR will be closed in 14 days. For more information please refer to the contributing guidelines.

github-actions · 2025-11-21T09:07:31Z

This PR has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this PR, then please add new commit or another comment, otherwise this PR will be closed in 14 days. For more information please refer to the contributing guidelines.

FredLL-Avaiga

Hi @SasikaA073
Thanks for your contribution
Can you update your branch and fix the linter issues ?

Copilot

Pull request overview

This PR adds default CSS styling for code blocks (<code> and <pre> tags) across Taipy GUI components, improving readability for code snippets in markdown, chat messages, and pre-formatted text. The implementation includes light and dark mode support with monospaced fonts and distinctive background colors.

Key Changes:

Added comprehensive CSS styling for inline code and code blocks in typography.css with theme-aware dark mode variants
Created E2E test suite covering markdown text, chat components, pre-mode text, and custom style overrides

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File	Description
`frontend/taipy-gui/public/stylekit/base/typography.css`	Implements default styling for `code` and `pre` elements with light/dark mode support, monospace fonts, and proper spacing/borders
`tests/gui/e2e/test_code_block_styling.py`	Adds comprehensive E2E tests validating code block styling across different components and modes, including custom override capabilities

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-01T09:37:59Z

tests/gui/e2e/test_code_block_styling.py

+    pre_content = """def example():
+    x = 42
+    return x"""
+
+    page_content = '<|{pre_content}|id=pre1|mode=pre|>'
+
+    gui._set_frame(inspect.currentframe())


The variable pre_content must be defined before calling gui._set_frame(inspect.currentframe()). The current order will cause the variable to not be captured in the frame's local scope, which is required for the Taipy GUI to access it.

Move the pre_content definition to before line 146.

Copilot · 2025-12-01T09:38:00Z

frontend/taipy-gui/public/stylekit/base/typography.css

+    font-size: 0.9em;
+    background-color: rgba(0, 0, 0, 0.06);
+    color: var(--color-contrast);
+    padding: 0.2em 0.4em;


[nitpick] Mixing em units (which are relative to the parent font size) with rem units (which are relative to the root font size) can lead to inconsistent sizing. The font-size uses em (line 88) while padding uses em as well, which means the padding will be calculated relative to the already-scaled font size, potentially leading to unexpected results.

Consider using rem for the font size for consistency with the pre block styling (line 103), or use fixed pixel values for padding to avoid compounding relative units.

Suggested change

font-size: 0.9em;

background-color: rgba(0, 0, 0, 0.06);

color: var(--color-contrast);

padding: 0.2em 0.4em;

font-size: 0.9rem;

background-color: rgba(0, 0, 0, 0.06);

color: var(--color-contrast);

padding: 0.2rem 0.4rem;

Copilot · 2025-12-01T09:38:00Z

tests/gui/e2e/test_code_block_styling.py

+    assert inline_code_bg != "rgba(0, 0, 0, 0)", "Inline code should have a background color in dark mode"
+
+
+@pytest.mark.teste2e  


Inconsistent spacing: there's an extra space before the decorator. Other test functions in this file don't have this extra space.

Suggested change

@pytest.mark.teste2e

@pytest.mark.teste2e

Copilot · 2025-12-01T09:38:00Z

tests/gui/e2e/test_code_block_styling.py

+    )
+    assert code_bg == "rgb(255, 0, 0)", "Custom style should override default code styling"
+
+


Extra blank line at the end of the file. The file should end with a single newline character to match the project's style conventions.

Suggested change

Copilot · 2025-12-01T09:38:01Z

tests/gui/e2e/test_code_block_styling.py

+    chat_messages = [
+        ["1", "Show me a Python example", "user"],
+        ["2", "Here's an example:\n\n```python\ndef greet():\n    print('Hello')\n```", "assistant"],
+    ]
+
+    page_content = '<|{chat_messages}|chat|id=chat1|>'
+
+    gui._set_frame(inspect.currentframe())


The variable chat_messages must be defined before calling gui._set_frame(inspect.currentframe()). The current order will cause the variable to not be captured in the frame's local scope, which is required for the Taipy GUI to access it.

Move the chat_messages definition to before line 119.

Copilot · 2025-12-01T09:38:01Z

tests/gui/e2e/test_code_block_styling.py

+@pytest.mark.teste2e  
+def test_code_block_in_chat(page: "Page", gui: Gui, helpers):
+    """Test that code blocks in chat messages have proper styling"""
+    chat_messages = [


Variable chat_messages is not used.

Copilot · 2025-12-01T09:38:01Z

tests/gui/e2e/test_code_block_styling.py

+@pytest.mark.teste2e
+def test_pre_mode_styling(page: "Page", gui: Gui, helpers):
+    """Test that pre mode text component has proper styling"""
+    pre_content = """def example():


Variable pre_content is not used.

SasikaA073 force-pushed the feature/#2662-code-block-styling branch from 0733092 to 9d918cc Compare October 10, 2025 05:10

arcanaxion requested a review from FabienLelaquais October 14, 2025 07:48

FabienLelaquais requested a review from FredLL-Avaiga October 15, 2025 06:51

FabienLelaquais self-assigned this Oct 15, 2025

FabienLelaquais added GUI: Front-End 🟨 Priority: Medium Not blocking but should be addressed ✨New feature labels Oct 15, 2025

github-actions bot added the 🥶Waiting for contributor Issues or PRs waiting for a long time label Oct 29, 2025

arcanaxion removed the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 7, 2025

github-actions bot added the 🥶Waiting for contributor Issues or PRs waiting for a long time label Nov 21, 2025

FredLL-Avaiga requested a review from Copilot December 1, 2025 09:33

FredLL-Avaiga assigned SasikaA073 Dec 1, 2025

Copilot started reviewing on behalf of FredLL-Avaiga December 1, 2025 09:34 View session

FredLL-Avaiga unassigned FabienLelaquais Dec 1, 2025

Copilot finished reviewing on behalf of FredLL-Avaiga December 1, 2025 09:36

FredLL-Avaiga requested changes Dec 1, 2025

View reviewed changes

Copilot AI reviewed Dec 1, 2025

View reviewed changes

github-actions bot removed the 🥶Waiting for contributor Issues or PRs waiting for a long time label Dec 2, 2025

		assert inline_code_bg != "rgba(0, 0, 0, 0)", "Inline code should have a background color in dark mode"


		@pytest.mark.teste2e

		)
		assert code_bg == "rgb(255, 0, 0)", "Custom style should override default code styling"

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

Are you sure you want to change the base?

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

Conversation

SasikaA073 commented Oct 9, 2025

Description

Changes Made

Features

Light Mode

Dark Mode

Testing

Components Affected

Benefits

Uh oh!

SasikaA073 commented Oct 9, 2025

✅ Acceptance Criteria Update

🧪 Tests Added

📚 Documentation Added

🎯 Acceptance Criteria Status

📝 Notes

Uh oh!

arcanaxion commented Oct 10, 2025

Uh oh!

SasikaA073 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SasikaA073 commented Oct 10, 2025

Uh oh!

github-actions bot commented Oct 29, 2025

Uh oh!

github-actions bot commented Nov 21, 2025

Uh oh!

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SasikaA073 commented Oct 10, 2025 •

edited

Loading