Skip to content

Commit 7aeb30f

Browse files
thompsonglcchaos
thompsongl
and
cchaos
authored
[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>
1 parent f5fadd9 commit 7aeb30f

22 files changed

Lines changed: 570 additions & 338 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,18 @@
55
- Updated `EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
66
- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
77
- Added `i18ntokens.json` to published package ([#4771](https://github.com/elastic/eui/pull/4771))
8+
- Replaced `highlight.js` with `prism.js`/`refractor` for code syntax highlighting in `EuiCodeBlock` ([#4638](https://github.com/elastic/eui/pull/4638))
89

910
**Bug fixes**
1011

1112
- Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))
1213
- Fixed `description` prop in `EuiTable`([#4754](https://github.com/elastic/eui/pull/4754))
1314

15+
**Breaking changes**
16+
17+
- Changed some language syntax references in `EuiCodeBlock`, such as `jsx` ([#4638](https://github.com/elastic/eui/pull/4638))
18+
- Removed ability to parse non-string content in `EuiCodeBlock` ([#4638](https://github.com/elastic/eui/pull/4638))
19+
1420
## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
1521

1622
- Reduced icon size in `EuiButtonEmpty` of `size` xs. ([#4759](https://github.com/elastic/eui/pull/4759))

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@
5353
"@types/react-input-autosize": "^2.2.0",
5454
"@types/react-virtualized-auto-sizer": "^1.0.0",
5555
"@types/react-window": "^1.8.2",
56+
"@types/refractor": "^3.0.0",
5657
"@types/resize-observer-browser": "^0.1.5",
5758
"@types/vfile-message": "^2.0.0",
5859
"chroma-js": "^2.1.0",
5960
"classnames": "^2.2.6",
60-
"highlight.js": "^9.18.5",
6161
"lodash": "^4.17.21",
6262
"numeral": "^2.0.6",
6363
"prop-types": "^15.6.0",
@@ -69,11 +69,11 @@
6969
"react-is": "~16.3.0",
7070
"react-virtualized-auto-sizer": "^1.0.2",
7171
"react-window": "^1.8.5",
72+
"refractor": "^3.3.1",
7273
"rehype-raw": "^5.0.0",
7374
"rehype-react": "^6.0.0",
7475
"rehype-stringify": "^8.0.0",
7576
"remark-emoji": "^2.1.0",
76-
"remark-highlight.js": "^6.0.0",
7777
"remark-parse": "^8.0.3",
7878
"remark-rehype": "^8.0.0",
7979
"tabbable": "^3.0.0",
@@ -102,7 +102,6 @@
102102
"@svgr/plugin-svgo": "^4.0.3",
103103
"@types/classnames": "^2.2.10",
104104
"@types/enzyme": "^3.10.5",
105-
"@types/highlight.js": "^9.12.4",
106105
"@types/jest": "^24.0.6",
107106
"@types/node": "^10.17.5",
108107
"@types/react": "^16.9.34",

‎src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
3434

3535
return (
3636
<>
37-
<EuiCodeBlock language={'javascript'} overflowHeight={400} isCopyable>
37+
<EuiCodeBlock language="jsx" overflowHeight={400} isCopyable>
3838
{codeToRender}
3939
</EuiCodeBlock>
4040
{codeSandboxLink}

‎src-docs/src/services/playground/knobs.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
} from '../../../../src/components/';
2828

2929
export const markup = (text) => {
30-
const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
30+
const regex = /(\B#[a-zA-Z]+)|(`[^`]+`)/g;
3131
return text.split('\n').map((token) => {
3232
const values = token.split(regex).map((token, index) => {
3333
if (!token) {
@@ -382,7 +382,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
382382

383383
if (humanizedType) {
384384
typeMarkup = humanizedType && (
385-
<EuiCodeBlock {...codeBlockProps}>{markup(humanizedType)}</EuiCodeBlock>
385+
<EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
386386
);
387387

388388
const functionMatches = [
@@ -392,17 +392,19 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
392392
const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
393393

394394
if (functionMatches.length > 0) {
395-
const elements = [];
395+
let elements = '';
396396
let j = 0;
397397
for (let i = 0; i < types.length; i++) {
398398
if (functionMatches[j]) {
399-
elements.push(<div key={`type-${i}`}>{types[i]}</div>);
400-
elements.push(
401-
<div key={`function-${i}`}>{functionMatches[j][0]}</div>
402-
);
399+
elements =
400+
`${elements}` +
401+
`${types[i]}` +
402+
'\n' +
403+
`${functionMatches[j][0]}` +
404+
'\n';
403405
j++;
404406
} else {
405-
elements.push(<div key={`type-${i}`}>{types[i]}</div>);
407+
elements = `${elements}` + `${types[i]}` + '\n';
406408
}
407409
}
408410
typeMarkup = (

‎src-docs/src/services/playground/playground.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default ({
8181
</div>
8282
<EuiSpacer />
8383
<EuiCodeBlock
84-
language="html"
84+
language="jsx"
8585
fontSize="m"
8686
paddingSize="m"
8787
isCopyable>

‎src-docs/src/views/code/code_block.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default () => (
1515
<EuiSpacer />
1616

1717
<EuiCodeBlock
18-
language="js"
18+
language="jsx"
1919
fontSize="m"
2020
paddingSize="m"
2121
overflowHeight={300}

‎src-docs/src/views/code/code_block_pre.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EuiCodeBlock } from '../../../../src/components';
55
export default () => (
66
<div>
77
<EuiCodeBlock
8-
language="js"
8+
language="jsx"
99
fontSize="m"
1010
paddingSize="m"
1111
color="dark"

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

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { renderToHtml } from '../../services';
44

55
import { GuideSectionTypes } from '../../components';
66

7-
import { EuiCode, EuiCodeBlock } from '../../../../src/components';
7+
import {
8+
EuiCode,
9+
EuiCodeBlock,
10+
EuiLink,
11+
EuiText,
12+
} from '../../../../src/components';
813
import { codeBlockConfig, codeConfig } from './playground';
914

1015
import Code from './code';
@@ -26,6 +31,34 @@ const codeBlockPreHtml = renderToHtml(CodeBlockPre);
2631

2732
export const CodeExample = {
2833
title: 'Code',
34+
intro: (
35+
<>
36+
<EuiText>
37+
<p>
38+
The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong>{' '}
39+
components support{' '}
40+
<EuiLink external href="https://github.com/wooorm/refractor#syntaxes">
41+
all language syntaxes
42+
</EuiLink>{' '}
43+
supported by the
44+
<EuiCode>prism</EuiCode>{' '}
45+
<EuiLink external href="https://prismjs.com/">
46+
library
47+
</EuiLink>
48+
.
49+
<br />
50+
The <EuiCode>language</EuiCode> prop can also be omitted to simply
51+
render formatted but unhighlighted code.
52+
</p>
53+
<p>
54+
JSX code (often React) has distinct language syntaxes from the base
55+
JavaScript and TypeScript languages. For these instances, use{' '}
56+
<EuiCode>language=&quot;jsx&quot;</EuiCode> or{' '}
57+
<EuiCode>language=&quot;tsx&quot;</EuiCode>.
58+
</p>
59+
</EuiText>
60+
</>
61+
),
2962
sections: [
3063
{
3164
title: 'Inline',
@@ -48,6 +81,7 @@ export const CodeExample = {
4881
snippet: codeSnippet,
4982
props: { EuiCode },
5083
demo: <Code />,
84+
playground: codeConfig,
5185
},
5286
{
5387
title: 'Code block',
@@ -72,6 +106,7 @@ export const CodeExample = {
72106
snippet: codeBlockSnippet,
73107
props: { EuiCodeBlock },
74108
demo: <CodeBlock />,
109+
playground: codeBlockConfig,
75110
},
76111
{
77112
title: 'Code block and white-space',
@@ -98,5 +133,4 @@ export const CodeExample = {
98133
demo: <CodeBlockPre />,
99134
},
100135
],
101-
playground: [codeBlockConfig, codeConfig],
102136
};

‎src-docs/src/views/code/playground.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@ export const codeBlockConfig = () => {
2020
hidden: false,
2121
};
2222

23-
propsToUse.inline = {
24-
...propsToUse.inline,
25-
type: PropTypes.Boolean,
26-
value: false,
27-
};
28-
2923
return {
3024
config: {
3125
componentName: 'EuiCodeBlock',
@@ -56,12 +50,6 @@ export const codeConfig = () => {
5650
hidden: false,
5751
};
5852

59-
propsToUse.inline = {
60-
...propsToUse.inline,
61-
type: PropTypes.Boolean,
62-
value: false,
63-
};
64-
6553
return {
6654
config: {
6755
componentName: 'EuiCode',

‎src-docs/src/views/package/i18n_tokens.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const columns = [
3737
render({ defString, highlighting }) {
3838
return (
3939
<EuiCodeBlock
40-
language={highlighting === 'code' ? 'javascript' : 'text'}
40+
language={highlighting === 'code' ? 'javascript' : undefined}
4141
paddingSize="none"
4242
transparentBackground
4343
fontSize="s">

0 commit comments

Comments
 (0)