diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap
index 350c30adf8e..c9b86a1b226 100644
--- a/src/components/code/__snapshots__/_code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/_code_block.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code js hljs javascript"
@@ -19,7 +19,7 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       aria-label="aria-label"
@@ -38,7 +38,7 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index e6e8b60208b..5674dc2a4d4 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
 "<div>
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
-    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap\\">
+    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
         <span class=\\"hljs-keyword\\">const</span>value =
         <span class=\\"hljs-string\\">'State 1'</span>
@@ -16,7 +16,7 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
 exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
 "<div>
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
-    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap\\">
+    <pre class=\\"euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
         <span class=\\"hljs-keyword\\">const</span>value =
         <span class=\\"hljs-string\\">'State 2'</span>
@@ -31,7 +31,7 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -48,7 +48,7 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontMedium euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -65,7 +65,7 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -82,7 +82,7 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -122,7 +122,7 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code html hljs xml"
@@ -140,7 +140,7 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
   style="max-height: 200px;"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
     style="max-height: 200px;"
   >
     <code
@@ -173,7 +173,7 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -190,7 +190,7 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingMedium"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -207,7 +207,7 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -224,7 +224,7 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -241,7 +241,7 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       class="euiCodeBlock__code"
@@ -258,7 +258,7 @@ exports[`EuiCodeBlock renders a code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre_whiteSpacePreWrap"
+    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
       aria-label="aria-label"
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index f6b6d695150..276434be20c 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -9,14 +9,13 @@
     height: 100%;
     overflow: auto;
     display: block;
-    white-space: pre-wrap;
   }
 
-  .euiCodeBlock__pre_whiteSpacePre {
+  .euiCodeBlock__pre--whiteSpacePre {
     white-space: pre;
   }
 
-  .euiCodeBlock__pre_whiteSpacePreWrap {
+  .euiCodeBlock__pre--whiteSpacePreWrap {
     white-space: pre-wrap;
   }
 
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 94ebc26ec67..14fc0016ccf 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -56,9 +56,9 @@ interface Props {
   paddingSize: PaddingSize;
   transparentBackground: boolean;
   /**
-   * specify how white-space inside the element is handled
-   * pre respects line breaks/white space but doesn't force them (doesn't wrap the line)
-   * pre-wrap respects respects line breaks/white space but does force them (wrap the line)
+   * Specify how `white-space` inside the element is handled.
+   * `pre` respects line breaks/white space but doesn't force them to wrap the line
+   * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
    */
   whiteSpace?: 'pre' | 'pre-wrap';
 }
@@ -178,8 +178,8 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
     const codeClasses = classNames('euiCodeBlock__code', language);
 
     const preClasses = classNames('euiCodeBlock__pre', {
-      euiCodeBlock__pre_whiteSpacePre: whiteSpace === 'pre',
-      euiCodeBlock__pre_whiteSpacePreWrap: whiteSpace === 'pre-wrap',
+      'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre',
+      'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap',
     });
 
     const optionalStyles: CSSProperties = {};