CodeBlock component - displays code with optional syntax highlighting and copy functionality
Business Perspective
Provides clear, readable code examples to technical teams implementing
security controls, improving comprehension and reducing implementation errors.
Critical for effective knowledge transfer and documentation. 📝
Technical Perspective
This component provides theme-aware code display without external dependencies.
It uses simple regex-based syntax highlighting for common languages (TypeScript,
JavaScript, Python, Bash). Supports copy-to-clipboard functionality and optional
line numbers.
Security Note: The 'code' prop should only contain trusted content. This
component uses dangerouslySetInnerHTML for syntax highlighting with HTML spans.
While HTML characters are escaped (&, <, >) before processing, the code input
should not come from untrusted user sources to prevent potential XSS risks.
CodeBlock component - displays code with optional syntax highlighting and copy functionality
Business Perspective
Provides clear, readable code examples to technical teams implementing security controls, improving comprehension and reducing implementation errors. Critical for effective knowledge transfer and documentation. 📝
Technical Perspective
This component provides theme-aware code display without external dependencies. It uses simple regex-based syntax highlighting for common languages (TypeScript, JavaScript, Python, Bash). Supports copy-to-clipboard functionality and optional line numbers.
Security Note: The 'code' prop should only contain trusted content. This component uses dangerouslySetInnerHTML for syntax highlighting with HTML spans. While HTML characters are escaped (&, <, >) before processing, the code input should not come from untrusted user sources to prevent potential XSS risks.