[EuiCodeBlock] Replace highlight.js with prism.js via refractor by thompsongl · Pull Request #4638 · elastic/eui

thompsongl · 2021-03-11T18:13:25Z

Summary

Closes #3947 (and replaces #4400)

Replaces highlight.js with prism.js via refractor for code syntax highlighting.

This is currently a 1:1 replacement with no additional features (e.g., code block virtualization).
Current bundle size reduction: ~1.5MB (~1.1MB minified) 🎉

Affects:

EuiCode
EuiCodeBlock
EuiMarkdownEditor (plugins)
EuiMarkdownFormatter (plugins)

New:

remark-prismjs plugin for EuiMarkdown* (replaces 3rd-party remark-highlight.js)

Breaking change(s):

Content passed to EuiCode and EuiCodeBlock must be string-based for proper syntax highlighting
- We can still render the input, but prismjs cannot parse it, so it will not be highlighted
- We need to accept non-string content for EuiMarkdown[Editor | Formatter] because input is pre-parsed
~~No syntax language auto-detection~~ (Not actually breaking)
Different language names/aliases from highlight.js
- text does not exist
- sh is not an alias for bash
- js will not highlight jsx-specific tokens
- We can patch some of these discrepancies, but is it worth it?
See further explanation in this comment

To do:

Tests
Research virtualizing code blocks (react-window)
Research line numbers
Research reducing initial language load
Research loading languages async

Checklist

Check against all themes for compatibility in both light and dark modes

- [ ] Checked in mobile

Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation

~~- [ ] Checked Code Sandbox works for the any docs examples~~

Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

kibanamachine · 2021-03-11T18:30:04Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-03-17T21:48:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

thompsongl · 2021-03-17T21:51:17Z

Research line numbers

Certainly possible. Will need to update our nodeToHtml method to group lines based on EOL AST nodes ({type: "text", value: "↵ "} and manage highlighting per line. All HTML is fully under our control, so this is just a matter of defining preferential styles and customization.
Relatedly, my guess is that we will need to do per-line highlighting after EOL grouping to build virtualization, also.

thompsongl · 2021-03-18T16:06:25Z

Research virtualizing code blocks (react-window)

Certainly possible.
Confirmed my guess that we would need per-line grouping and highlighting to enable react-window virtualization.
I'm going to push the prerequisite line grouping work to this branch, but I'd like to make virtualization its own PR after we're set on the fundamental prismjs conversion.

kibanamachine · 2021-03-18T16:32:25Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

thompsongl · 2021-03-18T16:41:43Z

Research reducing initial language load

Yes. We can save up to an additional ~300k (~1.8MB total) by not including the full language set. Instead, we'd load refractor/core (which includes clike, css, js, html, mathml, svg, xml, ssml, atom, rss) and register additional languages, like so:

import refractor from 'refractor/core';
import jsx from 'refractor/lang/jsx';
import sql from 'refractor/lang/sql';

refractor.register(jsx);
refractor.register(sql);

Obviously we'd need to decide on EUI's core set of supported languages.
Allowing consumers to register additional languages (if so decided) would require exposing our internal refractor instance.

thompsongl · 2021-03-18T17:32:15Z

Research loading languages async

Yes, but probably an either/or with "reducing initial language load". react-syntax-highlighter provides a good idea of how we might approach async loading all languages. We're already getting big improvements without optimizing for languages, so I'd also like to take this on separately with more deliberation on async loading vs. limited language set.

kibanamachine · 2021-03-18T19:17:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-03-18T20:55:04Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

thompsongl · 2021-03-18T22:01:34Z

Opening this up for review. Looking for early feedback on:

~~Dark mode colors. Not any worse than what's in production now, but open to design work against this branch~~
Breaking change tolerance. See ^ "Summary" for tentative breaks

kibanamachine · 2021-03-18T22:21:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-03-24T19:54:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

cchaos · 2021-03-29T18:23:35Z

Obviously we'd need to decide on EUI's core set of supported languages.
Allowing consumers to register additional languages (if so decided) would require exposing our internal refractor instance.

I'm fine with this so long as we document this very well.

cchaos · 2021-03-29T18:26:25Z

src/components/code/__snapshots__/_code_block.test.tsx.snap

 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"


Did the old version used to also default to no highlighting?

kibanamachine · 2021-04-13T22:14:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-04-15T15:23:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-04-15T16:00:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

…947-prism

kibanamachine · 2021-04-22T15:35:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-04-29T18:41:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

chandlerprall

Fantastic conversion! I was happy to see how straight forward the markdown changes are, in particular. Couple notes on windows line breaks but everything else LGTM!

src/components/code/_code_block.tsx

src/components/markdown_editor/plugins/remark/remark_prismjs.ts

kibanamachine · 2021-04-29T21:35:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

kibanamachine · 2021-05-04T14:46:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4638/

chandlerprall

Changes LGTM! Pulled & tested locally

kibanamachine · 2021-05-04T15:55:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_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>

…a single one when using the Copy button This change was first introduced in 7aeb30f ([EuiCodeBlock] Replace highlight.js with prism.js via refractor (elastic#4638)) but doesn't seem to be a business or product decision. We decided to remove it to make the copied content match what's displayed on screen.

…character (#6794) * fix(EuiCodeBlock): fix code block copy button not including the last character if it's a question mark * chore: add changelog file * fix(EuiCodeBlock): Remove reducing two or more consecutive empty lines to a single one when using the Copy button This change was first introduced in 7aeb30f ([EuiCodeBlock] Replace highlight.js with prism.js via refractor (#4638)) but doesn't seem to be a business or product decision. We decided to remove it to make the copied content match what's displayed on screen. * Revert "fix(EuiCodeBlock): Remove reducing two or more consecutive empty lines to a single one when using the Copy button" This reverts commit 8a90215c81432514493b1bb29ecd314d6792a05d. * docs: add clarification comment why \n\n replace is needed * Update regression test * changelog --------- Co-authored-by: Constance Chen <constance.chen.3@gmail.com> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

replace highlight.js with prism.js via refractor

e5cccd2

thompsongl mentioned this pull request Mar 11, 2021

[WIP] Replace Highlight.js with Prism #4400

Closed

13 tasks

thompsongl added 2 commits March 17, 2021 15:47

Merge branch 'master' into 3947-prism

955654c

merge fix: file renamed

ecf4f65

group lines

4a688ee

update tests

7cd7617

thompsongl added 2 commits March 18, 2021 15:23

Merge branch 'master' into 3947-prism

55dd561

i18n block

71e1339

thompsongl added 2 commits March 18, 2021 16:43

remove regex lookbehind not supported in safari

f7b852b

CL

205aa21

thompsongl requested review from cchaos and chandlerprall March 18, 2021 22:01

thompsongl marked this pull request as ready for review March 18, 2021 22:02

snide mentioned this pull request Mar 19, 2021

[EuiCodeBlock] Needs virtualization #1208

Closed

Merge branch 'master' into 3947-prism

39dabe6

cchaos added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Mar 29, 2021

cchaos reviewed Mar 29, 2021

View reviewed changes

Merge branch 'master' into 3947-prism

cfd6f7b

Merge branch 'master' into 3947-prism

099aa73

thompsongl added 2 commits April 22, 2021 10:09

Merge branch 'master' into 3947-prism

02b10b4

Merge branch '3947-prism' of https://github.com/thompsongl/eui into 3…

ed7f20d

…947-prism

Merge branch 'master' into 3947-prism

c848aac

chandlerprall suggested changes Apr 29, 2021

View reviewed changes

os newlines

ee4e68d

thompsongl requested a review from chandlerprall April 29, 2021 21:15

Merge branch 'master' into 3947-prism

a973b4c

chandlerprall approved these changes May 4, 2021

View reviewed changes

Merge branch 'master' into 3947-prism

18b0ccb

thompsongl merged commit 7aeb30f into elastic:master May 4, 2021

thompsongl mentioned this pull request May 5, 2021

Upgrade EUI to v33.0.0 elastic/kibana#99382

Merged

peteharverson mentioned this pull request Jun 24, 2021

[ML] Fixes data frame analytics models list pipelines tab elastic/kibana#103235

Merged

1 task

chandlerprall mentioned this pull request Jun 29, 2021

[EuiCodeBlock] Cannot be used in Jest Snapshots when language is specified #2242

Closed

j-m mentioned this pull request Aug 9, 2021

[EuiCodeBlock] Re-add the language option text #5010

Closed

tkajtoch mentioned this pull request May 23, 2023

fix(EuiCode): fix code block copy button not including the last character #6794

Merged

3 tasks

Comments

Conversation

thompsongl commented Mar 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

kibanamachine commented Mar 11, 2021

Uh oh!

kibanamachine commented Mar 17, 2021

Uh oh!

thompsongl commented Mar 17, 2021

Uh oh!

thompsongl commented Mar 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

thompsongl commented Mar 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thompsongl commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

thompsongl commented Mar 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 24, 2021

Uh oh!

cchaos commented Mar 29, 2021

Uh oh!

cchaos Mar 29, 2021

Choose a reason for hiding this comment

Uh oh!

thompsongl Mar 29, 2021

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 13, 2021

Uh oh!

kibanamachine commented Apr 15, 2021

Uh oh!

kibanamachine commented Apr 15, 2021

Uh oh!

kibanamachine commented Apr 22, 2021

Uh oh!

kibanamachine commented Apr 29, 2021

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Apr 29, 2021

Uh oh!

kibanamachine commented May 4, 2021

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 4, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

thompsongl commented Mar 11, 2021 •

edited

Loading

thompsongl commented Mar 18, 2021 •

edited

Loading

thompsongl commented Mar 18, 2021 •

edited

Loading

thompsongl commented Mar 18, 2021 •

edited

Loading