Implementation:FlowiseAI Flowise CodeBlock
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Markdown Rendering |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
The CodeBlock component renders syntax-highlighted code with a language label header, a copy-to-clipboard button, and a download-as-file button.
Description
CodeBlock is a memoized React component that uses react-syntax-highlighter with the oneDark Prism theme to display code snippets. It renders a dark header bar showing the programming language name alongside two action buttons: a clipboard icon that copies the code value to the system clipboard (with a brief "Copied!" popover confirmation), and a download icon that saves the code as a file with the appropriate extension based on a programmingLanguages mapping (covering 22 languages including JavaScript, Python, Go, Rust, SQL, and more). The component supports both fixed-width (300px) and full-width rendering via the isFullWidth prop.
Usage
This component is used by MemoizedReactMarkdown to render fenced code blocks within AI chat responses, and can be used standalone wherever code display with copy/download functionality is needed.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/markdown/CodeBlock.jsx
- Lines: 1-123
Signature
export const CodeBlock = memo(({ language, chatflowid, isFullWidth, value }) => {
// ...
})
Import
import { CodeBlock } from '@/ui-component/markdown/CodeBlock'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| language | string | No | Programming language identifier for syntax highlighting (e.g., "javascript", "python") |
| chatflowid | string | No | Chatflow ID used to generate the download filename |
| isFullWidth | bool | No | When true, renders at full container width; when false, renders at 300px |
| value | string | No | The code content to display and make available for copy/download |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React element | A styled code block with syntax highlighting, copy button, and download button |
Usage Examples
Basic Usage
<CodeBlock
language="python"
chatflowid="flow_abc123"
isFullWidth={true}
value={`def greet(name):\n return f"Hello, {name}!"`}
/>