From 4ad16f2fb0e23e0a7624ee13629937d8d676d8b6 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Thu, 26 May 2022 13:28:47 +0530
Subject: [PATCH 1/3] Enhance code example blocks

---
 build/syntax-highlight.js       | 103 +++++++-
 client/src/document/index.scss  |  35 +++
 client/src/ui/_vars.scss        | 410 +++++++++++++++-----------------
 client/src/ui/base/_themes.scss |   6 +
 4 files changed, 333 insertions(+), 221 deletions(-)

diff --git a/build/syntax-highlight.js b/build/syntax-highlight.js
index b5b2f7ca26f4..783f0eb63e77 100644
--- a/build/syntax-highlight.js
+++ b/build/syntax-highlight.js
@@ -55,7 +55,7 @@ function syntaxHighlight($, doc) {
   // match. The wildcard would technically match `<pre class="brushetta">`
   // too. But within the loop, we do a more careful regex on the class name
   // and only proceed if it's something sensible we can use in Prism.
-  $("pre[class*=brush]").each((_, element) => {
+  $("pre[class*=brush]").each((index, element) => {
     // The language is whatever string comes after the `brush(:)`
     // portion of the class name.
     const $pre = $(element).wrapAll("<div class='code-example'>");
@@ -65,24 +65,113 @@ function syntaxHighlight($, doc) {
     if (!match) {
       return;
     }
-    const name = ALIASES.get(match[1]) || match[1];
-    if (IGNORE.has(name)) {
+    const language = ALIASES.get(match[1]) || match[1];
+    if (IGNORE.has(language)) {
       // Seems to exist a couple of these in our docs. Just bail.
       return;
     }
-    const grammar = Prism.languages[name];
+    const grammar = Prism.languages[language];
     if (!grammar) {
       console.warn(
-        `Unable to find a Prism grammar for '${name}' found in ${doc.mdn_url}`
+        `Unable to find a Prism grammar for '${language}' found in ${doc.mdn_url}`
       );
       return; // bail!
     }
+
+    const addLineNumbers = className.match(/linenumbers/);
     const code = $pre.text();
-    const html = Prism.highlight(code, grammar, name);
-    const $code = $("<code>").html(html);
+    let html = "";
+
+    if (!addLineNumbers) {
+      html = Prism.highlight(code, grammar, language);
+    } else {
+      let highlights = className.match(/(?<=-)\d+/g);
+      highlights = highlights ? highlights : [];
+
+      const env = {
+        code: code,
+        grammar: grammar,
+        language: language,
+        codeBlockNo: index + 1,
+        highlights: highlights,
+      };
+
+      // use lower level APIs for finer control
+      env.tokens = Prism.tokenize(code, grammar);
+      Prism.plugins.enhance.addLines(env);
+      html = Prism.Token.stringify(Prism.util.encode(env.tokens), language);
+    }
 
+    const $code = $("<code>").html(html);
     $pre.empty().append($code);
   });
 }
 
+// plugin to add line numbers, highlighting, and anchors
+Prism.plugins.enhance = {
+  createLineToken(children, env, lineNo) {
+    const line = new Prism.Token("line", children);
+    line.codeBlockNo = env.codeBlockNo;
+    line.lineNo = lineNo;
+
+    if (env.highlights.includes(String(lineNo))) {
+      line.alias = "highlight";
+    }
+    return line;
+  },
+
+  createLineNumberToken(codeBlockNo, lineNo) {
+    const id = `E${codeBlockNo}L${lineNo}`;
+    const anchor = `<a id='${id}' href="#${id}" title="">${lineNo}</a>`;
+    return new Prism.Token("lineno", anchor);
+  },
+
+  addLines(env) {
+    if (Array.isArray(env.tokens) && env.tokens.length > 0) {
+      const newList = new Array();
+      let lineNo = 1;
+      let children = [this.createLineNumberToken(env.codeBlockNo, lineNo)];
+
+      // separate the tokens into lines
+      env.tokens.forEach((token) => {
+        if (typeof token === "string" && token.includes("\n")) {
+          let part = "";
+          while (token !== "") {
+            const position = token.indexOf("\n");
+            if (position >= 0) {
+              part = token.substring(0, position);
+              token = token.substring(position + 1);
+            } else {
+              part = token;
+              token = "";
+            }
+
+            children.push(part ? part : "\u200b");
+            if (position >= 0) {
+              newList.push(this.createLineToken(children, env, lineNo));
+              lineNo++;
+              children = [this.createLineNumberToken(env.codeBlockNo, lineNo)];
+            }
+          }
+        } else {
+          children.push(token);
+        }
+      });
+
+      if (children.length > 1) {
+        newList.push(this.createLineToken(children, env, lineNo));
+      }
+
+      env.tokens = newList;
+    }
+  },
+};
+
+// add a hook to unescape the anchor tag strings
+Prism.hooks.add("wrap", function (token) {
+  if (token.type === "lineno") {
+    token.content = token.content.replaceAll("&lt;", "<");
+  }
+});
+
 module.exports = { syntaxHighlight };
diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 9d751f2ce876..071967ce2c17 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -548,6 +548,41 @@ pre {
   .example-bad {
     padding: 1rem;
   }
+
+  .line {
+    display: block;
+    position: relative;
+    padding-left: 0.5rem;
+    margin-left: 0.5rem;
+    white-space: pre-wrap;
+    border-left: 1px solid var(--code-line-number);
+  }
+
+  .lineno {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 0.35rem;
+    width: 1rem;
+    height: 100%;
+    left: -1.3rem;
+    position: absolute;
+    user-select: none;
+  }
+
+  .highlight {
+    background-color: var(--code-line-number);
+  }
+
+  a {
+    color: var(--code-token-comment) !important;
+    font-size: var(--type-tiny-font-size);
+    text-decoration: none !important;
+  }
+
+  a:hover {
+    text-decoration: underline !important;
+    color: var(--code-line-number-hover) !important;
+  }
 }
 
 .only-in-en-us {
diff --git a/client/src/ui/_vars.scss b/client/src/ui/_vars.scss
index 3736f6e2c733..bf678cb66f4f 100644
--- a/client/src/ui/_vars.scss
+++ b/client/src/ui/_vars.scss
@@ -1,208 +1,182 @@
 @use "./color-palette" as *;
 
-$mdn-color-light-grey-05: #fbfbfe;
-$mdn-color-light-grey-10: #f9f9fb;
-$mdn-color-light-grey-20: #f0f0f4;
-$mdn-color-light-grey-30: #e0e0e6;
-$mdn-color-light-grey-40: #cfcfd8;
-$mdn-color-light-grey-50: #bfbfc9;
-$mdn-color-light-grey-60: #afafba;
-$mdn-color-light-grey-70: #9f9fad;
-$mdn-color-light-grey-80: #8f8f9d;
-$mdn-color-light-grey-90: #80808e;
-$mdn-color-dark-grey-05: #5b5b66;
-$mdn-color-dark-grey-10: #52525e;
-$mdn-color-dark-grey-20: #4a4a55;
-$mdn-color-dark-grey-30: #42414d;
-$mdn-color-dark-grey-40: #3a3944;
-$mdn-color-dark-grey-50: #32313c;
-$mdn-color-dark-grey-60: #2b2a33;
-$mdn-color-dark-grey-70: #23222b;
-$mdn-color-dark-grey-80: #1c1b22;
-$mdn-color-dark-grey-90: #15141a;
+$mdn-color-neutral-light-70: #f9f9fb;
+$mdn-color-neutral-light-80: #f2f1f1;
+$mdn-color-neutral-light-90: #ebeaea;
 
-$mdn-color-dark-theme-blue: #1870f0;
-$mdn-color-dark-theme-green: #088806;
-$mdn-color-dark-theme-yellow: #d84000;
-$mdn-color-dark-theme-red: #e80840;
-$mdn-color-dark-theme-violet: #a040f8;
-$mdn-color-dark-theme-pink: #c84080;
+$mdn-color-neutral-10: #e2e2e2;
+$mdn-color-neutral-20: #cdcdcd;
+$mdn-color-neutral-30: #b3b3b3;
+$mdn-color-neutral-40: #9e9e9e;
+$mdn-color-neutral-50: #858585;
+$mdn-color-neutral-60: #696969;
+$mdn-color-neutral-70: #4e4e4e;
+$mdn-color-neutral-80: #343434;
+$mdn-color-neutral-90: #1b1b1b;
 
-$mdn-color-light-theme-blue: #1870f0;
-$mdn-color-light-theme-green: #088806;
-$mdn-color-light-theme-yellow: #d84000;
-$mdn-color-light-theme-red: #e80840;
-$mdn-color-light-theme-violet: #a040f8;
-$mdn-color-light-theme-pink: #c84080;
+$mdn-color-light-theme-blue: #0085f2;
+$mdn-color-light-theme-green: #009a46;
+$mdn-color-light-theme-yellow: #928700;
+$mdn-color-light-theme-red: #d30038;
+$mdn-color-light-theme-violet: #9b65ff;
+$mdn-color-light-theme-pink: #d00058;
 
-$mdn-color-light-theme-blue-10: mdn-color($mdn-color-light-theme-blue, 10);
-$mdn-color-light-theme-blue-20: mdn-color($mdn-color-light-theme-blue, 20);
-$mdn-color-light-theme-blue-30: mdn-color($mdn-color-light-theme-blue, 30);
-$mdn-color-light-theme-blue-40: mdn-color($mdn-color-light-theme-blue, 40);
-$mdn-color-light-theme-blue-50: mdn-color($mdn-color-light-theme-blue, 50);
-$mdn-color-light-theme-blue-60: mdn-color($mdn-color-light-theme-blue, 60);
-$mdn-color-light-theme-blue-70: mdn-color($mdn-color-light-theme-blue, 70);
-$mdn-color-light-theme-blue-80: mdn-color($mdn-color-light-theme-blue, 80);
-$mdn-color-light-theme-blue-90: mdn-color($mdn-color-light-theme-blue, 90);
+$mdn-color-dark-theme-blue: $mdn-color-light-theme-blue;
+$mdn-color-dark-theme-green: $mdn-color-light-theme-green;
+$mdn-color-dark-theme-yellow: $mdn-color-light-theme-yellow;
+$mdn-color-dark-theme-red: $mdn-color-light-theme-red;
+$mdn-color-dark-theme-violet: $mdn-color-light-theme-violet;
+$mdn-color-dark-theme-pink: $mdn-color-light-theme-pink;
 
-$mdn-color-light-theme-green-10: mdn-color($mdn-color-light-theme-green, 10);
-$mdn-color-light-theme-green-20: mdn-color($mdn-color-light-theme-green, 20);
-$mdn-color-light-theme-green-30: mdn-color($mdn-color-light-theme-green, 30);
-$mdn-color-light-theme-green-40: mdn-color($mdn-color-light-theme-green, 40);
-$mdn-color-light-theme-green-50: mdn-color($mdn-color-light-theme-green, 50);
-$mdn-color-light-theme-green-60: mdn-color($mdn-color-light-theme-green, 60);
-$mdn-color-light-theme-green-70: mdn-color($mdn-color-light-theme-green, 70);
-$mdn-color-light-theme-green-80: mdn-color($mdn-color-light-theme-green, 80);
-$mdn-color-light-theme-green-90: mdn-color($mdn-color-light-theme-green, 90);
+$mdn-color-light-theme-blue-10: #dce2f2;
+$mdn-color-light-theme-blue-20: #c1cff1;
+$mdn-color-light-theme-blue-30: #8cb4ff;
+$mdn-color-light-theme-blue-40: #5e9eff;
+$mdn-color-light-theme-blue-50: #0085f2;
+$mdn-color-light-theme-blue-60: #0069c2;
+$mdn-color-light-theme-blue-70: #004d92;
+$mdn-color-light-theme-blue-80: #003465;
+$mdn-color-light-theme-blue-90: #001b3a;
 
-$mdn-color-light-theme-yellow-10: mdn-color($mdn-color-light-theme-yellow, 10);
-$mdn-color-light-theme-yellow-20: mdn-color($mdn-color-light-theme-yellow, 20);
-$mdn-color-light-theme-yellow-30: mdn-color($mdn-color-light-theme-yellow, 30);
-$mdn-color-light-theme-yellow-40: mdn-color($mdn-color-light-theme-yellow, 40);
-$mdn-color-light-theme-yellow-50: mdn-color($mdn-color-light-theme-yellow, 50);
-$mdn-color-light-theme-yellow-60: mdn-color($mdn-color-light-theme-yellow, 60);
-$mdn-color-light-theme-yellow-70: mdn-color($mdn-color-light-theme-yellow, 70);
-$mdn-color-light-theme-yellow-80: mdn-color($mdn-color-light-theme-yellow, 80);
-$mdn-color-light-theme-yellow-90: mdn-color($mdn-color-light-theme-yellow, 90);
+$mdn-color-dark-theme-blue-10: $mdn-color-light-theme-blue-10;
+$mdn-color-dark-theme-blue-20: $mdn-color-light-theme-blue-20;
+$mdn-color-dark-theme-blue-30: $mdn-color-light-theme-blue-30;
+$mdn-color-dark-theme-blue-40: $mdn-color-light-theme-blue-40;
+$mdn-color-dark-theme-blue-50: $mdn-color-light-theme-blue-50;
+$mdn-color-dark-theme-blue-60: $mdn-color-light-theme-blue-60;
+$mdn-color-dark-theme-blue-70: $mdn-color-light-theme-blue-70;
+$mdn-color-dark-theme-blue-80: $mdn-color-light-theme-blue-80;
+$mdn-color-dark-theme-blue-90: $mdn-color-light-theme-blue-90;
 
-$mdn-color-light-theme-red-10: mdn-color($mdn-color-light-theme-red, 10);
-$mdn-color-light-theme-red-20: mdn-color($mdn-color-light-theme-red, 20);
-$mdn-color-light-theme-red-30: mdn-color($mdn-color-light-theme-red, 30);
-$mdn-color-light-theme-red-40: mdn-color($mdn-color-light-theme-red, 40);
-$mdn-color-light-theme-red-50: mdn-color($mdn-color-light-theme-red, 50);
-$mdn-color-light-theme-red-60: mdn-color($mdn-color-light-theme-red, 60);
-$mdn-color-light-theme-red-70: mdn-color($mdn-color-light-theme-red, 70);
-$mdn-color-light-theme-red-80: mdn-color($mdn-color-light-theme-red, 80);
-$mdn-color-light-theme-red-90: mdn-color($mdn-color-light-theme-red, 90);
+$mdn-color-light-theme-green-10: #a9f3ba;
+$mdn-color-light-theme-green-20: #73e693;
+$mdn-color-light-theme-green-30: #00d061;
+$mdn-color-light-theme-green-40: #00b755;
+$mdn-color-light-theme-green-50: #009a46;
+$mdn-color-light-theme-green-60: #007936;
+$mdn-color-light-theme-green-70: #005a26;
+$mdn-color-light-theme-green-80: #003d18;
+$mdn-color-light-theme-green-90: #00210a;
 
-$mdn-color-light-theme-violet-10: mdn-color($mdn-color-light-theme-violet, 10);
-$mdn-color-light-theme-violet-20: mdn-color($mdn-color-light-theme-violet, 20);
-$mdn-color-light-theme-violet-30: mdn-color($mdn-color-light-theme-violet, 30);
-$mdn-color-light-theme-violet-40: mdn-color($mdn-color-light-theme-violet, 40);
-$mdn-color-light-theme-violet-50: mdn-color($mdn-color-light-theme-violet, 50);
-$mdn-color-light-theme-violet-60: mdn-color($mdn-color-light-theme-violet, 60);
-$mdn-color-light-theme-violet-70: mdn-color($mdn-color-light-theme-violet, 70);
-$mdn-color-light-theme-violet-80: mdn-color($mdn-color-light-theme-violet, 80);
-$mdn-color-light-theme-violet-90: mdn-color($mdn-color-light-theme-violet, 90);
+$mdn-color-dark-theme-green-10: $mdn-color-light-theme-green-10;
+$mdn-color-dark-theme-green-20: $mdn-color-light-theme-green-20;
+$mdn-color-dark-theme-green-30: $mdn-color-light-theme-green-30;
+$mdn-color-dark-theme-green-40: $mdn-color-light-theme-green-40;
+$mdn-color-dark-theme-green-50: $mdn-color-light-theme-green-50;
+$mdn-color-dark-theme-green-60: $mdn-color-light-theme-green-60;
+$mdn-color-dark-theme-green-70: $mdn-color-light-theme-green-70;
+$mdn-color-dark-theme-green-80: $mdn-color-light-theme-green-80;
+$mdn-color-dark-theme-green-90: $mdn-color-light-theme-green-90;
 
-$mdn-color-light-theme-pink-10: mdn-color($mdn-color-light-theme-pink, 10);
-$mdn-color-light-theme-pink-20: mdn-color($mdn-color-light-theme-pink, 20);
-$mdn-color-light-theme-pink-30: mdn-color($mdn-color-light-theme-pink, 30);
-$mdn-color-light-theme-pink-40: mdn-color($mdn-color-light-theme-pink, 40);
-$mdn-color-light-theme-pink-50: mdn-color($mdn-color-light-theme-pink, 50);
-$mdn-color-light-theme-pink-60: mdn-color($mdn-color-light-theme-pink, 60);
-$mdn-color-light-theme-pink-70: mdn-color($mdn-color-light-theme-pink, 70);
-$mdn-color-light-theme-pink-80: mdn-color($mdn-color-light-theme-pink, 80);
-$mdn-color-light-theme-pink-90: mdn-color($mdn-color-light-theme-pink, 90);
+$mdn-color-light-theme-yellow-10: #f0e498;
+$mdn-color-light-theme-yellow-20: #dfd172;
+$mdn-color-light-theme-yellow-30: #c7b700;
+$mdn-color-light-theme-yellow-40: #afa100;
+$mdn-color-light-theme-yellow-50: #938700;
+$mdn-color-light-theme-yellow-60: #746a00;
+$mdn-color-light-theme-yellow-70: #564e00;
+$mdn-color-light-theme-yellow-80: #3a3500;
+$mdn-color-light-theme-yellow-90: #1f1c00;
 
-$mdn-color-dark-theme-blue-10: mdn-color($mdn-color-dark-theme-blue, 10);
-$mdn-color-dark-theme-blue-20: mdn-color($mdn-color-dark-theme-blue, 20);
-$mdn-color-dark-theme-blue-30: mdn-color($mdn-color-dark-theme-blue, 30);
-$mdn-color-dark-theme-blue-40: mdn-color($mdn-color-dark-theme-blue, 40);
-$mdn-color-dark-theme-blue-50: mdn-color($mdn-color-dark-theme-blue, 50);
-$mdn-color-dark-theme-blue-60: mdn-color($mdn-color-dark-theme-blue, 60);
-$mdn-color-dark-theme-blue-70: mdn-color($mdn-color-dark-theme-blue, 70);
-$mdn-color-dark-theme-blue-80: mdn-color($mdn-color-dark-theme-blue, 80);
-$mdn-color-dark-theme-blue-90: mdn-color($mdn-color-dark-theme-blue, 90);
+$mdn-color-dark-theme-yellow-10: $mdn-color-light-theme-yellow-10;
+$mdn-color-dark-theme-yellow-20: $mdn-color-light-theme-yellow-20;
+$mdn-color-dark-theme-yellow-30: $mdn-color-light-theme-yellow-30;
+$mdn-color-dark-theme-yellow-40: $mdn-color-light-theme-yellow-40;
+$mdn-color-dark-theme-yellow-50: $mdn-color-light-theme-yellow-50;
+$mdn-color-dark-theme-yellow-60: $mdn-color-light-theme-yellow-60;
+$mdn-color-dark-theme-yellow-70: $mdn-color-light-theme-yellow-70;
+$mdn-color-dark-theme-yellow-80: $mdn-color-light-theme-yellow-80;
+$mdn-color-dark-theme-yellow-90: $mdn-color-light-theme-yellow-90;
 
-$mdn-color-dark-theme-green-10: mdn-color($mdn-color-dark-theme-green, 10);
-$mdn-color-dark-theme-green-20: mdn-color($mdn-color-dark-theme-green, 20);
-$mdn-color-dark-theme-green-30: mdn-color($mdn-color-dark-theme-green, 30);
-$mdn-color-dark-theme-green-40: mdn-color($mdn-color-dark-theme-green, 40);
-$mdn-color-dark-theme-green-50: mdn-color($mdn-color-dark-theme-green, 50);
-$mdn-color-dark-theme-green-60: mdn-color($mdn-color-dark-theme-green, 60);
-$mdn-color-dark-theme-green-70: mdn-color($mdn-color-dark-theme-green, 70);
-$mdn-color-dark-theme-green-80: mdn-color($mdn-color-dark-theme-green, 80);
-$mdn-color-dark-theme-green-90: mdn-color($mdn-color-dark-theme-green, 90);
+$mdn-color-light-theme-red-10: #ffd9dc;
+$mdn-color-light-theme-red-20: #ffc0c4;
+$mdn-color-light-theme-red-30: #ff97a0;
+$mdn-color-light-theme-red-40: #ff707f;
+$mdn-color-light-theme-red-50: #ff2a51;
+$mdn-color-light-theme-red-60: #d30038;
+$mdn-color-light-theme-red-70: #9e0027;
+$mdn-color-light-theme-red-80: #6f0019;
+$mdn-color-light-theme-red-90: #40000a;
 
-$mdn-color-dark-theme-yellow-10: mdn-color($mdn-color-dark-theme-yellow, 10);
-$mdn-color-dark-theme-yellow-20: mdn-color($mdn-color-dark-theme-yellow, 20);
-$mdn-color-dark-theme-yellow-30: mdn-color($mdn-color-dark-theme-yellow, 30);
-$mdn-color-dark-theme-yellow-40: mdn-color($mdn-color-dark-theme-yellow, 40);
-$mdn-color-dark-theme-yellow-50: mdn-color($mdn-color-dark-theme-yellow, 50);
-$mdn-color-dark-theme-yellow-60: mdn-color($mdn-color-dark-theme-yellow, 60);
-$mdn-color-dark-theme-yellow-70: mdn-color($mdn-color-dark-theme-yellow, 70);
-$mdn-color-dark-theme-yellow-80: mdn-color($mdn-color-dark-theme-yellow, 80);
-$mdn-color-dark-theme-yellow-90: mdn-color($mdn-color-dark-theme-yellow, 90);
+$mdn-color-dark-theme-red-10: $mdn-color-light-theme-red-10;
+$mdn-color-dark-theme-red-20: $mdn-color-light-theme-red-20;
+$mdn-color-dark-theme-red-30: $mdn-color-light-theme-red-30;
+$mdn-color-dark-theme-red-40: $mdn-color-light-theme-red-40;
+$mdn-color-dark-theme-red-50: $mdn-color-light-theme-red-50;
+$mdn-color-dark-theme-red-60: $mdn-color-light-theme-red-60;
+$mdn-color-dark-theme-red-70: $mdn-color-light-theme-red-70;
+$mdn-color-dark-theme-red-80: $mdn-color-light-theme-red-80;
+$mdn-color-dark-theme-red-90: $mdn-color-light-theme-red-90;
 
-$mdn-color-dark-theme-red-10: mdn-color($mdn-color-dark-theme-red, 10);
-$mdn-color-dark-theme-red-20: mdn-color($mdn-color-dark-theme-red, 20);
-$mdn-color-dark-theme-red-30: mdn-color($mdn-color-dark-theme-red, 30);
-$mdn-color-dark-theme-red-40: mdn-color($mdn-color-dark-theme-red, 40);
-$mdn-color-dark-theme-red-50: mdn-color($mdn-color-dark-theme-red, 50);
-$mdn-color-dark-theme-red-60: mdn-color($mdn-color-dark-theme-red, 60);
-$mdn-color-dark-theme-red-70: mdn-color($mdn-color-dark-theme-red, 70);
-$mdn-color-dark-theme-red-80: mdn-color($mdn-color-dark-theme-red, 80);
-$mdn-color-dark-theme-red-90: mdn-color($mdn-color-dark-theme-red, 90);
+$mdn-color-light-theme-violet-10: #e6deff;
+$mdn-color-light-theme-violet-20: #d4c5ff;
+$mdn-color-light-theme-violet-30: #bea5ff;
+$mdn-color-light-theme-violet-40: #ae8aff;
+$mdn-color-light-theme-violet-50: #9b65ff;
+$mdn-color-light-theme-violet-60: #872bff;
+$mdn-color-light-theme-violet-70: #6800cf;
+$mdn-color-light-theme-violet-80: #480091;
+$mdn-color-light-theme-violet-90: #280056;
 
-$mdn-color-dark-theme-violet-10: mdn-color($mdn-color-dark-theme-violet, 10);
-$mdn-color-dark-theme-violet-20: mdn-color($mdn-color-dark-theme-violet, 20);
-$mdn-color-dark-theme-violet-30: mdn-color($mdn-color-dark-theme-violet, 30);
-$mdn-color-dark-theme-violet-40: mdn-color($mdn-color-dark-theme-violet, 40);
-$mdn-color-dark-theme-violet-50: mdn-color($mdn-color-dark-theme-violet, 50);
-$mdn-color-dark-theme-violet-60: mdn-color($mdn-color-dark-theme-violet, 60);
-$mdn-color-dark-theme-violet-70: mdn-color($mdn-color-dark-theme-violet, 70);
-$mdn-color-dark-theme-violet-80: mdn-color($mdn-color-dark-theme-violet, 80);
-$mdn-color-dark-theme-violet-90: mdn-color($mdn-color-dark-theme-violet, 90);
+$mdn-color-dark-theme-violet-10: $mdn-color-light-theme-violet-10;
+$mdn-color-dark-theme-violet-20: $mdn-color-light-theme-violet-20;
+$mdn-color-dark-theme-violet-30: $mdn-color-light-theme-violet-30;
+$mdn-color-dark-theme-violet-40: $mdn-color-light-theme-violet-40;
+$mdn-color-dark-theme-violet-50: $mdn-color-light-theme-violet-50;
+$mdn-color-dark-theme-violet-60: $mdn-color-light-theme-violet-60;
+$mdn-color-dark-theme-violet-70: $mdn-color-light-theme-violet-70;
+$mdn-color-dark-theme-violet-80: $mdn-color-light-theme-violet-80;
+$mdn-color-dark-theme-violet-90: $mdn-color-light-theme-violet-90;
 
-$mdn-color-dark-theme-pink-10: mdn-color($mdn-color-dark-theme-pink, 10);
-$mdn-color-dark-theme-pink-20: mdn-color($mdn-color-dark-theme-pink, 20);
-$mdn-color-dark-theme-pink-30: mdn-color($mdn-color-dark-theme-pink, 30);
-$mdn-color-dark-theme-pink-40: mdn-color($mdn-color-dark-theme-pink, 40);
-$mdn-color-dark-theme-pink-50: mdn-color($mdn-color-dark-theme-pink, 50);
-$mdn-color-dark-theme-pink-60: mdn-color($mdn-color-dark-theme-pink, 60);
-$mdn-color-dark-theme-pink-70: mdn-color($mdn-color-dark-theme-pink, 70);
-$mdn-color-dark-theme-pink-80: mdn-color($mdn-color-dark-theme-pink, 80);
-$mdn-color-dark-theme-pink-90: mdn-color($mdn-color-dark-theme-pink, 90);
+$mdn-color-light-theme-pink-10: #ffd9df;
+$mdn-color-light-theme-pink-20: #ffbbc8;
+$mdn-color-light-theme-pink-30: #ff93aa;
+$mdn-color-light-theme-pink-40: #ff6d91;
+$mdn-color-light-theme-pink-50: #ff1f72;
+$mdn-color-light-theme-pink-60: #d00058;
+$mdn-color-light-theme-pink-70: #9e0041;
+$mdn-color-light-theme-pink-80: #6d002b;
+$mdn-color-light-theme-pink-90: #3f0015;
 
-$mdn-color-ink-05: #393473;
-$mdn-color-ink-10: #342f6d;
-$mdn-color-ink-20: #312a64;
-$mdn-color-ink-30: #2e255d;
-$mdn-color-ink-40: #2b2156;
-$mdn-color-ink-50: #291d4f;
-$mdn-color-ink-60: #271948;
-$mdn-color-ink-70: #20123a;
-$mdn-color-ink-80: #20133a;
-$mdn-color-ink-90: #1d1133;
-$mdn-color-marketing-grey-05: #f9f9fa;
-$mdn-color-marketing-grey-10: #ededf0;
-$mdn-color-marketing-grey-20: #cdcdd4;
-$mdn-color-marketing-grey-30: #b1b1bc;
-$mdn-color-marketing-grey-40: #9595a2;
-$mdn-color-marketing-grey-50: #7a7a8b;
-$mdn-color-marketing-grey-60: #5e5e72;
-$mdn-color-marketing-grey-70: #42435a;
-$mdn-color-marketing-grey-80: #1f2033;
-$mdn-color-marketing-grey-90: #141422;
-$mdn-color-black: #000000;
-$mdn-color-white: #ffffff;
+$mdn-color-dark-theme-pink-10: $mdn-color-light-theme-pink-10;
+$mdn-color-dark-theme-pink-20: $mdn-color-light-theme-pink-20;
+$mdn-color-dark-theme-pink-30: $mdn-color-light-theme-pink-30;
+$mdn-color-dark-theme-pink-40: $mdn-color-light-theme-pink-40;
+$mdn-color-dark-theme-pink-50: $mdn-color-light-theme-pink-50;
+$mdn-color-dark-theme-pink-60: $mdn-color-light-theme-pink-60;
+$mdn-color-dark-theme-pink-70: $mdn-color-light-theme-pink-70;
+$mdn-color-dark-theme-pink-80: $mdn-color-light-theme-pink-80;
+$mdn-color-dark-theme-pink-90: $mdn-color-light-theme-pink-90;
 
-$mdn-theme-light-text-primary: $mdn-color-dark-grey-90;
-$mdn-theme-light-text-secondary: $mdn-color-dark-grey-05;
-$mdn-theme-light-text-inactive: #{$mdn-color-dark-grey-05}a6;
-$mdn-theme-light-text-link: $mdn-color-light-theme-blue-50;
-$mdn-theme-light-text-invert: $mdn-color-light-grey-05;
+$mdn-color-black: #000;
+$mdn-color-white: #fff;
+
+$mdn-theme-light-text-primary: $mdn-color-neutral-90;
+$mdn-theme-light-text-secondary: $mdn-color-neutral-70;
+$mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6;
+$mdn-theme-light-text-link: $mdn-color-light-theme-blue-60;
+$mdn-theme-light-text-invert: $mdn-color-white;
 $mdn-theme-light-background-primary: $mdn-color-white;
-$mdn-theme-light-background-secondary: $mdn-color-light-grey-10;
-$mdn-theme-light-background-tertiary: $mdn-color-light-grey-05;
-$mdn-theme-light-border-primary: $mdn-color-light-grey-40;
-$mdn-theme-light-border-secondary: $mdn-color-light-grey-30;
-$mdn-theme-light-button-primary-default: $mdn-color-dark-grey-90;
-$mdn-theme-light-button-primary-hover: $mdn-color-dark-grey-40;
-$mdn-theme-light-button-primary-active: $mdn-color-dark-grey-05;
-$mdn-theme-light-button-primary-inactive: $mdn-color-dark-grey-90;
-$mdn-theme-light-button-secondary-default: $mdn-color-light-grey-05;
-$mdn-theme-light-button-secondary-hover: $mdn-color-light-grey-30;
-$mdn-theme-light-button-secondary-active: $mdn-color-light-grey-30;
-$mdn-theme-light-button-secondary-inactive: $mdn-color-light-grey-10;
+$mdn-theme-light-background-secondary: $mdn-color-neutral-light-70;
+$mdn-theme-light-background-tertiary: $mdn-color-white;
+$mdn-theme-light-background-toc-active: $mdn-color-neutral-light-90;
+$mdn-theme-light-border-primary: $mdn-color-neutral-20;
+$mdn-theme-light-border-secondary: $mdn-color-neutral-20;
+$mdn-theme-light-button-primary-default: $mdn-color-neutral-90;
+$mdn-theme-light-button-primary-hover: $mdn-color-neutral-60;
+$mdn-theme-light-button-primary-active: $mdn-color-neutral-40;
+$mdn-theme-light-button-primary-inactive: $mdn-color-neutral-90;
+$mdn-theme-light-button-secondary-default: $mdn-color-white;
+$mdn-theme-light-button-secondary-hover: $mdn-color-neutral-20;
+$mdn-theme-light-button-secondary-active: $mdn-color-neutral-20;
+$mdn-theme-light-button-secondary-inactive: $mdn-color-neutral-light-70;
 $mdn-theme-light-button-secondary-border-focus: $mdn-color-light-theme-blue-50;
 $mdn-theme-light-button-secondary-border-red: $mdn-color-light-theme-red-30;
 $mdn-theme-light-button-secondary-border-red-focus: $mdn-color-light-theme-red-10;
-$mdn-theme-light-icon-primary: $mdn-color-dark-grey-05;
-$mdn-theme-light-icon-secondary: $mdn-color-light-grey-60;
+$mdn-theme-light-icon-primary: $mdn-color-neutral-60;
+$mdn-theme-light-icon-secondary: $mdn-color-neutral-30;
 $mdn-theme-light-icon-information: $mdn-color-light-theme-blue-50;
-$mdn-theme-light-icon-warning: $mdn-color-light-theme-yellow-50;
+$mdn-theme-light-icon-warning: $mdn-color-light-theme-red-50;
 $mdn-theme-light-icon-critical: $mdn-color-light-theme-red-60;
 $mdn-theme-light-icon-success: $mdn-color-light-theme-green-60;
 $mdn-theme-light-accent-primary: $mdn-color-light-theme-blue-50;
@@ -213,60 +187,68 @@ $mdn-theme-light-shadow-01: 0px 1px 2px rgba(43, 42, 51, 0.05);
 $mdn-theme-light-shadow-02: 0px 1px 6px rgba(43, 42, 51, 0.1);
 
 $mdn-theme-light-code-token-tag: $mdn-color-light-theme-blue-60;
-$mdn-theme-light-code-token-punctuation: $mdn-color-dark-grey-05;
+$mdn-theme-light-code-token-punctuation: $mdn-color-neutral-40;
 $mdn-theme-light-code-token-attribute-name: $mdn-color-light-theme-red-60;
 $mdn-theme-light-code-token-attribute-value: $mdn-color-light-theme-green-60;
-$mdn-theme-light-code-token-comment: $mdn-color-dark-grey-05;
-$mdn-theme-light-code-token-default: $mdn-color-dark-grey-90;
+$mdn-theme-light-code-token-comment: $mdn-color-neutral-40;
+$mdn-theme-light-code-token-default: $mdn-color-neutral-90;
 $mdn-theme-light-code-token-selector: $mdn-color-light-theme-violet-60;
-$mdn-theme-light-code-background-inline: $mdn-color-light-grey-20;
-$mdn-theme-light-code-background-block: $mdn-color-light-grey-20;
+$mdn-theme-light-code-background-inline: $mdn-color-neutral-light-80;
+$mdn-theme-light-code-background-block: $mdn-color-neutral-light-80;
+$mdn-theme-light-code-line-number: $mdn-color-neutral-10;
+$mdn-theme-light-code-line-number-hover: $mdn-color-neutral-70;
+$mdn-theme-light-code-line-highlight: $mdn-color-neutral-10;
 
-$mdn-theme-dark-text-primary: $mdn-color-light-grey-05;
-$mdn-theme-dark-text-secondary: $mdn-color-light-grey-40;
-$mdn-theme-dark-text-inactive: #{$mdn-color-light-grey-40}a6;
+$mdn-theme-dark-text-primary: $mdn-color-white;
+$mdn-theme-dark-text-secondary: $mdn-color-neutral-20;
+$mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6;
 $mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30;
-$mdn-theme-dark-text-invert: $mdn-color-dark-grey-90;
-$mdn-theme-dark-background-primary: $mdn-color-dark-grey-90;
-$mdn-theme-dark-background-secondary: $mdn-color-dark-grey-70;
-$mdn-theme-dark-background-tertiary: $mdn-color-dark-grey-60;
-$mdn-theme-dark-border-primary: $mdn-color-dark-grey-10;
-$mdn-theme-dark-border-secondary: $mdn-color-dark-grey-40;
-$mdn-theme-dark-button-primary-default: $mdn-color-light-grey-05;
-$mdn-theme-dark-button-primary-hover: $mdn-color-light-grey-40;
-$mdn-theme-dark-button-primary-active: $mdn-color-light-grey-70;
-$mdn-theme-dark-button-primary-inactive: $mdn-color-light-grey-05;
-$mdn-theme-dark-button-secondary-default: $mdn-color-dark-grey-60;
-$mdn-theme-dark-button-secondary-hover: $mdn-color-dark-grey-10;
-$mdn-theme-dark-button-secondary-active: $mdn-color-dark-grey-05;
-$mdn-theme-dark-button-secondary-inactive: $mdn-color-dark-grey-60;
+$mdn-theme-dark-text-invert: $mdn-color-neutral-90;
+$mdn-theme-dark-background-primary: $mdn-color-neutral-90;
+$mdn-theme-dark-background-secondary: $mdn-color-neutral-80;
+$mdn-theme-dark-background-tertiary: $mdn-color-neutral-70;
+$mdn-theme-dark-background-toc-active: $mdn-color-neutral-80;
+$mdn-theme-dark-border-primary: $mdn-color-neutral-50;
+$mdn-theme-dark-border-secondary: $mdn-color-neutral-60;
+$mdn-theme-dark-button-primary-default: $mdn-color-white;
+$mdn-theme-dark-button-primary-hover: $mdn-color-neutral-20;
+$mdn-theme-dark-button-primary-active: $mdn-color-neutral-40;
+$mdn-theme-dark-button-primary-inactive: $mdn-color-white;
+$mdn-theme-dark-button-secondary-default: $mdn-color-neutral-70;
+$mdn-theme-dark-button-secondary-hover: $mdn-color-neutral-50;
+$mdn-theme-dark-button-secondary-active: $mdn-color-neutral-40;
+$mdn-theme-dark-button-secondary-inactive: $mdn-color-neutral-70;
 $mdn-theme-dark-shadow-01: 0px 1px 2px rgba(251, 251, 254, 0.2);
 $mdn-theme-dark-shadow-02: 0px 1px 6px rgba(251, 251, 254, 0.2);
-$mdn-theme-dark-icon-primary: $mdn-color-light-grey-05;
-$mdn-theme-dark-icon-secondary: $mdn-color-light-grey-60;
+$mdn-theme-dark-icon-primary: $mdn-color-white;
+$mdn-theme-dark-icon-secondary: $mdn-color-neutral-30;
 $mdn-theme-dark-icon-information: $mdn-color-dark-theme-blue-40;
 $mdn-theme-dark-icon-warning: $mdn-color-dark-theme-yellow-40;
 $mdn-theme-dark-icon-critical: $mdn-color-dark-theme-red-40;
 $mdn-theme-dark-icon-success: $mdn-color-dark-theme-green-40;
 $mdn-theme-dark-accent-primary: $mdn-color-dark-theme-blue-40;
 $mdn-theme-dark-accent-secondary: $mdn-color-dark-theme-blue-40;
-$mdn-theme-dark-field-focus-border: $mdn-color-light-grey-05;
+$mdn-theme-dark-field-focus-border: $mdn-color-white;
 $mdn-theme-dark-focus-01: 0px 0px 0px 3px rgba(251, 251, 254, 0.5);
 
 $mdn-theme-dark-code-token-tag: $mdn-color-dark-theme-blue-20;
-$mdn-theme-dark-code-token-punctuation: $mdn-color-light-grey-70;
+$mdn-theme-dark-code-token-punctuation: $mdn-color-neutral-40;
 $mdn-theme-dark-code-token-attribute-name: $mdn-color-dark-theme-red-30;
 $mdn-theme-dark-code-token-attribute-value: $mdn-color-dark-theme-green-30;
-$mdn-theme-dark-code-token-comment: $mdn-color-light-grey-70;
-$mdn-theme-dark-code-token-default: $mdn-color-light-grey-05;
+$mdn-theme-dark-code-token-comment: $mdn-color-neutral-40;
+$mdn-theme-dark-code-token-default: $mdn-color-white;
 $mdn-theme-dark-code-token-selector: $mdn-color-dark-theme-violet-30;
-$mdn-theme-dark-code-background-inline: $mdn-color-dark-grey-60;
-$mdn-theme-dark-code-background-block: $mdn-color-dark-grey-60;
+$mdn-theme-dark-code-background-inline: $mdn-color-neutral-80;
+$mdn-theme-dark-code-background-block: $mdn-color-neutral-80;
+$mdn-theme-dark-code-line-number: $mdn-color-neutral-70;
+$mdn-theme-dark-code-line-number-hover: $mdn-color-neutral-10;
+$mdn-theme-dark-code-line-highlight: $mdn-color-neutral-70;
 
 $screen-sm: 426px;
 $screen-md: 769px;
-$screen-lg: 1200px;
-$screen-xl: 1441px;
+$screen-lg: 992px;
+$screen-xl: 1200px;
+$screen-xxl: 1441px;
 
 /*
  * z-index scale
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index 3c6ea90e5811..353e8a7d5614 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -86,6 +86,9 @@
   --code-token-selector: #{$mdn-theme-light-code-token-selector};
   --code-background-inline: #{$mdn-theme-light-code-background-inline};
   --code-background-block: #{$mdn-theme-light-code-background-block};
+  --code-line-number: #{$mdn-theme-light-code-line-number};
+  --code-line-number-hover: #{$mdn-theme-light-code-line-number-hover};
+  --code-line-highlight: #{$mdn-theme-light-code-line-highlight};
 
   --scrollbar-bg: transparent;
   --scrollbar-color: rgba(0, 0, 0, 0.25);
@@ -233,6 +236,9 @@
   --code-token-selector: #{$mdn-theme-dark-code-token-selector};
   --code-background-inline: #{$mdn-theme-dark-code-background-inline};
   --code-background-block: #{$mdn-theme-dark-code-background-block};
+  --code-line-number: #{$mdn-theme-dark-code-line-number};
+  --code-line-number-hover: #{$mdn-theme-dark-code-line-number-hover};
+  --code-line-highlight: #{$mdn-theme-dark-code-line-highlight};
 
   --scrollbar-color: rgba(255, 255, 255, 0.25);
 

From 84c80b7a99a9fb4bcd0c206b181b68812c5d8960 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 3 Jun 2022 20:28:36 +0530
Subject: [PATCH 2/3] Flag improper use

---
 build/syntax-highlight.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/build/syntax-highlight.js b/build/syntax-highlight.js
index 783f0eb63e77..d13e5e2d0e7f 100644
--- a/build/syntax-highlight.js
+++ b/build/syntax-highlight.js
@@ -79,15 +79,24 @@ function syntaxHighlight($, doc) {
     }
 
     const addLineNumbers = className.match(/linenumbers/);
+    const highlightsTag = className.match(/highlight[-\d]+/g);
+    let highlights;
+    if (highlightsTag) {
+      highlights = highlightsTag[0].match(/(?<=-)\d+/g);
+      highlights = highlights ? highlights : [];
+    }
+
     const code = $pre.text();
     let html = "";
 
     if (!addLineNumbers) {
+      if (highlightsTag) {
+        console.warn(
+          `Tag 'linenumbers' must be present to use '${highlightsTag}'.`
+        );
+      }
       html = Prism.highlight(code, grammar, language);
     } else {
-      let highlights = className.match(/(?<=-)\d+/g);
-      highlights = highlights ? highlights : [];
-
       const env = {
         code: code,
         grammar: grammar,
@@ -160,8 +169,14 @@ Prism.plugins.enhance = {
 
       if (children.length > 1) {
         newList.push(this.createLineToken(children, env, lineNo));
+        lineNo++;
       }
 
+      const outOfRangeNos = env.highlights.filter((h) => h >= lineNo);
+      if (outOfRangeNos.length > 0) {
+        outOfRangeNos.sort((a, b) => a - b);
+        console.warn(`Can not highlight lines: ${outOfRangeNos.join(", ")}`);
+      }
       env.tokens = newList;
     }
   },

From 60ffb0e18296fd17b16590e979a939791b587531 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 3 Jun 2022 23:14:35 +0530
Subject: [PATCH 3/3] Apply review suggetions

---
 build/syntax-highlight.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/build/syntax-highlight.js b/build/syntax-highlight.js
index cf56acd536ac..6cb05db9f5ed 100644
--- a/build/syntax-highlight.js
+++ b/build/syntax-highlight.js
@@ -83,11 +83,6 @@ function syntaxHighlight($, doc) {
 
     const addLineNumbers = className.match(/linenumbers/);
     const highlightsTag = className.match(/highlight[-\d]+/g);
-    let highlights;
-    if (highlightsTag) {
-      highlights = highlightsTag[0].match(/(?<=-)\d+/g);
-      highlights = highlights ? highlights : [];
-    }
 
     const code = $pre.text();
     let html = "";
@@ -100,6 +95,10 @@ function syntaxHighlight($, doc) {
       }
       html = Prism.highlight(code, grammar, language);
     } else {
+      const highlights = highlightsTag
+        ? highlightsTag[0].match(/(?<=-)\d+/g) || []
+        : [];
+
       const env = {
         code: code,
         grammar: grammar,