Skip to content

feat: codeblock highlight colors - #624

Open
eszlamczyk wants to merge 6 commits into
mainfrom
feat/51/code-block-highligher
Open

feat: codeblock highlight colors#624
eszlamczyk wants to merge 6 commits into
mainfrom
feat/51/code-block-highligher

Conversation

@eszlamczyk

@eszlamczyk eszlamczyk commented Aug 3, 2026

Copy link
Copy Markdown
Collaborator

What/Why?

First part of the code block syntax highlighting stack for #51.

This PR wires up the styling plumbing for per-token code block colors end to end, without shipping the highlighting engine itself. It adds a syntaxColors object to codeBlock styles, keyed on tree-sitter highlight token types (keyword, string, comment, function, type, etc.), and threads it through:

  • TS typesCodeBlockSyntaxColors on CodeBlockStyle, plus the internal style type.
  • Style normalizationnormalizeMarkdownStyle (and the .web variant) resolve the palette, applying the default GitHub-light colors and falling back to the code block's base color for operatorColor/punctuation/variable/embedded.
  • Codegen specs — both native component specs expose the new props.
  • iOSStyleConfig, ENRMCodeBlockHighlighter, and StylePropsUtils consume the colors.
  • AndroidCodeBlockStyle, CodeBlockRenderer, and CodeBlockHighlighter consume the colors.
  • DocsSTYLES.md documents syntaxColors and each token key.
  • Storybook — a CodeHighlight story for the example app.

Notes:

  • operator is named operatorColor in the public API because operator is a reserved word in the generated native (C++) struct.
  • Colors only take visible effect once the optional syntax highlighting module (tree-sitter grammars) is compiled in — that lands in a later PR in the stack. Until then code blocks render uncolored, so this PR is a safe no-op at runtime.

This addresses #51 (does not close it) — it's the foundation for the highlighter that follows.

Testing

  • Ran the example app on iOS and Android; the new CodeHighlight Storybook story renders and accepts a syntaxColors palette without regressions to existing code block rendering.
  • Verified omitted keys fall back to the default palette / base color.

Screenshots

Screenshots are included in second PR (#625) as without real paring its not viable to do anything with those colors

PR Checklist

  • Code compiles and runs on iOS
  • Code compiles and runs on Android
  • Updated documentation/README if applicable
  • Ran example app to verify changes
  • E2E tests are passing
  • Required E2E tests have been added (if applicable)

@eszlamczyk
eszlamczyk marked this pull request as ready for review August 3, 2026 11:28
@eszlamczyk
eszlamczyk requested a review from Copilot August 3, 2026 11:29

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds end-to-end style support for per-token fenced code block syntax colors (markdownStyle.codeBlock.syntaxColors), wiring the palette through style types, JS normalization, native component specs, and iOS/Android renderers/highlighters (with documentation + a Storybook QA surface).

Changes:

  • Introduces syntaxColors on codeBlock styles (public + internal types) keyed by tree-sitter highlight token types.
  • Extends normalizeMarkdownStyle (and .web defaults) to provide a default GitHub-light palette and pass resolved token colors down to native.
  • Updates iOS/Android style/config + highlighter plumbing to consume the per-token palette; adds docs and an example Storybook story.

Reviewed changes

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

Show a summary per file
File Description
packages/react-native-enriched-markdown/src/types/MarkdownStyleInternal.ts Adds internal CodeBlockSyntaxColorsInternal and threads it into internal code block style.
packages/react-native-enriched-markdown/src/types/MarkdownStyle.ts Adds public codeBlock.syntaxColors API and documents token keys.
packages/react-native-enriched-markdown/src/normalizeMarkdownStyle.web.ts Adds web default syntaxColors for type compatibility/future parity.
packages/react-native-enriched-markdown/src/normalizeMarkdownStyle.ts Introduces default syntax palette and normalizes nested syntaxColors overrides.
packages/react-native-enriched-markdown/src/EnrichedMarkdownTextNativeComponent.ts Exposes syntaxColors through the native component codegen TS types.
packages/react-native-enriched-markdown/src/EnrichedMarkdownNativeComponent.ts Exposes syntaxColors through the native component codegen TS types.
packages/react-native-enriched-markdown/ios/views/ENRMCodeBlockContainerView.m Passes StyleConfig into code-block highlighting call.
packages/react-native-enriched-markdown/ios/utils/StylePropsUtils.h Applies per-token syntax colors from style props into StyleConfig by token ordinal.
packages/react-native-enriched-markdown/ios/utils/ENRMCodeBlockHighlighter.mm Switches token coloring to read per-token colors from StyleConfig; adds range-based applier.
packages/react-native-enriched-markdown/ios/utils/ENRMCodeBlockHighlighter.h Updates highlighting API to accept StyleConfig and adds ENRMApplyHighlightTokens.
packages/react-native-enriched-markdown/ios/styles/StyleConfig.mm Stores per-token syntax colors in StyleConfig and exposes getter/setter by ordinal.
packages/react-native-enriched-markdown/ios/styles/StyleConfig.h Declares StyleConfig API for per-token syntax colors.
packages/react-native-enriched-markdown/ios/renderer/CodeBlockRenderer.m Applies foreground-only token spans for the commonmark code-block renderer.
packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/views/CodeBlockContainerView.kt Passes CodeBlockStyle into the highlighter call.
packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/utils/common/CodeBlockHighlighter.kt Uses style-provided per-token colors + supports offset-based application.
packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/styles/CodeBlockStyle.kt Parses syntaxColors map into an ordinal-indexed color list.
packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/renderer/CodeBlockRenderer.kt Applies foreground-only token spans over rendered code range.
docs/STYLES.md Documents codeBlock.syntaxColors and each token key.
apps/react-native-example/.rnstorybook/stories/components/EnrichedMarkdownText/block/CodeHighlight.stories.tsx Adds Storybook story to exercise per-token palettes across multiple languages.

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

Comment thread packages/react-native-enriched-markdown/src/normalizeMarkdownStyle.ts Outdated
Comment thread packages/react-native-enriched-markdown/ios/styles/StyleConfig.mm Outdated
@eszlamczyk
eszlamczyk requested a review from hryhoriiK97 August 3, 2026 12:12
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