This is an automated email from the ASF dual-hosted git repository.
tbonelee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new 80faf94bb6 [MINOR] Upgrade highlight.js to 10.x in the React remote
80faf94bb6 is described below
commit 80faf94bb65484ed08ae76c5fd960b8af5b4fc87
Author: YONGJAE LEE (이용재) <[email protected]>
AuthorDate: Fri Sep 4 23:27:22 2026 +0900
[MINOR] Upgrade highlight.js to 10.x in the React remote
### What is this PR for?
The highlight.js 9.x line that `projects/zeppelin-react` depends on is end
of life. Its lockfile entry carries `"deprecated": "Support has ended for 9.x
series"`.
Dependabot opened #5454 for `^10.4.1`, but bumping the runtime alone leaves
two things behind. `<at>types/highlight.js` was added in ZEPPELIN-6650 because
9.x ships no types of its own; **10.x bundles them**, so that separate package
becomes a second, stale type source for the same module. And **`highlightBlock`
logs a deprecation warning on every call from 10.7 onward**, which `^10.4.1`
reaches: the lockfile resolves it to 10.7.3.
```
highlight.js ^9.15.8 to ^10.7.3
<at>types/highlight.js removed
highlightBlock replaced by highlightElement
```
The range moves together with the API because `highlightElement` only
exists from 10.7. Keeping `^10.4.1` and changing the call alone would break on
a 10.4.x install. While editing that line I also replaced the `as HTMLElement`
assertion with `querySelector<HTMLElement>`.
This supersedes #5454.
### What type of PR is it?
Improvement
### Todos
None
### What is the Jira issue?
N/A
### How should this be tested?
```
cd zeppelin-web-angular/projects/zeppelin-react
npm ci && npx vitest run && npx tsc --noEmit -p tsconfig.json
```
11 files / 66 tests pass. To rule out the parent tree supplying the old
types, I also installed this package alone with no parent `node_modules`
reachable: `highlight.js` resolves to its bundled `types/index.d.ts<at>10.7.3`
and raises nothing. That run still reports unrelated `rxjs` errors from the
`file:`-linked SDK source, which resolves against the shell's `node_modules`;
the typecheck that CI runs starts from `zeppelin-web-angular`, where those are
present.
I also checked the rendered result in a running instance. Serving the React
remote at 9.18.5 and at 10.7.3 in turn, then opening a `%md` code block as a
published paragraph with `?react=true`, gives **an identical screen** either
way, with no deprecation warning in the console. The classes `github.css`
defines are the same 31 in both versions.
The shell stays on `^9.15.8`. The two packages are not in the Module
Federation `shared` scope, so each bundles its own copy.
### Screenshots (if appropriate)
Nothing to show: the rendered result is unchanged.
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #5455 from voidmatcha/minor/highlightjs-10.
Signed-off-by: ChanHo Lee <[email protected]>
---
.../projects/zeppelin-react/package-lock.json | 18 ++++--------------
.../projects/zeppelin-react/package.json | 3 +--
.../src/components/renderers/HTMLRenderer.tsx | 4 ++--
3 files changed, 7 insertions(+), 18 deletions(-)
diff --git a/zeppelin-web-angular/projects/zeppelin-react/package-lock.json
b/zeppelin-web-angular/projects/zeppelin-react/package-lock.json
index c988c10777..4f158dcf04 100644
--- a/zeppelin-web-angular/projects/zeppelin-react/package-lock.json
+++ b/zeppelin-web-angular/projects/zeppelin-react/package-lock.json
@@ -15,7 +15,7 @@
"chart.js": "^4.5.1",
"date-fns": "^3.6.0",
"file-saver": "2.0.5",
- "highlight.js": "^9.15.8",
+ "highlight.js": "^10.7.3",
"react": "18.3.1",
"react-dom": "18.3.1",
"rxjs": "^7.8.0",
@@ -26,7 +26,6 @@
"@testing-library/dom": "10.4.1",
"@testing-library/react": "16.3.2",
"@types/file-saver": "2.0.7",
- "@types/highlight.js": "^9.12.3",
"@types/node": "22.19.19",
"@types/react": "18.3.26",
"@types/react-dom": "18.3.7",
@@ -1982,13 +1981,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/@types/highlight.js": {
- "version": "9.12.4",
- "resolved":
"https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.4.tgz";,
- "integrity":
"sha512-t2szdkwmg2JJyuCM20e8kR2X59WCE5Zkl4bzm1u1Oukjm79zpbiAv+QjnwLnuuV0WHEcX2NgUItu0pAMKuOPww==",
- "dev": true,
- "license": "MIT"
- },
"node_modules/@types/html-minifier-terser": {
"version": "6.1.0",
"resolved":
"https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz";,
@@ -5529,11 +5521,9 @@
}
},
"node_modules/highlight.js": {
- "version": "9.18.5",
- "resolved":
"https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.5.tgz";,
- "integrity":
"sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==",
- "deprecated": "Support has ended for 9.x series. Upgrade to @latest",
- "hasInstallScript": true,
+ "version": "10.7.3",
+ "resolved":
"https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz";,
+ "integrity":
"sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
"license": "BSD-3-Clause",
"engines": {
"node": "*"
diff --git a/zeppelin-web-angular/projects/zeppelin-react/package.json
b/zeppelin-web-angular/projects/zeppelin-react/package.json
index c6441af70b..60e10ae275 100644
--- a/zeppelin-web-angular/projects/zeppelin-react/package.json
+++ b/zeppelin-web-angular/projects/zeppelin-react/package.json
@@ -17,7 +17,7 @@
"@ant-design/icons": "5.4.0",
"@zeppelin/sdk": "file:../zeppelin-sdk",
"ansi-to-react": "6.2.6",
- "highlight.js": "^9.15.8",
+ "highlight.js": "^10.7.3",
"antd": "5.21.0",
"chart.js": "^4.5.1",
"date-fns": "^3.6.0",
@@ -32,7 +32,6 @@
"@testing-library/dom": "10.4.1",
"@testing-library/react": "16.3.2",
"@types/file-saver": "2.0.7",
- "@types/highlight.js": "^9.12.3",
"@types/node": "22.19.19",
"@types/react": "18.3.26",
"@types/react-dom": "18.3.7",
diff --git
a/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx
b/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx
index 93ba5b5223..b01aeb12f9 100644
---
a/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx
+++
b/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx
@@ -29,11 +29,11 @@ export const HTMLRenderer = ({ html }: HTMLRendererProps)
=> {
container.innerHTML = html;
// Highlight code blocks (matches Angular: result.component.ts
renderHTML)
- const codeEle = container.querySelector('pre code');
+ const codeEle = container.querySelector<HTMLElement>('pre code');
if (codeEle) {
import('highlight.js')
.then(({ default: hljs }) => {
- hljs.highlightBlock(codeEle as HTMLElement);
+ hljs.highlightElement(codeEle);
})
// Without this a failed chunk is an unhandled rejection; the cost
is an unhighlighted block.
.catch(() => undefined);
