Switch to CodeSnippet component

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx

@@ -22,6 +22,7 @@ import {
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
 import {
+  CodeSnippet,
   Table,
   TableColumn,
   TableFilter,
@@ -152,7 +153,7 @@ export const ApiExplorerTable = ({
   if (error) {
     return (
       <WarningPanel severity="error" title="Could not fetch catalog entities.">
-        <code>{error.toString()}</code>
+        <CodeSnippet language="text" text={error.toString()} />
       </WarningPanel>
     );
   }

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -19,7 +19,13 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
-import { Table, TableColumn, TableProps, WarningPanel } from '@backstage/core';
+import {
+  CodeSnippet,
+  Table,
+  TableColumn,
+  TableProps,
+  WarningPanel,
+} from '@backstage/core';
 import {
   EntityRefLink,
   EntityRefLinks,
@@ -131,7 +137,7 @@ export const CatalogTable = ({
           severity="error"
           title="Could not fetch catalog entities."
         >
-          <code>{error.toString()}</code>
+          <CodeSnippet language="text" text={error.toString()} />
         </WarningPanel>
       </div>
     );

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  CodeSnippet,
   Content,
   Header,
   ItemCard,
@@ -67,7 +68,7 @@ export const TechDocsHome = () => {
             severity="error"
             title="Could not load available documentation."
           >
-            <code>{error.message}</code>
+            <CodeSnippet language="text" text={error.toString()} />
           </WarningPanel>
         </Content>
       </Page>