Implementation:FlowiseAI Flowise CodeBlock

Knowledge Sources	FlowiseAI Flowise
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}!"`}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Chat_Prediction