docs(CodeBlock): recommend using String.raw`` (#10307)

patternfly · May 8, 2024 · 15508cb · 15508cb
1 parent 86dcc02
commit 15508cb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md
@@ -8,14 +8,20 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
+**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
+
+Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.
+
 ## Examples
 
 ### Basic
 
 ```ts file="./CodeBlockBasic.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./CodeBlockExpandable.tsx"
+
 ```
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx
@@ -14,7 +14,7 @@ export const BasicCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo0oooo00ooo

diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx
@@ -27,19 +27,19 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+  const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo
 spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo`;
-  const expandedCode = `spec:
+  const expandedCode = String.raw`spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;