Merge pull request #31152 from SonilPro/'code-snippet-wrap-long-lines'

code snippet support for wrap long lines

.changeset/spicy-sides-grow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+added support for wrapLongLines option in CodeSnippet

packages/core-components/report.api.md

@@ -188,6 +188,7 @@ export interface CodeSnippetProps {
   showCopyCodeButton?: boolean;
   showLineNumbers?: boolean;
   text: string;
+  wrapLongLines?: boolean;
 }
 
 // Warning: (ae-forgotten-export) The symbol "Props_12" needs to be exported by the entry point index.d.ts

packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx

@@ -57,6 +57,14 @@ export interface CodeSnippetProps {
    * Array of line numbers to highlight
    */
   highlightedNumbers?: number[];
+  /**
+   * Whether to style the `<code>` block with `white-space: pre-wrap` or `white-space: pre`
+   *
+   * @remarks
+   *
+   * Default: false (`white-space: pre`)
+   */
+  wrapLongLines?: boolean;
   /**
    * Custom styles applied to code
    *
@@ -79,6 +87,7 @@ export function CodeSnippet(props: CodeSnippetProps) {
     language,
     showLineNumbers = false,
     highlightedNumbers,
+    wrapLongLines,
     customStyle,
     showCopyCodeButton = false,
   } = props;
@@ -94,6 +103,7 @@ export function CodeSnippet(props: CodeSnippetProps) {
         style={mode}
         showLineNumbers={showLineNumbers}
         wrapLines
+        wrapLongLines={wrapLongLines}
         lineNumberStyle={{ color: theme.palette.textVerySubtle }}
         lineProps={(lineNumber: number) =>
           highlightedNumbers?.includes(lineNumber)