Upgrade all rehype and remark (#43021)

package.json

@@ -105,6 +105,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lowdb": "6.0.0",
+    "lowlight": "3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-hast": "^13.0.1",
     "mdast-util-to-markdown": "2.0.0",
@@ -118,14 +119,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-highlight": "^6.0.0",
-    "rehype-raw": "^6.1.1",
-    "rehype-slug": "^5.1.0",
-    "rehype-stringify": "^9.0.4",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
     "remark-gemoji-to-emoji": "^1.1.0",
-    "remark-gfm": "^3.0.1",
-    "remark-parse": "^10.0.2",
-    "remark-rehype": "^10.1.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.0.0",
     "rss-parser": "^3.13.0",
     "scroll-anchoring": "^0.1.0",
     "semver": "^7.5.4",

src/content-render/tests/render-content.js

@@ -149,7 +149,7 @@ describe('renderContent', () => {
     const html = await renderContent(template)
     const $ = cheerio.load(html, { xmlMode: true })
     expect($('ol').length).toBe(1)
-    expect($.html().includes('<span class="hljs-meta"># </span')).toBeTruthy()
+    expect($.html().includes('<span class="hljs-meta prompt_"># </span')).toBeTruthy()
     expect($.html().includes('some comment here')).toBeTruthy()
     expect($.html().includes('<h1 id="some-comment-here">')).toBeFalsy()
     expect($.html().includes('<a href="#some-comment-here">')).toBeFalsy()

src/content-render/unified/processor.js

@@ -6,6 +6,7 @@ import remark2rehype from 'remark-rehype'
 import raw from 'rehype-raw'
 import slug from 'rehype-slug'
 import highlight from 'rehype-highlight'
+import { common } from 'lowlight'
 import dockerfile from 'highlight.js/lib/languages/dockerfile'
 import http from 'highlight.js/lib/languages/http'
 import groovy from 'highlight.js/lib/languages/groovy'
@@ -42,7 +43,7 @@ export function createProcessor(context) {
       .use(codeHeader)
       .use(annotate)
       .use(highlight, {
-        languages: { graphql, dockerfile, http, groovy, erb, powershell },
+        languages: { ...common, graphql, dockerfile, http, groovy, erb, powershell },
         subset: false,
       })
       .use(raw)

tests/rendering/annotate.js

@@ -18,6 +18,8 @@ describe('annotate', () => {
     // We don't normally use snapshots,
     // but in this case its a short and concise example
     // that won't change regularly.
+    // If it fails, study the output and make sure it's correct.
+    // If it is indeed correct, run `jest --updateSnapshot` to update it.
     expect(await renderContent(example)).toMatchSnapshot()
   })
 })