docs: migrate code blocks to native Prism and restyle API reference pages#13299
Conversation
Replace the custom CodeSnippet component (@code-hike/lighter) with Docusaurus's native @theme/CodeBlock across all MDX files (current and versioned docs). Add bash to additionalLanguages and swizzle prism-include-languages.js to add custom token highlighting for shell commands and flags. Remove @code-hike/mdx dependency.
Darken inline code background, increase horizontal padding to 0.4em, fix vertical alignment, and remove border in light mode.
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis PR removes the Code Hike integration and custom ChangesDocumentation Migration to Docusaurus CodeBlock
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 7 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (7 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
✅ Test Coverage AdvisorNo source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉
|
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/css/custom.css`:
- Line 1: Replace the `@import` url(...) usage in the docs/css/custom.css top line
with string notation to satisfy the Stylelint import-notation rule: update the
`@import` statement that references the Google Fonts URL (the existing `@import`
line) to use a plain quoted string form instead of url(...), so the external
font import is written as a string-based `@import`.
In `@docs/css/tokens.css`:
- Around line 9-12: The CSS custom properties --ifm-font-family-base and
--ifm-font-family-monospace contain unquoted font names that trigger the
stylelint value-keyword-case rule; wrap any non-generic or multi-word font
family names (e.g., Geist, JetBrains Mono, Geist Mono, SFMono-Regular, Apple
Color Emoji, Segoe UI emoji) in double quotes while leaving generic family
keywords (sans-serif, monospace, etc.) unquoted so the font-family stacks comply
with the linter.
In `@docs/docs/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock tags both reference the same
placeholder {RecursiveCharacterSource}, causing duplicate content; update the
documentation to render targeted excerpts instead—replace the first CodeBlock's
placeholder with an inputs-specific snippet (e.g., {RecursiveCharacterInputs} or
a source-range that selects constructor/parameters) and replace the second
CodeBlock's placeholder with a methods-specific snippet (e.g.,
{RecursiveCharacterMethods} or a source-range that selects class methods like
RecursiveCharacterTextSplitter.split/recursive_split) so the “inputs” block
shows only input/constructor-related lines and the “methods” block shows only
the method implementations.
In `@docs/versioned_docs/version-1.8.0/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock instances both reference the same
placeholder {RecursiveCharacterSource}, so both render the full source; change
the second CodeBlock to reference a sliced/filtered snippet that shows only the
methods (e.g. replace {RecursiveCharacterSource} with a distinct snippet token
like {RecursiveCharacterMethods} or use the MDX CodeBlock's slicing/properties
to select only the methods in recursive_character.py), and ensure the first
remains the inputs snippet (e.g. {RecursiveCharacterInputs}) so readers see the
focused sections for RecursiveCharacterTextSplitter (class/function names:
RecursiveCharacterTextSplitter and RecursiveCharacterSource).
In `@docs/versioned_docs/version-1.9.0/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock usages both insert the full
{RecursiveCharacterSource} which makes the "inputs" vs "methods" titles
inaccurate; update the docs by either slicing the source so the first CodeBlock
shows only the input excerpt and the second shows only the method excerpt from
recursive_character.py, or change the titles to reflect that both blocks render
the same {RecursiveCharacterSource} (merge into one block or retitle both as the
same excerpt). Locate the CodeBlock entries that reference
{RecursiveCharacterSource} and modify them to reference the correct sliced
source snippets or unified title so the labels match the rendered content for
RecursiveCharacterTextSplitter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f2567e51-e378-4864-a28c-f55d942c90be
⛔ Files ignored due to path filters (1)
docs/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (33)
docs/README.mddocs/css/code.cssdocs/css/custom.cssdocs/css/tokens.cssdocs/docs/API-Reference/api-build.mdxdocs/docs/API-Reference/api-files.mdxdocs/docs/API-Reference/api-flows-run.mdxdocs/docs/API-Reference/api-flows.mdxdocs/docs/API-Reference/api-logs.mdxdocs/docs/API-Reference/api-monitor.mdxdocs/docs/API-Reference/api-openai-responses.mdxdocs/docs/API-Reference/api-projects.mdxdocs/docs/API-Reference/api-reference-api-examples.mdxdocs/docs/API-Reference/api-users.mdxdocs/docs/API-Reference/workflows-api.mdxdocs/docs/Components/concepts-components.mdxdocs/docusaurus.config.jsdocs/package.jsondocs/src/components/CodeSnippet.tsxdocs/src/theme/prism-include-languages.jsdocs/versioned_docs/version-1.8.0/Components/concepts-components.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-build.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-files.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-flows-run.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-flows.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-logs.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-monitor.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-openai-responses.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-projects.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-reference-api-examples.mdxdocs/versioned_docs/version-1.9.0/API-Reference/api-users.mdxdocs/versioned_docs/version-1.9.0/API-Reference/workflows-api.mdxdocs/versioned_docs/version-1.9.0/Components/concepts-components.mdx
💤 Files with no reviewable changes (2)
- docs/src/components/CodeSnippet.tsx
- docs/package.json
| @@ -1,3 +1,4 @@ | |||
| @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"); | |||
There was a problem hiding this comment.
Use configured import notation for external font import.
Line 1 violates the Stylelint import-notation rule; use string notation to avoid lint failure.
Proposed fix
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");
+@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"); | |
| `@import` "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"; |
🧰 Tools
🪛 Stylelint (17.11.1)
[error] 1-1: Expected "url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap")" to be ""https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"" (import-notation)
(import-notation)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/css/custom.css` at line 1, Replace the `@import` url(...) usage in the
docs/css/custom.css top line with string notation to satisfy the Stylelint
import-notation rule: update the `@import` statement that references the Google
Fonts URL (the existing `@import` line) to use a plain quoted string form instead
of url(...), so the external font import is written as a string-based `@import`.
| --ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont, | ||
| Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji"; | ||
| --ifm-font-family-monospace: "Geist Mono", "SFMono-Regular", "Roboto Mono", | ||
| Consolas, "Liberation Mono", Menlo, Courier, monospace; | ||
| --ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular", | ||
| Consolas, "Liberation Mono", Menlo, monospace; |
There was a problem hiding this comment.
Fix stylelint value-keyword-case failures in font-family stacks.
Line 9 through Line 12 use unquoted font names that violate the configured Stylelint rule and can fail CI.
Proposed fix
- --ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont,
- Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
+ --ifm-font-family-base: "Geist", "Inter", -apple-system, "BlinkMacSystemFont",
+ "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI emoji";
- --ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular",
- Consolas, "Liberation Mono", Menlo, monospace;
+ --ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular",
+ "Consolas", "Liberation Mono", "Menlo", monospace;🧰 Tools
🪛 Stylelint (17.11.1)
[error] 9-9: Expected "Inter" to be "inter" (value-keyword-case)
(value-keyword-case)
[error] 9-9: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 10-10: Expected "Helvetica" to be "helvetica" (value-keyword-case)
(value-keyword-case)
[error] 10-10: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 12-12: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
[error] 12-12: Expected "Menlo" to be "menlo" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/css/tokens.css` around lines 9 - 12, The CSS custom properties
--ifm-font-family-base and --ifm-font-family-monospace contain unquoted font
names that trigger the stylelint value-keyword-case rule; wrap any non-generic
or multi-word font family names (e.g., Geist, JetBrains Mono, Geist Mono,
SFMono-Regular, Apple Color Emoji, Segoe UI emoji) in double quotes while
leaving generic family keywords (sans-serif, monospace, etc.) unquoted so the
font-family stacks comply with the linter.
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock> | ||
|
|
||
| Additionally, components have methods or functions that handle their functionality. | ||
| For example, the `RecursiveCharacterTextSplitter` has two methods: | ||
|
|
||
| <CodeSnippet | ||
| source={RecursiveCharacterSource} | ||
| startLine={45} | ||
| endLine={60} | ||
| language="python" | ||
| title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" | ||
| showLineNumbers | ||
| /> | ||
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock> |
There was a problem hiding this comment.
Restore targeted snippets for inputs vs methods instead of rendering the same full source twice.
Both blocks currently render RecursiveCharacterSource unchanged, so the “inputs” and “methods” sections show duplicate content rather than focused excerpts.
Suggested fix
import RecursiveCharacterSource from "!!raw-loader!`@langflow/src/lfx/src/lfx/components/langchain_utilities/recursive_character.py`";
+const recursiveCharacterLines = RecursiveCharacterSource.split("\n");
+// Keep these ranges aligned with the original sections previously shown via startLine/endLine.
+const recursiveCharacterInputsSource = recursiveCharacterLines.slice(/* inputsStart */ 0, /* inputsEnd */ 0).join("\n");
+const recursiveCharacterMethodsSource = recursiveCharacterLines.slice(/* methodsStart */ 0, /* methodsEnd */ 0).join("\n");
-<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{recursiveCharacterInputsSource}</CodeBlock>
-<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{recursiveCharacterMethodsSource}</CodeBlock>🧰 Tools
🪛 LanguageTool
[grammar] ~171-~171: Ensure spelling is correct
Context: ...cursive_character.py)" showLineNumbers>{RecursiveCharacterSource} Additionally, components have methods or...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~176-~176: Ensure spelling is correct
Context: ...cursive_character.py)" showLineNumbers>{RecursiveCharacterSource} The get_data_input method retrieves th...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/docs/Components/concepts-components.mdx` around lines 171 - 176, The two
CodeBlock tags both reference the same placeholder {RecursiveCharacterSource},
causing duplicate content; update the documentation to render targeted excerpts
instead—replace the first CodeBlock's placeholder with an inputs-specific
snippet (e.g., {RecursiveCharacterInputs} or a source-range that selects
constructor/parameters) and replace the second CodeBlock's placeholder with a
methods-specific snippet (e.g., {RecursiveCharacterMethods} or a source-range
that selects class methods like
RecursiveCharacterTextSplitter.split/recursive_split) so the “inputs” block
shows only input/constructor-related lines and the “methods” block shows only
the method implementations.
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock> | ||
|
|
||
| Additionally, components have methods or functions that handle their functionality. | ||
| For example, the `RecursiveCharacterTextSplitter` has two methods: | ||
|
|
||
| <CodeSnippet | ||
| source={RecursiveCharacterSource} | ||
| startLine={45} | ||
| endLine={60} | ||
| language="python" | ||
| title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" | ||
| showLineNumbers | ||
| /> | ||
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock> |
There was a problem hiding this comment.
Both titled snippets currently render the same full source content.
The “inputs” and “methods” sections now both show RecursiveCharacterSource without slicing/filtering, so readers won’t see the intended focused sections.
💡 Suggested fix
import RecursiveCharacterSource from "!!raw-loader!`@langflow/src/lfx/src/lfx/components/langchain_utilities/recursive_character.py`";
+const recursiveCharacterLines = RecursiveCharacterSource.split("\n");
+// Adjust slice bounds to the actual ranges for inputs and methods in recursive_character.py
+const recursiveCharacterInputsSource = recursiveCharacterLines.slice(/* start */, /* end */).join("\n");
+const recursiveCharacterMethodsSource = recursiveCharacterLines.slice(/* start */, /* end */).join("\n");
-<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{recursiveCharacterInputsSource}</CodeBlock>
-<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{recursiveCharacterMethodsSource}</CodeBlock>🧰 Tools
🪛 LanguageTool
[grammar] ~171-~171: Ensure spelling is correct
Context: ... inputs (from recursive_character.py)">{RecursiveCharacterSource} Additionally, components have methods or...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~176-~176: Ensure spelling is correct
Context: ...methods (from recursive_character.py)">{RecursiveCharacterSource} The get_data_input method retrieves th...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/versioned_docs/version-1.8.0/Components/concepts-components.mdx` around
lines 171 - 176, The two CodeBlock instances both reference the same placeholder
{RecursiveCharacterSource}, so both render the full source; change the second
CodeBlock to reference a sliced/filtered snippet that shows only the methods
(e.g. replace {RecursiveCharacterSource} with a distinct snippet token like
{RecursiveCharacterMethods} or use the MDX CodeBlock's slicing/properties to
select only the methods in recursive_character.py), and ensure the first remains
the inputs snippet (e.g. {RecursiveCharacterInputs}) so readers see the focused
sections for RecursiveCharacterTextSplitter (class/function names:
RecursiveCharacterTextSplitter and RecursiveCharacterSource).
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock> | ||
|
|
||
| Additionally, components have methods or functions that handle their functionality. | ||
| For example, the `RecursiveCharacterTextSplitter` has two methods: | ||
|
|
||
| <CodeSnippet | ||
| source={RecursiveCharacterSource} | ||
| startLine={45} | ||
| endLine={60} | ||
| language="python" | ||
| title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" | ||
| showLineNumbers | ||
| /> | ||
| <CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock> |
There was a problem hiding this comment.
The two code samples are now misleadingly identical.
Line 171 and Line 176 both render the full RecursiveCharacterSource, but the titles imply different excerpts (“inputs” vs “methods”). This regresses doc accuracy after removing startLine/endLine. Please either slice the source per section or retitle/merge so labels match rendered content.
🧰 Tools
🪛 LanguageTool
[grammar] ~171-~171: Ensure spelling is correct
Context: ... inputs (from recursive_character.py)">{RecursiveCharacterSource} Additionally, components have methods or...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~176-~176: Ensure spelling is correct
Context: ...methods (from recursive_character.py)">{RecursiveCharacterSource} The get_data_input method retrieves th...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/versioned_docs/version-1.9.0/Components/concepts-components.mdx` around
lines 171 - 176, The two CodeBlock usages both insert the full
{RecursiveCharacterSource} which makes the "inputs" vs "methods" titles
inaccurate; update the docs by either slicing the source so the first CodeBlock
shows only the input excerpt and the second shows only the method excerpt from
recursive_character.py, or change the titles to reflect that both blocks render
the same {RecursiveCharacterSource} (merge into one block or retitle both as the
same excerpt). Locate the CodeBlock entries that reference
{RecursiveCharacterSource} and modify them to reference the correct sliced
source snippets or unified title so the labels match the rendered content for
RecursiveCharacterTextSplitter.
- Inline RecursiveCharacterTextSplitter inputs and methods as literal code blocks in concepts-components.mdx (current + 1.8.0 + 1.9.0), restoring the focused slices lost when migrating from CodeSnippet - Scope bash-plain Prism regex to unambiguous CLI subcommands only, removing generic bash builtins (run, add, get, set, start, stop, etc.) - Merge duplicate .theme-code-block CSS rules into a single declaration
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
The Redoc two-column layout (sidebar 300px + api-content 1300px) totals 1600px, expanding .main-wrapper beyond narrower viewports because it has overflow:visible. Clips at .main-wrapper using the html.plugin-redoc class that Docusaurus adds on API pages only.
- Disable Redoc built-in search (disableSearch: true) - Pin sidebar top to navbar height (top: 60px) so it never hides behind navbar - Remove hardcoded #111 background from dark mode sidebar
The _clean_descriptions function was converting newlines to <br> tags, mixing HTML with Markdown. CommonMark stops parsing Markdown headings (###) inside HTML blocks, causing them to appear as literal text in Redoc. Replace the <br> conversion with a simple strip() so descriptions remain pure Markdown and Redoc renders headings, lists, and code blocks correctly.
- Set primaryColor to #F471B5 (Langflow pink) - Add HTTP method badge colors matching Langflow palette - Set schema.linesColor and requireLabelColor to brand pink - Set inline code color to pink, headers to #e3e3e3 - Set sidebar background to #18181b (matches frontend dark bg) - Set rightPanel background to #0d0d0f, codeBlock to #161618 - Refactor: move color config from CSS to theme.theme where safe - Remove dead search input CSS (search disabled via disableSearch:true) - Consolidate duplicate .menu-content rules
- redocA11y: match only real Redoc routes (/api, /api/workflow) — a bare
startsWith("/api") also matched docs pages like /api-request and
leaked one body MutationObserver per navigation
- codeBlockA11y: also observe the hidden attribute — Docusaurus tabs
toggle panels via hidden (no childList mutation), so scrollable blocks
inside an initially hidden tab were never re-evaluated for tabindex
- Extract Prism themes to src/prismThemes.js (docusaurus.config.js was
past the 600-line red flag)
- concepts-components.mdx (current + 1.9.0 + 1.8.0): comment pointing
hardcoded snippets to recursive_character.py to mitigate drift
Validated: clean build + IBM Equal Access scans 4/4 passing.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
mendonk
left a comment
There was a problem hiding this comment.
I moved the 1.10 API spec to this PR and updated the 1.10 docs. Should be good to go.
|
Build successful! ✅ |
Summary
This PR contains three pieces of docs work: the migration of code blocks to native Prism, the API reference styling overhaul merged in from #13405, and a WCAG AA accessibility pass over both validated with the IBM Equal Access checker.
Code blocks → native Prism
CodeSnippetcomponent (@code-hike/lighter) with Docusaurus's native@theme/CodeBlockacross all MDX files (current docs + versioned 1.8.0 and 1.9.0)bashtoadditionalLanguagesindocusaurus.config.js— this was the root cause of missing bash highlighting in Docusaurus v3 (prism-react-renderer v2 doesn't bundle bash by default)prism-include-languages.jsto add custom Prism tokens:function-modern(cyan for CLI tools likeuv,pip,docker),flag(cyan for--flags), andbash-plain(plain color for subcommands likeinstall,run)@code-hike/mdxdependency and delete unusedCodeSnippet.tsxandprismPythonImport.js0.4emhorizontal padding, no border in light modeAPI docs styling (from #13405)
Comprehensive visual overhaul of the Redocusaurus API reference pages to align with the Langflow design system.
Layout & structure
overflow-x: clipon.main-wrapper)top: 60pxon.menu-content)::afterborder between sections)Theming
--redoc-bg-primary/secondary,--redoc-border-color,--redoc-text-*) — single source of truth#18181b) with border separator#111) / light (#f5f5f5)Components
h3) with consistent padding and border separatorsColors & brand
#F471B5) for active sidebar items, schema lines, code tokensCode quality
2.5.0— DOM version noted on all structural selectors!importantusage justified in file header (Redoc CSS-in-JS requires it)sidebar.backgroundColor: "transparent"in config hands background control to CSSAccessibility (IBM Equal Access / WCAG AA)
Audited with the IBM Equal Access accessibility checker in both themes (
npx acheckeragainst a production build; dark theme scanned via a temporarycolorMode.defaultModeflip). Violations went from 3,533 to 0 across the scanned pages (home, quickstart, component page,/api) in both themes — including Redoc-internal DOM gaps (layout tables, svg/select labels) patched via theredocA11yclient module.Tooling
accessibility-checkerdevDependency +aceconfig.js(policyIBM_Accessibility, reports indocs/a11y-results/, gitignored)Docs site
#d11074— passes 4.5:1 on white and on the inline-code background#798197TabItemswizzled to give tabpanels an accessible namecodeBlockA11yclient module: scrollable code blocks getrole="region"+ unique label; non-scrollable ones lose the needlesstabindexAPI reference
redocA11yclient module:role="main"/role="navigation"landmarks (fixes 1,924aria_content_in_landmarkviolations), dark-theme response chip color patching (a single Redoc theme color cannot pass on both light and dark derived backgrounds), and semantic patches for Redoc DOM gaps —aria-hiddenon decorative svgs,aria-labelon content-type selects,role="presentation"on header-less 2-column layout tables#cd1072for links/required markers/constraint chips/schema tree lines; compliant grays for utility buttons and type labels!importantrule), oneOf variant buttonsTest plan
cd docs && npm install && npm startand verify bash code blocks are highlighted/apiand/api/workflowpagesnpx achecker http://localhost:3000/apiagainst a built docs site and confirm 0 violationsSummary by CodeRabbit
Release Notes
Style
Documentation
Chores