From c67d2c4db6011f1c2ba595912ba476b3db7c2708 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 31 Aug 2020 07:56:27 -0700 Subject: [PATCH 1/6] basics of prism working as a separate component for now --- package.json | 2 + src-docs/src/views/code/code_example.js | 19 ++++ src-docs/src/views/code/code_prism.js | 59 ++++++++++++ src/components/code/_code_block_prism.scss | 101 +++++++++++++++++++++ src/components/code/_index.scss | 1 + src/components/code/code_block_prism.tsx | 90 ++++++++++++++++++ src/components/code/index.ts | 1 + src/components/index.js | 7 +- yarn.lock | 96 ++++++++++++++++++-- 9 files changed, 369 insertions(+), 7 deletions(-) create mode 100644 src-docs/src/views/code/code_prism.js create mode 100644 src/components/code/_code_block_prism.scss create mode 100644 src/components/code/code_block_prism.tsx diff --git a/package.json b/package.json index 2d9ac97f8d6..4170587807e 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@types/numeral": "^0.0.25", "@types/react-beautiful-dnd": "^12.1.2", "@types/react-input-autosize": "^2.0.2", + "@types/react-syntax-highlighter": "^11.0.5", "@types/react-virtualized-auto-sizer": "^1.0.0", "@types/react-window": "^1.8.1", "@types/vfile-message": "^2.0.0", @@ -69,6 +70,7 @@ "react-focus-on": "^3.5.0", "react-input-autosize": "^2.2.2", "react-is": "~16.3.0", + "react-syntax-highlighter": "^13.5.1", "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.5", "rehype-raw": "^4.0.1", diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 47ae5606530..1688f4ca6a4 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -24,9 +24,28 @@ import CodeBlockPre from './code_block_pre'; const codeBlockPreSource = require('!!raw-loader!./code_block_pre'); const codeBlockPreHtml = renderToHtml(CodeBlockPre); +import CodeBlockPrism from './code_prism'; +const codeBlockPrismSource = require('!!raw-loader!./code_prism'); +const codeBlockPrismHtml = renderToHtml(CodeBlockPrism); + export const CodeExample = { title: 'Code', sections: [ + { + title: 'Prism', + source: [ + { + type: GuideSectionTypes.JS, + code: codeBlockPrismSource, + }, + { + type: GuideSectionTypes.HTML, + code: codeBlockPrismHtml, + }, + ], + text:

Prism

, + demo: , + }, { title: 'Inline', source: [ diff --git a/src-docs/src/views/code/code_prism.js b/src-docs/src/views/code/code_prism.js new file mode 100644 index 00000000000..f99a9cbde1b --- /dev/null +++ b/src-docs/src/views/code/code_prism.js @@ -0,0 +1,59 @@ +import React from 'react'; + +import { EuiCodeBlockPrism } from '../../../../src/components'; + +const codeExample = ` +import React, { useState } from 'react'; + +import { + EuiBadge, + EuiButton, + EuiFocusTrap, + EuiPanel, + EuiSpacer, + EuiText, +} from '../../../../src/components'; + +import FormExample from '../form_compressed/form_compressed'; + +export default () => { + const [isDisabled, changeDisabled] = useState(true); + + const toggleDisabled = () => changeDisabled(!isDisabled); + + return ( +
+ Trap is {isDisabled ? 'disabled' : 'enabled'} + + + + + + + + + {something} + + + + + + + + The button below is not focusable by keyboard as long as the focus trap + is enabled. + + + alert('External event triggered')}> + External Focusable Element + +
+ ); +}; +`; + +export default () => ( +
+ {codeExample} +
+); diff --git a/src/components/code/_code_block_prism.scss b/src/components/code/_code_block_prism.scss new file mode 100644 index 00000000000..de7e81f5945 --- /dev/null +++ b/src/components/code/_code_block_prism.scss @@ -0,0 +1,101 @@ +.euiCodeBlock { + pre[class*="language-"] { + @include euiScrollBar; + height: 100%; + overflow: auto; + display: block; + } + + /* Code blocks */ + pre[class*="language-"] { + white-space: pre; + } + code[class*="language-"] { + @include euiCodeFont; + display: block; + line-height: $euiLineHeight; + font-weight: $euiFontWeightRegular; + font-size: inherit; + } + + /* Inline code */ + :not(pre) > code[class*="language-"] { + display: inline-block; + white-space: pre; + color: $euiTextColor; + font-size: 90%; /* 1 */ + padding: 0 $euiSizeS; + background: $euiCodeBlockBackgroundColor; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: $euiCodeBlockCommentColor; + font-style: italic; + } + + .token.punctuation { + opacity: .7; + } + + .token.namespace { + opacity: .7; + } + + .token.property, + .token.tag, + .token.boolean, + .token.number, + .token.constant, + .token.symbol { + color: $euiCodeBlockSelectorTagColor; + font-weight: $euiFontWeightBold; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: $euiCodeBlockStringColor; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: hsl(40, 90%, 60%); + } + + .token.atrule, + .token.attr-value, + .token.keyword { + color: $euiCodeBlockKeywordColor; + } + + .token.regex, + .token.important { + color: #e90; + } + + .token.important, + .token.bold { + font-weight: $euiFontWeightBold; + } + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } + + .token.deleted { + color: $euiCodeBlockDeletionColor; + } +} diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss index f984a214adf..30c81e0053a 100644 --- a/src/components/code/_index.scss +++ b/src/components/code/_index.scss @@ -1 +1,2 @@ @import 'code_block'; +@import 'code_block_prism'; diff --git a/src/components/code/code_block_prism.tsx b/src/components/code/code_block_prism.tsx new file mode 100644 index 00000000000..3e8c04167c1 --- /dev/null +++ b/src/components/code/code_block_prism.tsx @@ -0,0 +1,90 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import { PrismAsyncLight } from 'react-syntax-highlighter'; +import classNames from 'classnames'; +import { CommonProps, keysOf } from '../common'; +import { FontSize, PaddingSize } from './code_block'; + +const fontSizeToClassNameMap = { + s: 'euiCodeBlock--fontSmall', + m: 'euiCodeBlock--fontMedium', + l: 'euiCodeBlock--fontLarge', +}; + +export const FONT_SIZES = keysOf(fontSizeToClassNameMap); + +const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = { + none: '', + s: 'euiCodeBlock--paddingSmall', + m: 'euiCodeBlock--paddingMedium', + l: 'euiCodeBlock--paddingLarge', +}; + +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); + +export type EuiCodeBlockPrismProps = CommonProps & + Omit, 'color'> & { + language?: string; + startingLineNumber?: number; + overflowHeight?: number; + isCopyable?: number; + fontSize?: FontSize; + paddingSize?: PaddingSize; + transparentBackground?: boolean; + inline?: boolean; + }; + +export const EuiCodeBlockPrism: FunctionComponent = ({ + children, + language, + className, + startingLineNumber = 1, + transparentBackground = false, + inline = false, + paddingSize = 'l', + fontSize = 's', + isCopyable = false, + overflowHeight, + ...rest +}) => { + const classes = classNames( + 'euiCodeBlock', + fontSizeToClassNameMap[fontSize], + paddingSizeToClassNameMap[paddingSize], + { + 'euiCodeBlock--transparentBackground': transparentBackground, + 'euiCodeBlock--inline': inline, + 'euiCodeBlock--hasControls': isCopyable || overflowHeight, + }, + className + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/code/index.ts b/src/components/code/index.ts index 41bba956f45..a41bd079067 100644 --- a/src/components/code/index.ts +++ b/src/components/code/index.ts @@ -20,3 +20,4 @@ export { EuiCode, EuiCodeProps } from './code'; export { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; export { EuiCodeBlockImpl } from './_code_block'; +export { EuiCodeBlockPrism } from './code_block_prism'; diff --git a/src/components/index.js b/src/components/index.js index 837b3aa3291..604607b7c76 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -54,7 +54,12 @@ export { EuiCallOut } from './call_out'; export { EuiCard, EuiCheckableCard } from './card'; -export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code'; +export { + EuiCode, + EuiCodeBlock, + EuiCodeBlockImpl, + EuiCodeBlockPrism, +} from './code'; export { EuiCodeEditor } from './code_editor'; diff --git a/yarn.lock b/yarn.lock index 84f0aee1a22..9c006c28954 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1162,6 +1162,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.3.1": + version "7.11.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" + integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.4.5": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" @@ -1679,6 +1686,13 @@ dependencies: "@types/react" "*" +"@types/react-syntax-highlighter@^11.0.5": + version "11.0.5" + resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" + integrity sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg== + dependencies: + "@types/react" "*" + "@types/react-virtualized-auto-sizer@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272" @@ -3953,6 +3967,15 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk= +clipboard@^2.0.0: + version "2.0.6" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" + integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" @@ -5351,6 +5374,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -7789,6 +7817,13 @@ gonzales-pe@^4.2.2: dependencies: minimist "1.1.x" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + got@5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/got/-/got-5.6.0.tgz#bb1d7ee163b78082bbc8eb836f3f395004ea6fbf" @@ -8172,16 +8207,16 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== +highlight.js@^10.1.1, highlight.js@~10.1.0: + version "10.1.2" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c" + integrity sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA== + highlight.js@^9.12.0: version "9.12.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4= -highlight.js@~10.1.0: - version "10.1.2" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c" - integrity sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA== - history@^4.9.0: version "4.10.1" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" @@ -10660,7 +10695,7 @@ lowercase-keys@^1.0.0: resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306" integrity sha1-TjNms55/VFfjXxMkvfb4jQv8cwY= -lowlight@^1.2.0: +lowlight@^1.14.0, lowlight@^1.2.0: version "1.14.0" resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.14.0.tgz#83ebc143fec0f9e6c0d3deffe01be129ce56b108" integrity sha512-N2E7zTM7r1CwbzwspPxJvmjAbxljCPThTFawEX2Z7+P3NGrrvY54u8kyU16IY4qWfoVIxY8SYCS8jTkuG7TqYA== @@ -12663,6 +12698,18 @@ parse-entities@^1.0.2, parse-entities@^1.1.0: is-decimal "^1.0.0" is-hexadecimal "^1.0.0" +parse-entities@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8" + integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ== + dependencies: + character-entities "^1.0.0" + character-entities-legacy "^1.0.0" + character-reference-invalid "^1.0.0" + is-alphanumerical "^1.0.0" + is-decimal "^1.0.0" + is-hexadecimal "^1.0.0" + parse-git-config@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-0.2.0.tgz#272833fdd15fea146fb75d336d236b963b6ff706" @@ -13806,6 +13853,13 @@ prism-react-renderer@^1.0.2: resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug== +prismjs@^1.21.0, prismjs@~1.21.0: + version "1.21.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3" + integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw== + optionalDependencies: + clipboard "^2.0.0" + private@^0.1.6: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -14404,6 +14458,17 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" +react-syntax-highlighter@^13.5.1: + version "13.5.1" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.1.tgz#f21737cf6d582474a0f18b06b52613f4349c0e64" + integrity sha512-VVYTnFXF55WMRGdr3QNEzAzcypFZqH45kS7rqh90+AFeNGtui8/gV5AIOIJjwTsuP2UxcO9qvEq94Jq9BYFUhw== + dependencies: + "@babel/runtime" "^7.3.1" + highlight.js "^10.1.1" + lowlight "^1.14.0" + prismjs "^1.21.0" + refractor "^3.1.0" + react-test-renderer@^16.0.0-0: version "16.8.2" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.2.tgz#3ce0bf12aa211116612fda01a886d6163c9c459b" @@ -14757,6 +14822,15 @@ reflect.ownkeys@^0.2.0: resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA= +refractor@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.1.0.tgz#b05a43c8a1b4fccb30001ffcbd5cd781f7f06f78" + integrity sha512-bN8GvY6hpeXfC4SzWmYNQGLLF2ZakRDNBkgCL0vvl5hnpMrnyURk8Mv61v6pzn4/RBHzSWLp44SzMmVHqMGNww== + dependencies: + hastscript "^5.0.0" + parse-entities "^2.0.0" + prismjs "~1.21.0" + regenerate-unicode-properties@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -15638,6 +15712,11 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + selenium-standalone@^6.13.0: version "6.16.0" resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.16.0.tgz#ffcf02665c58ff7a7472427ae819ba79c15967ac" @@ -17155,6 +17234,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + tiny-invariant@^1.0.2, tiny-invariant@^1.0.6: version "1.1.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" From 3e6bc0820966260b370d291fe678859473b0a781 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 Sep 2020 15:20:59 -0700 Subject: [PATCH 2/6] blerg --- .../code/code_block_prism_render.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/components/code/code_block_prism_render.tsx diff --git a/src/components/code/code_block_prism_render.tsx b/src/components/code/code_block_prism_render.tsx new file mode 100644 index 00000000000..c15f212b4fd --- /dev/null +++ b/src/components/code/code_block_prism_render.tsx @@ -0,0 +1,57 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { FixedSizeList } from 'react-window'; +//@ts-ignore +import createElement from 'react-syntax-highlighter/create-element'; + +function rowRenderer({ rows, stylesheet, useInlineStyles }: any) { + return ({ index, key, style }: any) => + createElement({ + node: rows[index], + stylesheet, + style, + useInlineStyles, + key, + }); +} + +export type EuiCodeBlockVirtualizedRendererProps = { + overflowHeight?: number; + rowHeight?: number; +}; + +export const euiCodeBlockVirtualizedRenderer = ({ + overflowHeight = 300, + rowHeight = 16, +}: EuiCodeBlockVirtualizedRendererProps) => { + return ({ rows, stylesheet, useInlineStyles }: any) => { + return ( + + {rowRenderer({ rows, stylesheet, useInlineStyles })} + + ); + }; +}; From de1cb8db4fe371cec78c670cb145e6fba6222d40 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 21 Dec 2020 12:28:34 -0800 Subject: [PATCH 3/6] prism working in current explosion, broken tests remain --- package.json | 3 +- src-docs/src/views/code/code_prism.js | 6 +- .../__snapshots__/_code_block.test.tsx.snap | 8 +- .../__snapshots__/code_block.test.tsx.snap | 21 ++- src/components/code/_code_block.tsx | 117 ++++++++------ src/components/code/_code_block_prism.scss | 12 +- src/components/code/code_block_prism.tsx | 21 ++- .../code/code_block_prism_render.tsx | 3 +- yarn.lock | 146 +++++++++++++++--- 9 files changed, 230 insertions(+), 107 deletions(-) diff --git a/package.json b/package.json index 803913079d7..cf5672ec56f 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,8 @@ "react-focus-on": "^3.5.0", "react-input-autosize": "^2.2.2", "react-is": "~16.3.0", - "react-syntax-highlighter": "^13.5.1", + "react-syntax-highlighter": "^15.4.3", + "react-syntax-highlighter-virtualized-renderer": "^1.1.0", "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.5", "rehype-raw": "^5.0.0", diff --git a/src-docs/src/views/code/code_prism.js b/src-docs/src/views/code/code_prism.js index f99a9cbde1b..c3fb7791542 100644 --- a/src-docs/src/views/code/code_prism.js +++ b/src-docs/src/views/code/code_prism.js @@ -2,8 +2,7 @@ import React from 'react'; import { EuiCodeBlockPrism } from '../../../../src/components'; -const codeExample = ` -import React, { useState } from 'react'; +const codeExample = `import React, { useState } from 'react'; import { EuiBadge, @@ -49,8 +48,7 @@ export default () => { ); -}; -`; +};`; export default () => (
diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap index e639fafbf7f..9155a719e90 100644 --- a/src/components/code/__snapshots__/_code_block.test.tsx.snap +++ b/src/components/code/__snapshots__/_code_block.test.tsx.snap @@ -19,12 +19,12 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = ` class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2" > 
     
       var some = 'code';
 console.log(some);
@@ -71,7 +71,7 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
 >
   
 
 `;
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index adfedc4c68a..c922400aa93 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -122,13 +122,20 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   
     
-      var some = 'code';
-console.log(some);
+      
+        var some = 'code';
+
+      
+      console.log(some);
+
@@ -258,12 +265,12 @@ exports[`EuiCodeBlock renders a code block 1`] = ` class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2" > 
     
       var some = 'code';
 console.log(some);
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index dd9d1a9ddb4..2f18f3093ad 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -25,9 +25,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import hljs from 'highlight.js';
 
 import { EuiCopy } from '../copy';
 
@@ -87,6 +87,8 @@ interface Props {
    * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
    */
   whiteSpace?: 'pre' | 'pre-wrap';
+  startingLineNumber?: number;
+  showLineNumbers?: boolean;
 }
 
 /**
@@ -104,51 +106,50 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
   children,
   className,
   overflowHeight,
+  startingLineNumber = 1,
+  showLineNumbers = false,
   ...rest
 }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [isPortalTargetReady, setIsPortalTargetReady] = useState(false);
   const codeTarget = useRef(null);
-  const code = useRef(null);
-  const [codeFullScreen, setCodeFullScreen] = useState(
-    null
-  );
+  const codeRef = useRef(null);
 
   useEffect(() => {
     codeTarget.current = document.createElement('div');
     setIsPortalTargetReady(true);
   }, []);
 
-  useEffect(() => {
-    /**
-     * because React maintains a mapping between its Virtual DOM representation and the actual
-     * DOM elements (including text nodes), and hljs modifies the DOM structure which leads
-     * to React updating detached nodes, we render to a document fragment and
-     * copy from that fragment into the target elements
-     * (https://github.com/elastic/eui/issues/2322)
-     */
-    const html = isPortalTargetReady ? codeTarget.current!.innerHTML : '';
-
-    if (code.current) {
-      code.current.innerHTML = html;
-    }
-
-    if (language) {
-      if (code.current) {
-        hljs.highlightBlock(code.current);
-      }
-    }
-  });
-
-  useEffect(() => {
-    if (codeFullScreen) {
-      const html = isPortalTargetReady ? codeTarget.current!.innerHTML : '';
-      codeFullScreen.innerHTML = html;
-      if (language) {
-        hljs.highlightBlock(codeFullScreen);
-      }
-    }
-  }, [isPortalTargetReady, codeFullScreen, language]);
+  // useEffect(() => {
+  //   /**
+  //    * because React maintains a mapping between its Virtual DOM representation and the actual
+  //    * DOM elements (including text nodes), and hljs modifies the DOM structure which leads
+  //    * to React updating detached nodes, we render to a document fragment and
+  //    * copy from that fragment into the target elements
+  //    * (https://github.com/elastic/eui/issues/2322)
+  //    */
+  //   const html = isPortalTargetReady ? codeTarget.current!.innerHTML : '';
+  //
+  //   if (code.current) {
+  //     code.current.innerHTML = html;
+  //   }
+  //
+  //   if (language) {
+  //     if (code.current) {
+  //       hljs.highlightBlock(code.current);
+  //     }
+  //   }
+  // });
+
+  // useEffect(() => {
+  //   if (codeFullScreen) {
+  //     const html = isPortalTargetReady ? codeTarget.current!.innerHTML : '';
+  //     codeFullScreen.innerHTML = html;
+  //     if (language) {
+  //       hljs.highlightBlock(codeFullScreen);
+  //     }
+  //   }
+  // }, [isPortalTargetReady, codeFullScreen, language]);
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (event.key === keys.ESCAPE) {
@@ -191,7 +192,11 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
     optionalStyles.maxHeight = overflowHeight;
   }
 
-  const codeSnippet = ;
+  const codeSnippet = (
+    
+      {children}
+    
+  );
 
   const wrapperProps = {
     className: classes,
@@ -292,15 +297,20 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
         
           
             

-              
-                
-              

-
+              
+                {children}
+              
               {codeBlockControls}
             

           
@@ -319,12 +329,21 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
           const codeBlockControls = getCodeBlockControls(innerText);
           return (
             

-              
+                className={preClasses}
+                codeTagProps={{
+                  ref: innerTextRef,
+                  className: codeClasses,
+                }}
+                {...rest}>
+                {children}
                 {codeSnippet}
-              

+              
 
               {/*
                 If the below fullScreen code renders, it actually attaches to the body because of
diff --git a/src/components/code/_code_block_prism.scss b/src/components/code/_code_block_prism.scss
index de7e81f5945..c33a5c42675 100644
--- a/src/components/code/_code_block_prism.scss
+++ b/src/components/code/_code_block_prism.scss
@@ -1,15 +1,12 @@
 .euiCodeBlock {
-  pre[class*="language-"] {
+  pre {
     @include euiScrollBar;
     height: 100%;
     overflow: auto;
     display: block;
-  }
-
-  /* Code blocks */
-  pre[class*="language-"] {
     white-space: pre;
   }
+
   code[class*="language-"] {
     @include euiCodeFont;
     display: block;
@@ -50,8 +47,7 @@
   .token.number,
   .token.constant,
   .token.symbol {
-    color: $euiCodeBlockSelectorTagColor;
-    font-weight: $euiFontWeightBold;
+    color: $euiCodeBlockTagColor;
   }
 
   .token.selector,
@@ -69,7 +65,7 @@
   .language-css .token.string,
   .style .token.string,
   .token.variable {
-    color: hsl(40, 90%, 60%);
+    color: inherit;
   }
 
   .token.atrule,
diff --git a/src/components/code/code_block_prism.tsx b/src/components/code/code_block_prism.tsx
index 3e8c04167c1..b15534caa4e 100644
--- a/src/components/code/code_block_prism.tsx
+++ b/src/components/code/code_block_prism.tsx
@@ -50,6 +50,7 @@ export type EuiCodeBlockPrismProps = CommonProps &
     paddingSize?: PaddingSize;
     transparentBackground?: boolean;
     inline?: boolean;
+    showLineNumbers?: boolean;
   };
 
 export const EuiCodeBlockPrism: FunctionComponent = ({
@@ -62,6 +63,7 @@ export const EuiCodeBlockPrism: FunctionComponent = ({
   paddingSize = 'l',
   fontSize = 's',
   isCopyable = false,
+  showLineNumbers = false,
   overflowHeight,
   ...rest
 }) => {
@@ -78,13 +80,16 @@ export const EuiCodeBlockPrism: FunctionComponent = ({
   );
 
   return (
-    
-      {children}
-    
+    

+      
+        {children}
+      
+    

   );
 };
diff --git a/src/components/code/code_block_prism_render.tsx b/src/components/code/code_block_prism_render.tsx
index c15f212b4fd..afed8595011 100644
--- a/src/components/code/code_block_prism_render.tsx
+++ b/src/components/code/code_block_prism_render.tsx
@@ -19,10 +19,11 @@
 
 import React from 'react';
 import { FixedSizeList } from 'react-window';
-//@ts-ignore
+//@ts-ignore doesn't have types
 import createElement from 'react-syntax-highlighter/create-element';
 
 function rowRenderer({ rows, stylesheet, useInlineStyles }: any) {
+  console.log(rows);
   return ({ index, key, style }: any) =>
     createElement({
       node: rows[index],
diff --git a/yarn.lock b/yarn.lock
index b19a045adaf..21d943198fd 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -954,6 +954,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.7.0":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -2926,7 +2933,7 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
-babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -3991,6 +3998,11 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^1.0.6"
     through2 "^2.0.1"
 
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4723,6 +4735,11 @@ csstype@^2.2.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
   integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
 
+csstype@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -5217,6 +5234,14 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^5.1.3:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0, dom-serializer@^0.1.1, dom-serializer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
@@ -6447,7 +6472,7 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fault@^1.0.0:
+fault@^1.0.0, fault@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
   integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
@@ -7789,6 +7814,17 @@ hastscript@^5.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -7799,16 +7835,26 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^10.1.1, highlight.js@~10.1.0:
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c"
-  integrity sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA==
+highlight.js@^10.4.1, highlight.js@~10.4.0:
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.4.1.tgz#d48fbcf4a9971c4361b3f95f302747afe19dbad0"
+  integrity sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg==
 
 highlight.js@^9.18.5:
   version "9.18.5"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
   integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
 
+highlight.js@~10.1.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c"
+  integrity sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA==
+
+highlight.js@~9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+  integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -10065,7 +10111,15 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lowlight@^1.14.0, lowlight@^1.2.0:
+lowlight@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.17.0.tgz#a1143b2fba8239df8cd5893f9fe97aaf8465af4a"
+  integrity sha512-vmtBgYKD+QVNy7tIa7ulz5d//Il9R4MooOVh4nkOf9R9Cb/Dk5TXMSTieg/vDulkBkIWj59/BIlyFQxT9X1oAQ==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.4.0"
+
+lowlight@^1.2.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.14.0.tgz#83ebc143fec0f9e6c0d3deffe01be129ce56b108"
   integrity sha512-N2E7zTM7r1CwbzwspPxJvmjAbxljCPThTFawEX2Z7+P3NGrrvY54u8kyU16IY4qWfoVIxY8SYCS8jTkuG7TqYA==
@@ -10073,6 +10127,14 @@ lowlight@^1.14.0, lowlight@^1.2.0:
     fault "^1.0.0"
     highlight.js "~10.1.0"
 
+lowlight@~1.9.1:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
+  integrity sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.12.0"
+
 lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -12720,10 +12782,10 @@ prism-react-renderer@^1.0.2:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
   integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
 
-prismjs@^1.21.0, prismjs@~1.21.0:
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
-  integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
+prismjs@^1.22.0, prismjs@~1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa"
+  integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==
   optionalDependencies:
     clipboard "^2.0.0"
 
@@ -13179,6 +13241,11 @@ react-is@~16.3.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
   integrity sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-redux@^7.1.0, react-redux@^7.1.1, react-redux@^7.2.1:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
@@ -13257,16 +13324,33 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
-react-syntax-highlighter@^13.5.1:
-  version "13.5.1"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.1.tgz#f21737cf6d582474a0f18b06b52613f4349c0e64"
-  integrity sha512-VVYTnFXF55WMRGdr3QNEzAzcypFZqH45kS7rqh90+AFeNGtui8/gV5AIOIJjwTsuP2UxcO9qvEq94Jq9BYFUhw==
+react-syntax-highlighter-virtualized-renderer@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter-virtualized-renderer/-/react-syntax-highlighter-virtualized-renderer-1.1.0.tgz#7536d9f18f9cce736fac15031a891b8cbaabe90b"
+  integrity sha1-dTbZ8Y+cznNvrBUDGokbjLqr6Qs=
+  dependencies:
+    react-syntax-highlighter "^5.1.2"
+    react-virtualized "^9.3.0"
+
+react-syntax-highlighter@^15.4.3:
+  version "15.4.3"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.3.tgz#fffe3286677ac470b963b364916d16374996f3a6"
+  integrity sha512-TnhGgZKXr5o8a63uYdRTzeb8ijJOgRGe0qjrE0eK/gajtdyqnSO6LqB3vW16hHB0cFierYSoy/AOJw8z1Dui8g==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    highlight.js "^10.1.1"
-    lowlight "^1.14.0"
-    prismjs "^1.21.0"
-    refractor "^3.1.0"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.22.0"
+    refractor "^3.2.0"
+
+react-syntax-highlighter@^5.1.2:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-5.8.0.tgz#a220c010fd0641751d93532509ba7159cc3a4383"
+  integrity sha512-+FolT9NhFBqE4SsZDelSzsYJJS/JCnQqo4+GxLrFPoML548uvr8f4Eh5nnd5o6ERKFW7ryiygOX9SPnxdnlpkg==
+  dependencies:
+    babel-runtime "^6.18.0"
+    highlight.js "~9.12.0"
+    lowlight "~1.9.1"
 
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.12.0:
   version "16.13.1"
@@ -13302,6 +13386,18 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
   integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
 
+react-virtualized@^9.3.0:
+  version "9.22.3"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
+  integrity sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    clsx "^1.0.4"
+    dom-helpers "^5.1.3"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-window@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
@@ -13538,14 +13634,14 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
 
-refractor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.1.0.tgz#b05a43c8a1b4fccb30001ffcbd5cd781f7f06f78"
-  integrity sha512-bN8GvY6hpeXfC4SzWmYNQGLLF2ZakRDNBkgCL0vvl5hnpMrnyURk8Mv61v6pzn4/RBHzSWLp44SzMmVHqMGNww==
+refractor@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.2.0.tgz#bc46f7cfbb6adbf45cd304e8e299b7fa854804e0"
+  integrity sha512-hSo+EyMIZTLBvNNgIU5lW4yjCzNYMZ4dcEhBq/3nReGfqzd2JfVhdlPDfU9rEsgcAyWx+OimIIUoL4ZU7NtYHQ==
   dependencies:
-    hastscript "^5.0.0"
+    hastscript "^6.0.0"
     parse-entities "^2.0.0"
-    prismjs "~1.21.0"
+    prismjs "~1.22.0"
 
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"

From cbeb3086ee87dd9944b796a0120942e1ccf6e9de Mon Sep 17 00:00:00 2001
From: Dave Snider 
Date: Mon, 21 Dec 2020 12:45:10 -0800
Subject: [PATCH 4/6] remove temp components, replace euicodeblock completely

---
 src-docs/src/views/code/code_example.js  |  19 ---
 src-docs/src/views/code/code_prism.js    |  57 --------
 src/components/code/_code_block.scss     | 160 +++++++++++------------
 src/components/code/_code_block.tsx      |   2 +-
 src/components/code/_index.scss          |   1 -
 src/components/code/code_block_prism.tsx |  95 --------------
 src/components/code/index.ts             |   1 -
 7 files changed, 74 insertions(+), 261 deletions(-)
 delete mode 100644 src-docs/src/views/code/code_prism.js
 delete mode 100644 src/components/code/code_block_prism.tsx

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 1688f4ca6a4..47ae5606530 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -24,28 +24,9 @@ import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
 const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
-import CodeBlockPrism from './code_prism';
-const codeBlockPrismSource = require('!!raw-loader!./code_prism');
-const codeBlockPrismHtml = renderToHtml(CodeBlockPrism);
-
 export const CodeExample = {
   title: 'Code',
   sections: [
-    {
-      title: 'Prism',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: codeBlockPrismSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockPrismHtml,
-        },
-      ],
-      text: 
Prism
,
-      demo: ,
-    },
     {
       title: 'Inline',
       source: [
diff --git a/src-docs/src/views/code/code_prism.js b/src-docs/src/views/code/code_prism.js
deleted file mode 100644
index c3fb7791542..00000000000
--- a/src-docs/src/views/code/code_prism.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import { EuiCodeBlockPrism } from '../../../../src/components';
-
-const codeExample = `import React, { useState } from 'react';
-
-import {
-  EuiBadge,
-  EuiButton,
-  EuiFocusTrap,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-} from '../../../../src/components';
-
-import FormExample from '../form_compressed/form_compressed';
-
-export default () => {
-  const [isDisabled, changeDisabled] = useState(true);
-
-  const toggleDisabled = () => changeDisabled(!isDisabled);
-
-  return (
-    

-      Trap is {isDisabled ? 'disabled' : 'enabled'}
-      
-      
-        
-          
-
-          
-
-          
-            {something}
-          
-        
-      
-
-      
-
-      
-        The button below is not focusable by keyboard as long as the focus trap
-        is enabled.
-      
-
-       alert('External event triggered')}>
-        External Focusable Element
-      
-    

-  );
-};`;
-
-export default () => (
-  

-    {codeExample}
-  

-);
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 10022f9dd20..c1b193b5544 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -164,120 +164,106 @@
     background: transparent;
   }
 
-  .hljs > *::selection {
-    // Only change the color if the variable IS a color
-    // or else no highlight color shows up at all
-    @if type-of($euiCodeBlockSelectedBackgroundColor) == color {
-      background-color: $euiCodeBlockSelectedBackgroundColor;
-    }
-  }
-
-  .hljs-comment,
-  .hljs-quote {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
     color: $euiCodeBlockCommentColor;
     font-style: italic;
   }
 
-  .hljs-selector-tag {
-    color: $euiCodeBlockSelectorTagColor;
-    font-weight: $euiCodeFontWeightBold;
-  }
-
-  .hljs-string,
-  .hljs-subst,
-  .hljs-doctag {
-    color: $euiCodeBlockStringColor;
+  .token.punctuation {
+    opacity: .7;
   }
 
-  .hljs-number,
-  .hljs-literal,
-  .hljs-regexp,
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag .hljs-attr {
-    color: $euiCodeBlockNumberColor;
+  .token.namespace {
+    opacity: .7;
   }
 
-  .hljs-keyword {
-    color: $euiCodeBlockKeywordColor;
-  }
-
-  .hljs-function > .hljs-title {
-    color: $euiCodeBlockFunctionTitleColor;
-  }
-
-  .hljs-tag {
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
     color: $euiCodeBlockTagColor;
   }
 
-  .hljs-name {
-    color: $euiCodeBlockNameColor;
-  }
-
-  .hljs-type,
-  .hljs-class .hljs-title {
-    color: $euiCodeBlockTypeColor;
-  }
-
-  .hljs-attribute {
-    color: $euiCodeBlockAttributeColor;
-  }
-
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-built_in,
-  .hljs-builtin-name,
-  .hljs-link {
-    color: $euiCodeBlockSymbolColor;
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: $euiCodeBlockStringColor;
   }
 
-  .hljs-params {
-    color: $euiCodeBlockParamsColor;
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: inherit;
   }
 
-  .hljs-meta {
-    color: $euiCodeBlockMetaColor;
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: $euiCodeBlockKeywordColor;
   }
 
-  .hljs-title {
-    color: $euiCodeBlockTitleColor;
+  .token.regex,
+  .token.important {
+    color: #e90;
   }
 
-  .hljs-section {
-    color: $euiCodeBlockSectionColor;
+  .token.important,
+  .token.bold {
+    font-weight: $euiFontWeightBold;
   }
-
-  .hljs-addition,
-  .hljs-deletion {
-    padding-left: $euiSizeXS;
-    margin-left: -$euiSizeXS;
+  .token.italic {
+    font-style: italic;
   }
 
-  .hljs-addition {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
+  .token.entity {
+    cursor: help;
   }
 
-  .hljs-deletion {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
+  .token.deleted {
+    color: $euiCodeBlockDeletionColor;
   }
+}
 
-  .hljs-selector-class {
-    color: $euiCodeBlockSelectorClassColor;
-  }
 
-  .hljs-selector-id {
-    color: $euiCodeBlockSelectorIdColor;
-  }
 
-  .hljs-emphasis {
-    font-style: italic;
-  }
 
-  .hljs-strong {
-    font-weight: $euiCodeFontWeightBold;
-  }
 
-  .hljs-link {
-    text-decoration: underline;
-  }
-}
+// .euiCodeBlock {
+//   pre {
+//     @include euiScrollBar;
+//     height: 100%;
+//     overflow: auto;
+//     display: block;
+//     white-space: pre;
+//   }
+//
+//   code[class*="language-"] {
+//     @include euiCodeFont;
+//     display: block;
+//     line-height: $euiLineHeight;
+//     font-weight: $euiFontWeightRegular;
+//     font-size: inherit;
+//   }
+//
+//   /* Inline code */
+//   :not(pre) > code[class*="language-"] {
+//     display: inline-block;
+//     white-space: pre;
+//     color: $euiTextColor;
+//     font-size: 90%; /* 1 */
+//     padding: 0 $euiSizeS;
+//     background: $euiCodeBlockBackgroundColor;
+//   }
+//
+// }
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 2f18f3093ad..f33352dc2cd 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -200,7 +200,6 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
 
   const wrapperProps = {
     className: classes,
-    style: optionalStyles,
   };
 
   if (inline) {
@@ -339,6 +338,7 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
                 codeTagProps={{
                   ref: innerTextRef,
                   className: codeClasses,
+                  style: optionalStyles,
                 }}
                 {...rest}>
                 {children}
diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss
index 30c81e0053a..f984a214adf 100644
--- a/src/components/code/_index.scss
+++ b/src/components/code/_index.scss
@@ -1,2 +1 @@
 @import 'code_block';
-@import 'code_block_prism';
diff --git a/src/components/code/code_block_prism.tsx b/src/components/code/code_block_prism.tsx
deleted file mode 100644
index b15534caa4e..00000000000
--- a/src/components/code/code_block_prism.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { FunctionComponent, HTMLAttributes } from 'react';
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import classNames from 'classnames';
-import { CommonProps, keysOf } from '../common';
-import { FontSize, PaddingSize } from './code_block';
-
-const fontSizeToClassNameMap = {
-  s: 'euiCodeBlock--fontSmall',
-  m: 'euiCodeBlock--fontMedium',
-  l: 'euiCodeBlock--fontLarge',
-};
-
-export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
-
-const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
-  none: '',
-  s: 'euiCodeBlock--paddingSmall',
-  m: 'euiCodeBlock--paddingMedium',
-  l: 'euiCodeBlock--paddingLarge',
-};
-
-export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-
-export type EuiCodeBlockPrismProps = CommonProps &
-  Omit, 'color'> & {
-    language?: string;
-    startingLineNumber?: number;
-    overflowHeight?: number;
-    isCopyable?: number;
-    fontSize?: FontSize;
-    paddingSize?: PaddingSize;
-    transparentBackground?: boolean;
-    inline?: boolean;
-    showLineNumbers?: boolean;
-  };
-
-export const EuiCodeBlockPrism: FunctionComponent = ({
-  children,
-  language,
-  className,
-  startingLineNumber = 1,
-  transparentBackground = false,
-  inline = false,
-  paddingSize = 'l',
-  fontSize = 's',
-  isCopyable = false,
-  showLineNumbers = false,
-  overflowHeight,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiCodeBlock',
-    fontSizeToClassNameMap[fontSize],
-    paddingSizeToClassNameMap[paddingSize],
-    {
-      'euiCodeBlock--transparentBackground': transparentBackground,
-      'euiCodeBlock--inline': inline,
-      'euiCodeBlock--hasControls': isCopyable || overflowHeight,
-    },
-    className
-  );
-
-  return (
-    

-      
-        {children}
-      
-    

-  );
-};
diff --git a/src/components/code/index.ts b/src/components/code/index.ts
index a41bd079067..41bba956f45 100644
--- a/src/components/code/index.ts
+++ b/src/components/code/index.ts
@@ -20,4 +20,3 @@
 export { EuiCode, EuiCodeProps } from './code';
 export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 export { EuiCodeBlockImpl } from './_code_block';
-export { EuiCodeBlockPrism } from './code_block_prism';

From 26b6cbaf4d18a964a524001f4eef670579f099a5 Mon Sep 17 00:00:00 2001
From: Dave Snider 
Date: Mon, 21 Dec 2020 12:46:54 -0800
Subject: [PATCH 5/6] remove scss file

---
 src/components/code/_code_block_prism.scss | 97 ----------------------
 1 file changed, 97 deletions(-)
 delete mode 100644 src/components/code/_code_block_prism.scss

diff --git a/src/components/code/_code_block_prism.scss b/src/components/code/_code_block_prism.scss
deleted file mode 100644
index c33a5c42675..00000000000
--- a/src/components/code/_code_block_prism.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.euiCodeBlock {
-  pre {
-    @include euiScrollBar;
-    height: 100%;
-    overflow: auto;
-    display: block;
-    white-space: pre;
-  }
-
-  code[class*="language-"] {
-    @include euiCodeFont;
-    display: block;
-    line-height: $euiLineHeight;
-    font-weight: $euiFontWeightRegular;
-    font-size: inherit;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*="language-"] {
-    display: inline-block;
-    white-space: pre;
-    color: $euiTextColor;
-    font-size: 90%; /* 1 */
-    padding: 0 $euiSizeS;
-    background: $euiCodeBlockBackgroundColor;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: $euiCodeBlockCommentColor;
-    font-style: italic;
-  }
-
-  .token.punctuation {
-    opacity: .7;
-  }
-
-  .token.namespace {
-    opacity: .7;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: $euiCodeBlockTagColor;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: $euiCodeBlockStringColor;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: inherit;
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: $euiCodeBlockKeywordColor;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: $euiFontWeightBold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .token.deleted {
-    color: $euiCodeBlockDeletionColor;
-  }
-}

From 54d3cfd8e59d43eae88538728dda4b8525e176e8 Mon Sep 17 00:00:00 2001
From: Dave Snider 
Date: Mon, 21 Dec 2020 12:51:35 -0800
Subject: [PATCH 6/6] remove prism specific component

---
 src/components/index.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index af925a0cc1f..271cc3e0db2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -53,12 +53,7 @@ export { EuiCallOut } from './call_out';
 
 export { EuiCard, EuiCheckableCard } from './card';
 
-export {
-  EuiCode,
-  EuiCodeBlock,
-  EuiCodeBlockImpl,
-  EuiCodeBlockPrism,
-} from './code';
+export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code';
 
 export { EuiCodeEditor } from './code_editor';