From f3e49857cb2c720fc2b5d7986af9f3a36423f235 Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Mon, 16 Jun 2025 16:42:34 -0500 Subject: [PATCH 1/4] docs(docusaurus): add support for diff language syntax highlighting --- docusaurus.config.js | 2 +- src/styles/components/_code.scss | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 41423df2dae..09603acadca 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -324,7 +324,7 @@ module.exports = { prism: { theme: { plain: {}, styles: [] }, // https://github.com/FormidableLabs/prism-react-renderer/blob/e6d323332b0363a633407fabab47b608088e3a4d/packages/generate-prism-languages/index.ts#L9-L25 - additionalLanguages: ['shell-session', 'http'], + additionalLanguages: ['shell-session', 'http', 'diff'], }, algolia: { appId: 'O9QSL985BS', diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss index 667af512822..f5614926f6b 100644 --- a/src/styles/components/_code.scss +++ b/src/styles/components/_code.scss @@ -175,6 +175,13 @@ pre[class*='language-'] { cursor: help; } -.token.deleted { - color: red; +// diff code block highlighting +.language-diff .token.deleted { + color: rgb(50, 0, 0); + background-color: rgba(255, 0, 0, 0.05); +} + +.language-diff .token.inserted { + color: darkgreen; + background-color: rgba(0, 255, 0, 0.05); } From 3f2af37f5fb8b4109fa42fac23e7a88abce83fa6 Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Mon, 16 Jun 2025 16:47:52 -0500 Subject: [PATCH 2/4] docs(docusaurus): add .token.deleted css selector back in case used elsewhere --- src/styles/components/_code.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss index f5614926f6b..7371b46cc4d 100644 --- a/src/styles/components/_code.scss +++ b/src/styles/components/_code.scss @@ -175,6 +175,10 @@ pre[class*='language-'] { cursor: help; } +.token.deleted { + color: red; +} + // diff code block highlighting .language-diff .token.deleted { color: rgb(50, 0, 0); From b429322765c13781e99e254f7be3dd0b33c69322 Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Tue, 17 Jun 2025 13:55:46 -0500 Subject: [PATCH 3/4] docs(docusaurus): remove diff style section, move diff selectors to existing colors --- src/styles/components/_code.scss | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss index 7371b46cc4d..72d3e8f4bd2 100644 --- a/src/styles/components/_code.scss +++ b/src/styles/components/_code.scss @@ -149,7 +149,8 @@ pre[class*='language-'] { .token.attr-value, .language-css .token.string, .style .token.string, -.token.variable { +.token.variable, +.language-diff .token.inserted { color: #42b983; } @@ -159,7 +160,8 @@ pre[class*='language-'] { .token.regex, .token.keyword, -.token.important { +.token.important, +.language-diff .token.deleted { color: #f55073; } @@ -178,14 +180,3 @@ pre[class*='language-'] { .token.deleted { color: red; } - -// diff code block highlighting -.language-diff .token.deleted { - color: rgb(50, 0, 0); - background-color: rgba(255, 0, 0, 0.05); -} - -.language-diff .token.inserted { - color: darkgreen; - background-color: rgba(0, 255, 0, 0.05); -} From b63c03ff6fa4b198cc3e9a12461603b196981e5b Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Wed, 18 Jun 2025 14:50:47 -0500 Subject: [PATCH 4/4] docs(docusaurus): remove parent diff selector after verifying inserted, deleted class only for diff blocks --- src/styles/components/_code.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss index 72d3e8f4bd2..eb161f1d8d6 100644 --- a/src/styles/components/_code.scss +++ b/src/styles/components/_code.scss @@ -137,8 +137,7 @@ pre[class*='language-'] { .token.selector, .token.char, .token.function, -.token.builtin, -.token.inserted { +.token.builtin { color: #ff6810; } @@ -150,7 +149,7 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string, .token.variable, -.language-diff .token.inserted { +.token.inserted { color: #42b983; } @@ -160,8 +159,7 @@ pre[class*='language-'] { .token.regex, .token.keyword, -.token.important, -.language-diff .token.deleted { +.token.important { color: #f55073; }