Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add syntax highlighting into markdown code block #5389

Open
wants to merge 27 commits into
base: main
Choose a base branch
from

Conversation

OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Nov 30, 2024

Changelog Entry

Added

  • Introduced syntax highlighting for markdown code blocks, in PR #5389, by @OEvgeny

Description

This enhances code block rendering in markdown by leveraging custom elements architecture to provide better integration between React components and markdown output. This enables direct property binding and updates to
custom elements (code block, copy button).

Key improvements:

  • Decouple code block rendering from HTML transform middleware, enabling direct property updates
  • Provide foundation for custom syntax highlighters and theme customization
  • Use copy button as independent component from code block custom element
  • Introduce useUpdater hook to handle communication between React and custom elements

Design

The implementation follows Web Chat's composer pattern for consistency:

  1. CodeBlock custom element handles the core rendering and updates
  2. ShikiComposer manages highlighting configuration
  3. useUpdater hook provides synchronization between React state and custom element updates

Moving highlights configuration to bundle package to align with Web Chat's architecture.

Specific Changes

  • Introduced CodeBlock custom element with support for theme and language attributes
  • Added ShikiComposer to bundle package for centralized highlight management
  • Created useUpdater hook for managing React-to-custom-element state updates
  • Updated HTML transform middleware to work with new code block architecture
  • Updated snapshots and add more tests
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@OEvgeny OEvgeny force-pushed the feature/code-block branch from 8ed4c58 to c9e6f63 Compare December 5, 2024 17:21
@OEvgeny OEvgeny marked this pull request as ready for review December 5, 2024 18:10
@OEvgeny OEvgeny requested a review from compulim December 5, 2024 20:49
@OEvgeny OEvgeny requested a review from compulim December 9, 2024 23:42
@OEvgeny OEvgeny enabled auto-merge (squash) December 10, 2024 00:55
@OEvgeny OEvgeny requested a review from compulim December 12, 2024 22:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants