feat: add CodeBlock component for syntax highlighting (#40223)

## Description

- Introduced a new CodeBlock component that utilizes
react-syntax-highlighter for displaying code snippets with syntax
highlighting.
- Implemented responsive theming based on the current theme context
(dark/light).
- Added Storybook stories for the CodeBlock component to demonstrate its
usage and capabilities.

This addition enhances the design system by providing a reusable
component for code display.


## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14402871511>
> Commit: 81bb9cf84ab73e43edf8c59c6d8ecff03cb5eae0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14402871511&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 11 Apr 2025 12:40:24 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new CodeBlock component that renders code snippets with
syntax highlighting and theme support (light/dark modes).
  - Enabled customizable styling and behavior through property options.
- Added interactive examples for previewing different code formats and
sizes.
- Consolidated access to the CodeBlock component through new export
statements in the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts

@@ -0,0 +1 @@
+export * from "./src/index";

app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
+import {
+  atomOneDark as darkTheme,
+  lightfair as lightTheme,
+} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { getTypographyClassName, useThemeContext } from "@appsmith/wds-theming";
+
+export const CodeBlock = (props: SyntaxHighlighterProps) => {
+  const theme = useThemeContext();
+
+  return (
+    <SyntaxHighlighter
+      className={getTypographyClassName("caption")}
+      {...props}
+      style={theme.colorMode === "dark" ? darkTheme : lightTheme}
+      useInlineStyles
+    >
+      {props.children}
+    </SyntaxHighlighter>
+  );
+};

app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts

@@ -0,0 +1 @@
+export * from "./CodeBlock";

app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "@appsmith/wds";
+
+/**
+ * CodeBlock is a component that displays a code block.
+ */
+const meta: Meta<typeof CodeBlock> = {
+  component: CodeBlock,
+  title: "WDS/Widgets/Code Block",
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Main: Story = {
+  args: {
+    code: "{ test: 123 }",
+    language: "json",
+  },
+};
+
+/**
+ * The code block can render any code and will format based on the language
+ *
+ */
+export const Sizes: Story = {
+  render: (props) => (
+    <CodeBlock language={props.language} {...props}>
+      {props.code}
+    </CodeBlock>
+  ),
+};

app/client/packages/design-system/widgets/src/index.ts

@@ -36,6 +36,7 @@ export * from "./components/Calendar";
 export * from "./components/Datepicker";
 export * from "./components/TimeField";
 export * from "./components/MultiSelect";
+export * from "./components/CodeBlock";
 
 export * from "./utils";
 export * from "./hooks";