[EuiCodeBlock] Replace highlight.js with prism.js via refractor (#4638)

* replace highlight.js with prism.js via refractor * merge fix: file renamed * group lines * update tests * i18n block * remove regex lookbehind not supported in safari * CL * js -> jsx * token color parity * update line grouping method * use jsx language in docs * reduce newlines * docs * docs * headings * Update src-docs/src/views/code/code_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * playground updates * os newlines Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · May 4, 2021 · d86dc13 · d86dc13
1 parent 0ac8774
commit d86dc13
Show file tree

Hide file tree

Showing 22 changed files with 570 additions and 338 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,12 +5,18 @@
 - Updated `EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
 - Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
 - Added `i18ntokens.json` to published package ([#4771](https://github.com/elastic/eui/pull/4771))
+- Replaced `highlight.js` with `prism.js`/`refractor` for code syntax highlighting in `EuiCodeBlock` ([#4638](https://github.com/elastic/eui/pull/4638))
 
 **Bug fixes**
 
 - Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))
 - Fixed `description` prop in `EuiTable`([#4754](https://github.com/elastic/eui/pull/4754))
 
+**Breaking changes**
+
+- Changed some language syntax references in `EuiCodeBlock`, such as `jsx` ([#4638](https://github.com/elastic/eui/pull/4638))
+- Removed ability to parse non-string content in `EuiCodeBlock` ([#4638](https://github.com/elastic/eui/pull/4638))
+
 ## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
 
 - Reduced icon size in `EuiButtonEmpty` of `size` xs. ([#4759](https://github.com/elastic/eui/pull/4759))

diff --git a/package.json b/package.json
@@ -53,11 +53,11 @@
     "@types/react-input-autosize": "^2.2.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
+    "@types/refractor": "^3.0.0",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/vfile-message": "^2.0.0",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
-    "highlight.js": "^9.18.5",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
@@ -69,11 +69,11 @@
     "react-is": "~16.3.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
+    "refractor": "^3.3.1",
     "rehype-raw": "^5.0.0",
     "rehype-react": "^6.0.0",
     "rehype-stringify": "^8.0.0",
     "remark-emoji": "^2.1.0",
-    "remark-highlight.js": "^6.0.0",
     "remark-parse": "^8.0.3",
     "remark-rehype": "^8.0.0",
     "tabbable": "^3.0.0",
@@ -106,7 +106,6 @@
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
-    "@types/highlight.js": "^9.12.4",
     "@types/jest": "^24.0.6",
     "@types/node": "^10.17.5",
     "@types/react": "^16.9.34",

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
@@ -34,7 +34,7 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
 
   return (
     <>
-      <EuiCodeBlock language={'javascript'} overflowHeight={400} isCopyable>
+      <EuiCodeBlock language="jsx" overflowHeight={400} isCopyable>
         {codeToRender}
       </EuiCodeBlock>
       {codeSandboxLink}

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
@@ -27,7 +27,7 @@ import {
 } from '../../../../src/components/';
 
 export const markup = (text) => {
-  const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
+  const regex = /(\B#[a-zA-Z]+)|(`[^`]+`)/g;
   return text.split('\n').map((token) => {
     const values = token.split(regex).map((token, index) => {
       if (!token) {
@@ -382,7 +382,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
 
     if (humanizedType) {
       typeMarkup = humanizedType && (
-        <EuiCodeBlock {...codeBlockProps}>{markup(humanizedType)}</EuiCodeBlock>
+        <EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
       );
 
       const functionMatches = [
@@ -392,17 +392,19 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
       const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
 
       if (functionMatches.length > 0) {
-        const elements = [];
+        let elements = '';
         let j = 0;
         for (let i = 0; i < types.length; i++) {
           if (functionMatches[j]) {
-            elements.push(<div key={`type-${i}`}>{types[i]}</div>);
-            elements.push(
-              <div key={`function-${i}`}>{functionMatches[j][0]}</div>
-            );
+            elements =
+              `${elements}` +
+              `${types[i]}` +
+              '\n' +
+              `${functionMatches[j][0]}` +
+              '\n';
             j++;
           } else {
-            elements.push(<div key={`type-${i}`}>{types[i]}</div>);
+            elements = `${elements}` + `${types[i]}` + '\n';
           }
         }
         typeMarkup = (

diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js
@@ -81,7 +81,7 @@ export default ({
             </div>
             <EuiSpacer />
             <EuiCodeBlock
-              language="html"
+              language="jsx"
               fontSize="m"
               paddingSize="m"
               isCopyable>

diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js
@@ -15,7 +15,7 @@ export default () => (
     <EuiSpacer />
 
     <EuiCodeBlock
-      language="js"
+      language="jsx"
       fontSize="m"
       paddingSize="m"
       overflowHeight={300}

diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js
@@ -5,7 +5,7 @@ import { EuiCodeBlock } from '../../../../src/components';
 export default () => (
   <div>
     <EuiCodeBlock
-      language="js"
+      language="jsx"
       fontSize="m"
       paddingSize="m"
       color="dark"

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -4,7 +4,12 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCodeBlock } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiCodeBlock,
+  EuiLink,
+  EuiText,
+} from '../../../../src/components';
 import { codeBlockConfig, codeConfig } from './playground';
 
 import Code from './code';
@@ -26,6 +31,34 @@ const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
 export const CodeExample = {
   title: 'Code',
+  intro: (
+    <>
+      <EuiText>
+        <p>
+          The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong>{' '}
+          components support{' '}
+          <EuiLink external href="https://github.com/wooorm/refractor#syntaxes">
+            all language syntaxes
+          </EuiLink>{' '}
+          supported by the
+          <EuiCode>prism</EuiCode>{' '}
+          <EuiLink external href="https://prismjs.com/">
+            library
+          </EuiLink>
+          .
+          <br />
+          The <EuiCode>language</EuiCode> prop can also be omitted to simply
+          render formatted but unhighlighted code.
+        </p>
+        <p>
+          JSX code (often React) has distinct language syntaxes from the base
+          JavaScript and TypeScript languages. For these instances, use{' '}
+          <EuiCode>language=&quot;jsx&quot;</EuiCode> or{' '}
+          <EuiCode>language=&quot;tsx&quot;</EuiCode>.
+        </p>
+      </EuiText>
+    </>
+  ),
   sections: [
     {
       title: 'Inline',
@@ -48,6 +81,7 @@ export const CodeExample = {
       snippet: codeSnippet,
       props: { EuiCode },
       demo: <Code />,
+      playground: codeConfig,
     },
     {
       title: 'Code block',
@@ -72,6 +106,7 @@ export const CodeExample = {
       snippet: codeBlockSnippet,
       props: { EuiCodeBlock },
       demo: <CodeBlock />,
+      playground: codeBlockConfig,
     },
     {
       title: 'Code block and white-space',
@@ -98,5 +133,4 @@ export const CodeExample = {
       demo: <CodeBlockPre />,
     },
   ],
-  playground: [codeBlockConfig, codeConfig],
 };
diff --git a/src-docs/src/views/code/playground.js b/src-docs/src/views/code/playground.js
@@ -20,12 +20,6 @@ export const codeBlockConfig = () => {
     hidden: false,
   };
 
-  propsToUse.inline = {
-    ...propsToUse.inline,
-    type: PropTypes.Boolean,
-    value: false,
-  };
-
   return {
     config: {
       componentName: 'EuiCodeBlock',
@@ -56,12 +50,6 @@ export const codeConfig = () => {
     hidden: false,
   };
 
-  propsToUse.inline = {
-    ...propsToUse.inline,
-    type: PropTypes.Boolean,
-    value: false,
-  };
-
   return {
     config: {
       componentName: 'EuiCode',

diff --git a/src-docs/src/views/package/i18n_tokens.js b/src-docs/src/views/package/i18n_tokens.js
@@ -37,7 +37,7 @@ const columns = [
     render({ defString, highlighting }) {
       return (
         <EuiCodeBlock
-          language={highlighting === 'code' ? 'javascript' : 'text'}
+          language={highlighting === 'code' ? 'javascript' : undefined}
           paddingSize="none"
           transparentBackground
           fontSize="s">

diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap
@@ -2,22 +2,22 @@
 
 exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`] = `
 <div
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge prismjs language-js"
 >
   <pre
     class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
     tabindex="-1"
   >
     <code
-      class="euiCodeBlock__code js hljs javascript"
+      class="euiCodeBlock__code js"
     />
   </pre>
 </div>
 `;
 
 exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
 <div
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge prismjs language-none testClass1 testClass2"
 >
   <pre
     class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
@@ -37,7 +37,7 @@ console.log(some);
 
 exports[`EuiCodeBlockImpl block renders a pre block tag with a css class modifier 1`] = `
 <div
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge prismjs language-none testClass1 testClass2"
 >
   <pre
     class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePre"
@@ -57,7 +57,7 @@ console.log(some);
 
 exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
 <div
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground prismjs language-none"
 >
   <pre
     class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
@@ -72,17 +72,17 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
 
 exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1`] = `
 <span
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline prismjs language-js"
 >
   <code
-    class="euiCodeBlock__code js hljs javascript"
+    class="euiCodeBlock__code js"
   />
 </span>
 `;
 
 exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
 <span
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline prismjs language-none testClass1 testClass2"
 >
   <code
     aria-label="aria-label"
@@ -97,7 +97,7 @@ console.log(some);
 
 exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
 <span
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground euiCodeBlock--inline"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground euiCodeBlock--inline prismjs language-none"
 >
   <code
     class="euiCodeBlock__code"

diff --git a/src/components/code/__snapshots__/code.test.tsx.snap b/src/components/code/__snapshots__/code.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCode renders a code snippet 1`] = `
 <span
-  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline prismjs language-none testClass1 testClass2"
 >
   <code
     aria-label="aria-label"