[EuiCodeBlock] Virtualized option

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
+- Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952))
 
 **Bug fixes**
 

src-docs/src/views/code/code_example.js

@@ -25,6 +25,14 @@ const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyab
 </EuiCodeBlock>
 `;
 
+import CodeBlockVirtualized from './virtualized';
+const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
+const codeBlockVirtualizedHtml = renderToHtml(CodeBlockVirtualized);
+const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized overflowHeight={300}>
+{ \`{}\` }
+</EuiCodeBlock>
+`;
+
 import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
 const codeBlockPreHtml = renderToHtml(CodeBlockPre);
@@ -37,7 +45,7 @@ export const CodeExample = {
         <p>
           The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong>{' '}
           components support{' '}
-          <EuiLink external href="https://github.com/wooorm/refractor#syntaxes">
+          <EuiLink external href="https://prismjs.com/#supported-languages">
             all language syntaxes
           </EuiLink>{' '}
           supported by the
@@ -108,6 +116,30 @@ export const CodeExample = {
       demo: <CodeBlock />,
       playground: codeBlockConfig,
     },
+    {
+      title: 'Code block virtualization',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockVirtualizedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: codeBlockVirtualizedHtml,
+        },
+      ],
+      text: (
+        <p>
+          For large blocks of code, set <EuiCode>isVirtualized</EuiCode> to
+          reduce the number of rendered rows and improve load times. Note that{' '}
+          <EuiCode>overflowHeight</EuiCode> is required when using this
+          configuration.
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockVirtualizedSnippet,
+      demo: <CodeBlockVirtualized />,
+    },
     {
       title: 'Code block and white-space',
       source: [