Skip to content

[✨ FEATURE] Provide default styling for code blocks (``` / <pre>) across components #2662

@FlorianJacta

Description

@FlorianJacta

Related to:
#381
#2580
#2579

πŸ” Feature Description

Currently, when markdown containing code blocks (e.g., using triple backticks ```) is rendered in components like chat, text, or markdown, the resulting "pre" tags are unstyled or minimally styled.

This leads to:

  • Poor readability of code blocks

  • No visual distinction between normal text and code

  • A less polished user experience, especially in LLM/chat use cases

πŸ’‘ Proposed Solution

Introduce a default CSS styling for "pre" and "code" tags rendered by Taipy components. This styling should be:

  • Visually distinctive

  • Readable (e.g., monospaced font, padding, background color)

  • Applied automatically unless overridden

Example default styles:

Image

πŸ“ˆ Impact of the Feature

Components Affected
chat

  • text (when mode="md" or "pre")

  • markdown (if separated from text)

  • Any custom components rendering markdown with code

Benefits

  • Code samples and responses from LLMs become easier to read and aesthetically pleasing

  • Developers don't have to add custom styling every time

  • Aligns Taipy with modern UI/UX practices for developer tools

πŸ“Ž Additional Context (Optional)

Let developers override or disable this default style via theme options or global CSS if needed.

πŸ“œ Code of Conduct

  • I have checked the existing issues to avoid duplicates.
  • I am willing to work on this issue (optional)

βœ… Acceptance Criteria

  • A working demo or example code (if applicable) is provided.
  • Integration tests demonstrate the new functionality.
  • Any new code is covered by unit tests.
  • Code coverage remains at least 90%.
  • Related documentation updates and release notes are created.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions