highlight.js -> prism (#730)

2025-04-26 13:18:26 -04:00 · 2022-01-10 19:10:19 -05:00 · 2022-01-10 19:10:19 -05:00 · 78967815e1
commit 78967815e1
parent 3864d18ba3
11 changed files with 211 additions and 145 deletions
--- a/components/embeds/Code.tsx
+++ b/components/embeds/Code.tsx
@ -7,7 +7,7 @@ type CustomCodeProps = {
 };

 const CustomCode = (props: CustomCodeProps) => {
-  if (props.className?.split(" ").includes("hljs")) {
+  if (props.className?.split(" ").includes("code-highlight")) {
    const CopyButton = dynamic(() => import("../clipboard/CopyButton"));

    // full multi-line code blocks with highlight.js and copy-to-clipboard button
@ -33,92 +33,90 @@ const CustomCode = (props: CustomCodeProps) => {
        `}</style>

        <style jsx global>{`
-          .hljs {
-            color: var(--highlight-color);
-            background: var(--highlight-bg);
+          .code-highlight {
+            color: var(--code-text);
+            background: var(--code-background);
          }

-          .hljs-subst {
-            color: var(--highlight-color);
+          /* leave room for clipboard button to the right of the first line */
+          .code-highlight > .code-line:first-of-type {
+            margin-right: 3em;
          }

-          .hljs-comment {
-            color: var(--highlight-comment);
+          .code-highlight > .code-line.line-number::before {
+            display: inline-block;
+            width: 1.5em;
+            margin-right: 1.5em;
+            text-align: right;
+            color: var(--code-comment);
+            content: attr(line); /* added to spans by prism */
          }

-          .hljs-keyword,
-          .hljs-selector-tag,
-          .hljs-doctag,
-          .hljs-section,
-          .hljs-selector-class,
-          .hljs-selector-pseudo,
-          .hljs-meta,
-          .hljs-meta .hljs-keyword {
-            color: var(--highlight-keyword);
+          .code-highlight .token.comment,
+          .code-highlight .token.prolog,
+          .code-highlight .token.cdata {
+            color: var(--code-comment);
          }

-          .hljs-attr {
-            color: var(--highlight-attribute);
+          .code-highlight .token.delimiter,
+          .code-highlight .token.boolean,
+          .code-highlight .token.keyword,
+          .code-highlight .token.selector,
+          .code-highlight .token.important,
+          .code-highlight .token.doctype,
+          .code-highlight .token.atrule,
+          .code-highlight .token.url {
+            color: var(--code-keyword);
          }

-          .hljs-attribute {
-            color: var(--highlight-symbol);
+          .code-highlight .token.tag,
+          .code-highlight .token.builtin,
+          .code-highlight .token.regex {
+            color: var(--code-namespace);
          }

-          .hljs-name,
-          .hljs-type,
-          .hljs-number,
-          .hljs-selector-id,
-          .hljs-quote,
-          .hljs-template-tag {
-            color: var(--highlight-namespace);
+          .code-highlight .token.property,
+          .code-highlight .token.constant,
+          .code-highlight .token.variable,
+          .code-highlight .token.attr-value,
+          .code-highlight .token.class-name,
+          .code-highlight .token.string,
+          .code-highlight .token.char {
+            color: var(--code-variable);
          }

-          .hljs-string,
-          .hljs-regexp,
-          .hljs-symbol,
-          .hljs-variable,
-          .hljs-template-variable,
-          .hljs-link,
-          .hljs-selector-attr,
-          .hljs-meta .hljs-string {
-            color: var(--highlight-variable);
+          .code-highlight .token.literal-property,
+          .code-highlight .token.attr-name {
+            color: var(--code-attribute);
          }

-          .hljs-built_in,
-          .hljs-title,
-          .hljs-literal {
-            color: var(--highlight-literal);
+          .code-highlight .token.function {
+            color: var(--code-literal);
          }

-          .hljs-bullet,
-          .hljs-code {
-            color: var(--highlight-punctuation);
+          .code-highlight .token.tag .punctuation,
+          .code-highlight .token.attr-value .punctuation {
+            color: var(--code-punctuation);
          }

-          .hljs-deletion {
-            color: var(--highlight-deletion);
+          .code-highlight .token.inserted {
+            background-color: var(--code-addition);
          }

-          .hljs-addition {
-            color: var(--highlight-addition);
+          .code-highlight .token.deleted {
+            background-color: var(--code-deletion);
          }

-          .hljs-emphasis {
-            font-style: italic;
+          .code-highlight .token.url {
+            text-decoration: underline;
          }

-          .hljs-strong {
+          .code-highlight .token.bold {
            font-weight: bold;
          }

-          .hljs-formula,
-          .hljs-operator,
-          .hljs-params,
-          .hljs-property,
-          .hljs-punctuation,
-          .hljs-tag {
-            /* intentionally empty */
+          .code-highlight .token.italic {
+            font-style: italic;
          }
        `}</style>
      </div>
--- a/lib/parse-notes.ts
+++ b/lib/parse-notes.ts
@ -12,7 +12,7 @@ import remarkGfm from "remark-gfm";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeHighlight from "rehype-highlight";
+import rehypePrism from "rehype-prism-plus";

 import type { NoteMetaType, NoteType } from "../types";

@ -68,7 +68,7 @@ export const getNote = async (slug: string): Promise<NoteType> => {
            test: ["h2", "h3"],
          },
        ],
-        [rehypeHighlight, {}],
+        [rehypePrism, { ignoreMissing: true }],
      ];

      return options;
--- a/notes/css-waving-hand-emoji.mdx
+++ b/notes/css-waving-hand-emoji.mdx
@ -29,7 +29,7 @@ Below are the code snippets you can grab and customize to make your own ["waving
 ## CSS

 {/* prettier-ignore */}
-```css
+```css showLineNumbers
 .wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
--- a/notes/dark-mode.mdx
+++ b/notes/dark-mode.mdx
@ -52,7 +52,7 @@ A _very_ barebones example is embedded above ([view the source here](https://git

 I have cleaned up this code a bit, added a few features, and packaged it as an [📦 NPM module](https://www.npmjs.com/package/dark-mode-switcheroo) (zero dependencies and still [only ~500 bytes](https://bundlephobia.com/package/dark-mode-switcheroo) minified and gzipped!). Here's a small snippet of the updated method for the browser (pulling the module from [UNPKG](https://unpkg.com/browse/dark-mode-switcheroo/)), but definitely [read the readme](https://github.com/jakejarvis/dark-mode#readme) for much more detail on the API.

-```html
+```html showLineNumbers
 <button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>

 <script src="https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
@ -100,7 +100,7 @@ The [example HTML and CSS below](#html-css) is still helpful for reference.
 ### Full JS:

 {/* prettier-ignore */}
-```js
+```js showLineNumbers
 /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */

 (function () {
@ -183,7 +183,7 @@ The [example HTML and CSS below](#html-css) is still helpful for reference.
 ### HTML & CSS Example:

 {/* prettier-ignore */}
-```html
+```html showLineNumbers
 <!doctype html>
 <html>
 <head>
--- a/notes/finding-candidates-subdomain-takeovers.mdx
+++ b/notes/finding-candidates-subdomain-takeovers.mdx
@ -63,19 +63,19 @@ Conveniently, [Rapid7](https://www.rapid7.com/) publishes a monthly list for us

 One of their free monthly datasets is called [Forward DNS](https://opendata.rapid7.com/sonar.fdns_v2/), where you'll find `.json` files named `xxxx-fdns_cname.json.gz`. Within the [`subtake`](https://github.com/jakejarvis/subtake) repository, there's an automated script named [`sonar.sh`](https://github.com/jakejarvis/subtake/blob/master/sonar.sh), which downloads the dataset for you and outputs a simple text file of CNAMEs pointed to any of the services listed above. Once you've [cloned the `subtake` repository](https://github.com/jakejarvis/subtake) and grabbed the timestamp part of the filename (the string that precedes `-fdns_cname.json.gz`), usage of the script is as follows:

-```bash {linenos=false}
+```bash
 ./sonar.sh 2019-03-30-1553989414 sonar_output.txt
 ```

 This new text file contains _both active and abandoned_ subdomains pointing to any of the services listed above — we still need to narrow it down to the takeover candidates by attempting to actually resolve each of them, which is where `subtake` comes into play. To install `subtake`, make sure [Go is installed first](https://golang.org/doc/install#install) and run the following:

-```bash {linenos=false}
+```bash
 go get github.com/jakejarvis/subtake
 ```

 For a detailed description of the different options you can play around with, see the [full readme on GitHub](https://github.com/jakejarvis/subtake#usage) — but here's a simple example command that uses 50 threads to take the CNAMEs listed in `sonar_output.txt` and outputs potentially vulnerable subdomains to `vulnerable.txt`.

-```bash {linenos=false}
+```bash
 subtake -f sonar_output.txt -c fingerprints.json -t 50 -ssl -a -o vulnerable.txt
 ```

@ -83,7 +83,7 @@ This could take quite a while — up to a day, depending on your CPU, memory, an

 I also have a collection of root domains of companies offering bounties through [HackerOne](https://hackerone.com/directory/) or [Bugcrowd](https://bugcrowd.com/programs) at a [different GitHub repository](https://github.com/jakejarvis/bounty-domains/). Using the [`grep`-friendly text file](https://github.com/jakejarvis/bounty-domains/blob/master/grep.txt), it's easy to use [`grep`](https://man7.org/linux/man-pages/man1/grep.1.html) to narrow down your `vulnerable.txt` list even more:

-```bash {linenos=false}
+```bash
 grep -f grep.txt vulnerable.txt
 ```

@ -117,7 +117,7 @@ I removed the company's name because an important part of responsible _disclosur

 The `poc-d4ca9e8ceb.html` proof-of-concept file contained this single, hidden line:

-```html
+```html showLineNumbers
 <!-- subdomain takeover POC by @jakejarvis on Bugcrowd -->
 ```

--- a/notes/how-to-backup-linux-server.mdx
+++ b/notes/how-to-backup-linux-server.mdx
@ -69,27 +69,27 @@ Restic might be included in your OS's default repositories (it is on Ubuntu) but

 Find the latest version of Restic on their [GitHub releases page](https://github.com/restic/restic/releases/latest). Since I'm assuming this is a Linux server, we only want the file ending in `_linux_amd64.bz2`. (For a 32-bit Linux server, find `_linux_386.bz2`. Windows, macOS, and BSD binaries are also there.) Right-click and copy the direct URL for that file and head over to your server's command line to download it into your home directory:

-```bash {linenos=false}
+```bash
 cd ~
 wget https://github.com/restic/restic/releases/download/v0.9.5/restic_0.9.5_linux_amd64.bz2
 ```

 Next, we'll unzip the download in place:

-```bash {linenos=false}
+```bash
 bunzip2 restic_*
 ```

 This should leave us with a single file: the Restic binary. In order to make Restic available system-wide and accessible with a simple `restic` command, we need to move it into the `/usr/local/bin` folder, which requires `sudo` access:

-```bash {linenos=false}
+```bash
 sudo mv restic_* /usr/local/bin/restic
 sudo chmod a+x /usr/local/bin/restic
 ```

 Now's a good time to run `restic` to make sure we're good to move on. If you see the version number we downloaded, you're all set!

-```bash {linenos=false}
+```bash
 restic version
 ```

@ -101,14 +101,14 @@ If you haven't already [created a new S3 bucket](https://docs.aws.amazon.com/qui

 We need to store these keys as environment variables named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`. For now, we'll set these temporarily until we automate everything in the next step.

-```bash {linenos=false}
+```bash
 export AWS_ACCESS_KEY_ID="your AWS access key"
 export AWS_SECRET_ACCESS_KEY="your AWS secret"
 ```

 We'll also need to tell Restic where the bucket is located and set a secure password to encrypt the backups. You can generate a super-secure 32-character password by running `openssl rand -base64 32` — just make sure you store it somewhere safe!

-```bash {linenos=false}
+```bash
 export RESTIC_REPOSITORY="s3:s3.amazonaws.com/your-bucket-name"
 export RESTIC_PASSWORD="passw0rd123-just-kidding"
 ```
@ -117,7 +117,7 @@ export RESTIC_PASSWORD="passw0rd123-just-kidding"

 Now we're ready to have Restic initialize the repository. This saves a `config` file in your S3 bucket and starts the encryption process right off the bat. You only need to run this once.

-```bash {linenos=false}
+```bash
 restic init
 ```

@ -127,7 +127,7 @@ If successful, you should see a message containing `created restic backend`. If

 Now that the hard parts are done, creating a backup (or "snapshot" in Restic terms) is as simple as a one-line command. All we need to specify is the directory you want to backup.

-```bash {linenos=false}
+```bash
 restic backup /srv/important/data
 ```

@ -156,7 +156,7 @@ I highly recommend adding one final command to the end of the file: Restic's `fo

 This command keeps one snapshot from each of the last **six hours**, one snapshot from each of the last **seven days**, one snapshot from each of the last **four weeks**, and one snapshot from each of the last **twelve months**.

-```bash {linenos=false}
+```bash
 restic forget -q --prune --keep-hourly 6 --keep-daily 7 --keep-weekly 4 --keep-monthly 12
 ```

@ -164,13 +164,13 @@ Reading [the documentation](https://restic.readthedocs.io/en/latest/060_forget.h

 Save the shell script and close the editor. Don't forget to make the script we just wrote actually executable:

-```bash {linenos=false}
+```bash
 chmod +x backup.sh
 ```

 Lastly, we need to set the actual cron job. To do this, run `sudo crontab -e` and add the following line to the end:

-```bash {linenos=false}
+```bash
 0 * * * * /root/backup.sh
 ```

@ -186,7 +186,7 @@ Take note of the next time that your new cron job _should_ run, so we can check

 To restore a snapshot to a certain location, grab the ID from `restic snapshots` and use `restore` like so:

-```bash {linenos=false}
+```bash
 restic restore 420x69abc --target ~/restored_files
 ```

--- a/notes/my-first-code.mdx
+++ b/notes/my-first-code.mdx
@ -57,7 +57,7 @@ If you're bored on a rainy day, potential activities could include:

 Who cares if somebody wants to delete a post with the ID "`*`" no matter the author? ([delete_reply_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/delete_reply_submit.php#L9))

-```php
+```php showLineNumbers
 <?php
  $query2 = "DELETE FROM jbb_replies
 WHERE replyID ='$replyID'";
@ -68,7 +68,7 @@ $result2 = mysql_query ($query2)

 Sessions based on storing an auto-incremented user ID in a cookie. ([login_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/login_submit.php#L28))

-```php
+```php showLineNumbers
 <?php
 session_id($user->userID);
 session_start();
@ -80,7 +80,7 @@ $_SESSION["ck_groupID"] = $user->groupID;

 Viewing a "private" message based solely on a sequential message ID. ([pm_view.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/pm_view.php#L13))

-```php
+```php showLineNumbers
 <?php
 $query1 = "SELECT * FROM jbb_pm WHERE pmID = '$pmID'";
 ?>
@ -88,7 +88,7 @@ $query1 = "SELECT * FROM jbb_pm WHERE pmID = '$pmID'";

 Incredibly ambitious emoticon and [BBCode](https://en.wikipedia.org/wiki/BBCode) support. I honestly can't begin to explain this logic. ([functions.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/functions.php#L18))

-```php
+```php showLineNumbers
 <?php
 $replacement = '<Image SRC=images/emoticons/smile.gif>';
 $replacement2 = '<Image SRC=images/emoticons/bigsmile.gif>';
@ -125,7 +125,7 @@ $topicval = str_replace('

 Saving new passwords as plaintext — probably the least problematic problem. ([register_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/register_submit.php#L10))

-```php
+```php showLineNumbers
 <?php
 $query = "INSERT INTO jbb_users (username, password, email, avatar) VALUES ('$username','$password','$email','images/avatars/noavatar.gif')";
 ?>
@ -133,7 +133,7 @@ $query = "INSERT INTO jbb_users (username, password, email, avatar) VALUES ('$us

 I guess I gave up on counting `$query`s by ones... ([functions.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/functions.php#L231))

-```php
+```php showLineNumbers
 <?php
 while ($topic = mysql_fetch_object($result30)) {
    $query40 = "SELECT * FROM jbb_users WHERE userID = '$topic->userID'";
--- a/notes/security-headers-cloudflare-workers.mdx
+++ b/notes/security-headers-cloudflare-workers.mdx
@ -44,7 +44,7 @@ If you run your own server, these can be added by way of your Apache or nginx co

 The following script can be added as a Worker and customized to your needs. Some can be extremely picky with syntax, so be sure to [read the documentation](https://www.netsparker.com/whitepaper-http-security-headers/) carefully. You can fiddle with it in [the playground](https://cloudflareworkers.com/), too. Simply modify the current headers to your needs, or add new ones to the `newHeaders` or `removeHeaders` arrays.

-```js
+```js showLineNumbers
 let addHeaders = {
  "Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests",
  "Strict-Transport-Security": "max-age=1000",
--- a/package.json
+++ b/package.json
@ -64,7 +64,7 @@
    "reading-time": "^1.5.0",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-external-links": "^1.0.1",
-    "rehype-highlight": "^5.0.2",
+    "rehype-prism-plus": "^1.3.0",
    "rehype-slug": "^5.0.1",
    "remark-gfm": "^3.0.1",
    "sanitize-html": "^2.6.1",
--- a/styles/colors.css
+++ b/styles/colors.css
@ -16,18 +16,17 @@
  --error: #ff1b1b;

  /* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
-  --highlight-color: #313131;
-  --highlight-bg: #fbfbfb;
-  --highlight-comment: #656e77;
-  --highlight-keyword: #029cb9;
-  --highlight-attribute: #70a800;
-  --highlight-symbol: #803378;
-  --highlight-namespace: #f92672;
-  --highlight-literal: #ae81ff;
-  --highlight-punctuation: #111111;
-  --highlight-variable: #d88200;
-  --highlight-deletion: #ff1b1b;
-  --highlight-addition: #44a248;
+  --code-text: #313131;
+  --code-background: #fbfbfb;
+  --code-comment: #656e77;
+  --code-keyword: #029cb9;
+  --code-attribute: #70a800;
+  --code-namespace: #f92672;
+  --code-literal: #ae81ff;
+  --code-punctuation: #111111;
+  --code-variable: #d88200;
+  --code-addition: #44a248;
+  --code-deletion: #ff1b1b;
 }

 [data-theme="dark"] {
@ -48,16 +47,15 @@
  --error: #ff5151;

  /* Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
-  --highlight-color: #e4e4e4;
-  --highlight-bg: #212121;
-  --highlight-comment: #929292;
-  --highlight-keyword: #3b9dd2;
-  --highlight-attribute: #78df55;
-  --highlight-symbol: #c59bc1;
-  --highlight-namespace: #f95757;
-  --highlight-literal: #d588fb;
-  --highlight-punctuation: #cccccc;
-  --highlight-variable: #fd992a;
-  --highlight-deletion: #ff5151;
-  --highlight-addition: #78df55;
+  --code-text: #e4e4e4;
+  --code-background: #212121;
+  --code-comment: #929292;
+  --code-keyword: #3b9dd2;
+  --code-attribute: #78df55;
+  --code-namespace: #f95757;
+  --code-literal: #d588fb;
+  --code-punctuation: #cccccc;
+  --code-variable: #fd992a;
+  --code-addition: #78df55;
+  --code-deletion: #ff5151;
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1548,6 +1548,16 @@
  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==

+"@types/parse5@^6.0.0":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
+  integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
+
+"@types/prismjs@^1.0.0":
+  version "1.16.6"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.6.tgz#377054f72f671b36dbe78c517ce2b279d83ecc40"
+  integrity sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==
+
 "@types/prop-types@*", "@types/prop-types@^15.7.4":
  version "15.7.4"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
@ -3469,6 +3479,20 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

+hast-util-from-parse5@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-7.1.0.tgz#c129dd3a24dd8a867ab8a029ca47e27aa54864b7"
+  integrity sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/parse5" "^6.0.0"
+    "@types/unist" "^2.0.0"
+    hastscript "^7.0.0"
+    property-information "^6.0.0"
+    vfile "^5.0.0"
+    vfile-location "^4.0.0"
+    web-namespaces "^2.0.0"
+
 hast-util-has-property@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz#c15cd6180f3e535540739fcc9787bcffb5708cae"
@ -3489,6 +3513,13 @@ hast-util-is-element@^2.0.0:
    "@types/hast" "^2.0.0"
    "@types/unist" "^2.0.0"

+hast-util-parse-selector@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.0.tgz#a519e27e8b61bd5a98fad494ed06131ce68d9c3f"
+  integrity sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
 hast-util-to-estree@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/hast-util-to-estree/-/hast-util-to-estree-2.0.2.tgz#79c5bf588915610b3f0d47ca83a74dc0269c7dc2"
@ -3516,30 +3547,27 @@ hast-util-to-string@^2.0.0:
  dependencies:
    "@types/hast" "^2.0.0"

-hast-util-to-text@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz#b7699a75f7a61af6e0befb67660cd78460d96dc6"
-  integrity sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==
-  dependencies:
-    "@types/hast" "^2.0.0"
-    hast-util-is-element "^2.0.0"
-    unist-util-find-after "^4.0.0"
-
 hast-util-whitespace@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz#4fc1086467cc1ef5ba20673cb6b03cec3a970f1c"
  integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==

+hastscript@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-7.0.2.tgz#d811fc040817d91923448a28156463b2e40d590a"
+  integrity sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-parse-selector "^3.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+
 hex-rgb@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
  integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==

-highlight.js@~11.4.0:
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
-  integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
-
 hoist-non-react-statics@^3.3.0:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@ -4141,15 +4169,6 @@ lowercase-keys@^2.0.0:
  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
  integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==

-lowlight@^2.0.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-2.5.0.tgz#723a39fc0d9b911731a395b320519cbb0790ab14"
-  integrity sha512-OXGUch9JZu4q5r4Ir6QlUp5pBXMxS7NHaclhRiUlxNRcOSK0gtXZcVrsGP4eM7bv0/KDHg/TXQagx/X35EULsA==
-  dependencies:
-    "@types/hast" "^2.0.0"
-    fault "^2.0.0"
-    highlight.js "~11.4.0"
-
 lru-cache@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@ -5223,11 +5242,21 @@ parse-json@^5.0.0:
    json-parse-even-better-errors "^2.3.0"
    lines-and-columns "^1.1.6"

+parse-numeric-range@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz#7c63b61190d61e4d53a1197f0c83c47bb670ffa3"
+  integrity sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==
+
 parse-srcset@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
  integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=

+parse5@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 path-exists@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@ -5361,6 +5390,11 @@ prettier@^2.5.1:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==

+prismjs@~1.26.0:
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"
+  integrity sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==
+
 progress@^2.0.0:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@ -5536,6 +5570,17 @@ redent@^3.0.0:
    indent-string "^4.0.0"
    strip-indent "^3.0.0"

+refractor@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.4.0.tgz#093c3391c95e36e0fa1b630d7b13216cd7a0f643"
+  integrity sha512-JmpsdoB9Va7BxQAAsuFW4cvN6plRKmSVNua8vUjbB6uRv+9cwm5JDH67P8qYr0OAFXWE1D4WlrIAPzQNcyEaoQ==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/prismjs" "^1.0.0"
+    hastscript "^7.0.0"
+    parse-entities "^4.0.0"
+    prismjs "~1.26.0"
+
 regenerate-unicode-properties@^9.0.0:
  version "9.0.0"
  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
@ -5622,15 +5667,26 @@ rehype-external-links@^1.0.1:
    unified "^10.0.0"
    unist-util-visit "^4.0.0"

-rehype-highlight@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/rehype-highlight/-/rehype-highlight-5.0.2.tgz#de952123cd4d9672f21a4a38d3b119b88a08eafa"
-  integrity sha512-ZNm8V8BQUDn05cJPzAu/PjiloaFFrh+Pt3bY+NCcdCggI7Uyl5mW0FGR7RATeIz5/ECUd1D8Kvjt4HaLPmnOMw==
+rehype-parse@^8.0.2:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-8.0.3.tgz#a1947132a08a930d0c2b6fd2b3dbcc137457c07a"
+  integrity sha512-RGw0CVt+0S6KdvpE8bbP2Db9WXclQcIX7A0ufM3QFqAhTo/ddJMQrrI2j3cijlRPZlGK8R3pRgC8U5HyV76IDw==
  dependencies:
    "@types/hast" "^2.0.0"
-    hast-util-to-text "^3.0.0"
-    lowlight "^2.0.0"
+    hast-util-from-parse5 "^7.0.0"
+    parse5 "^6.0.0"
    unified "^10.0.0"
+
+rehype-prism-plus@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rehype-prism-plus/-/rehype-prism-plus-1.3.0.tgz#b73d5995bccbead54034df1733fd3eef263af731"
+  integrity sha512-qipMym4Acp2xwMY50zPW8l8f2RAAjFd/DSg75rTRfvTWZ9xIy2ZEnIiDmqoPLH4BQ/VybrQcFxG0lwZau9l+Qw==
+  dependencies:
+    hast-util-to-string "^2.0.0"
+    parse-numeric-range "^1.3.0"
+    refractor "^4.4.0"
+    rehype-parse "^8.0.2"
+    unist-util-filter "^4.0.0"
    unist-util-visit "^4.0.0"

 rehype-slug@^5.0.1:
@ -6508,13 +6564,14 @@ unist-builder@^3.0.0:
  dependencies:
    "@types/unist" "^2.0.0"

-unist-util-find-after@^4.0.0:
+unist-util-filter@^4.0.0:
  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz#1101cebf5fed88ae3c6f3fa676e86fd5772a4f32"
-  integrity sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==
+  resolved "https://registry.yarnpkg.com/unist-util-filter/-/unist-util-filter-4.0.0.tgz#59bc7960bb2cfd34cc086301090540bdb5580a86"
+  integrity sha512-H4iTOv2p+n83xjhx7eGFA3zSx7Xcv3Iv9lNQRpXiR8dmm9LtslhyjVlQrZLbkk4jwUrJgc8PPGkOOrfhb76s4Q==
  dependencies:
    "@types/unist" "^2.0.0"
    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"

 unist-util-generated@^2.0.0:
  version "2.0.0"
@ -6639,6 +6696,14 @@ validate-npm-package-license@^3.0.1:
    spdx-correct "^3.0.0"
    spdx-expression-parse "^3.0.0"

+vfile-location@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.0.1.tgz#06f2b9244a3565bef91f099359486a08b10d3a95"
+  integrity sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    vfile "^5.0.0"
+
 vfile-message@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.0.tgz#5437035aa43185ff4b9210d32fada6c640e59143"
@ -6657,6 +6722,11 @@ vfile@^5.0.0:
    unist-util-stringify-position "^3.0.0"
    vfile-message "^3.0.0"

+web-namespaces@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
+  integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
+
 web-streams-polyfill@^3.0.3:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz#a6b74026b38e4885869fb5c589e90b95ccfc7965"