From aeb4deec445c82b57c78dde04d1cd900452559f0 Mon Sep 17 00:00:00 2001 From: Arjun Aditya Date: Sun, 16 Mar 2025 14:13:17 +0530 Subject: [PATCH 1/4] chore: assign highlighting to codeblock --- apps/docs/docusaurus.config.js | 165 ++++++++++++++++++++++++ apps/docs/src/css/custom.css | 21 +++ apps/docs/src/theme/CodeBlock/index.tsx | 2 +- 3 files changed, 187 insertions(+), 1 deletion(-) diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js index 9362be653..0c8f89c98 100644 --- a/apps/docs/docusaurus.config.js +++ b/apps/docs/docusaurus.config.js @@ -118,7 +118,172 @@ const config = { plain: { ...prismThemes.vsDark.plain, backgroundColor: "#111827", + color: "#e6e6e6", }, + styles: [ + ...prismThemes.vsDark.styles, + { + types: ["comment", "prolog", "doctype", "cdata"], + style: { + color: "#6a9955", + fontStyle: "italic", + }, + }, + { + types: ["namespace"], + style: { + opacity: 0.7, + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#ce9178", + }, + }, + { + types: ["punctuation", "operator"], + style: { + color: "#d4d4d4", + }, + }, + { + types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"], + style: { + color: "#b5cea8", + }, + }, + { + types: ["atrule", "keyword", "attr-name", "selector"], + style: { + color: "#569cd6", + }, + }, + { + types: ["function", "deleted", "tag"], + style: { + color: "#f44747", + }, + }, + { + types: ["function-variable"], + style: { + color: "#dcdcaa", + }, + }, + { + types: ["tag", "selector", "keyword"], + style: { + color: "#569cd6", + }, + }, + { + types: ["important", "bold"], + style: { + // fontWeight: "bold", + }, + }, + { + types: ["italic"], + style: { + fontStyle: "italic", + }, + }, + { + types: ["key", "property"], + languages: ["yaml", "yml"], + style: { + color: "#9cdcfe", + }, + }, + { + types: ["string"], + languages: ["yaml", "yml"], + style: { + color: "#ce9178", + }, + }, + { + types: ["number"], + languages: ["yaml", "yml"], + style: { + color: "#C5DDB8", + }, + }, + { + types: ["function", "builtin"], + languages: ["bash", "shell", "sh"], + style: { + color: "#569CD6", // Light blue for commands + }, + }, + { + types: ["command", "builtin"], + languages: ["bash", "shell", "sh"], + style: { + color: "#569CD6", // Light blue for commands + fontWeight: "bold", + }, + }, + { + types: ["option", "parameter"], + languages: ["bash", "shell", "sh"], + style: { + color: "#eac787", // Yellowish for parameters + }, + }, + { + types: ["keyword", "selector"], + languages: ["bash", "shell", "sh"], + style: { + color: "#81a1c1", // Blue for keywords like if, then, else + }, + }, + { + types: ["string", "char", "attr-value"], + languages: ["bash", "shell", "sh"], + style: { + color: "#a3be8c", // Green for strings + }, + }, + { + types: ["variable"], + languages: ["bash", "shell", "sh"], + style: { + color: "#d8dee9", // Light gray for variables + }, + }, + { + types: ["comment"], + languages: ["bash", "shell", "sh"], + style: { + color: "#616e88", // Gray for comments + fontStyle: "italic", + }, + }, + { + types: ["shebang"], + languages: ["bash", "shell", "sh"], + style: { + color: "#8fbcbb", // Cyan for shebang + fontWeight: "bold", + }, + }, + { + types: ["operator"], + languages: ["bash", "shell", "sh"], + style: { + color: "#81a1c1", // Blue for operators + }, + }, + { + types: ["punctuation"], + languages: ["bash", "shell", "sh"], + style: { + color: "#eceff4", // White for punctuation + }, + }, + ], }, }, zoom: { diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css index 27b5ef4e4..6ec56d1a7 100644 --- a/apps/docs/src/css/custom.css +++ b/apps/docs/src/css/custom.css @@ -134,6 +134,27 @@ .btn-clear { @apply bg-transparent shadow-none border-0 outline-none cursor-pointer; } + + .code-wrapper { + @apply rounded; + } + + /* Add text selection styling */ + .code-wrapper pre code::selection, + .code-wrapper pre span::selection, + .code-wrapper pre::selection { + background-color: rgba(66, 153, 225, 0.5) !important; /* sky-blue with transparency */ + color: white !important; + } + + .code-wrapper .selection\:bg-sky-700.selection\:text-green-400 pre code { + @apply select-auto; + } + + /* Add better styling for code blocks */ + .theme-code-block { + @apply rounded overflow-hidden; + } } :root { diff --git a/apps/docs/src/theme/CodeBlock/index.tsx b/apps/docs/src/theme/CodeBlock/index.tsx index a44fcc51e..092d72aec 100644 --- a/apps/docs/src/theme/CodeBlock/index.tsx +++ b/apps/docs/src/theme/CodeBlock/index.tsx @@ -68,7 +68,7 @@ export default function CodeBlock({ }; return ( -
+
{(title || badge.label) && (
{title} From 3223e775e9b431fb560cf39aa8d764e32e7a265b Mon Sep 17 00:00:00 2001 From: Arjun Aditya Date: Sun, 16 Mar 2025 14:31:39 +0530 Subject: [PATCH 2/4] Update docusaurus.config.js --- apps/docs/docusaurus.config.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js index 0c8f89c98..616c13ae1 100644 --- a/apps/docs/docusaurus.config.js +++ b/apps/docs/docusaurus.config.js @@ -114,12 +114,6 @@ const config = { ], plugins: ["line-numbers", "show-language"], theme: { - ...prismThemes.vsDark, - plain: { - ...prismThemes.vsDark.plain, - backgroundColor: "#111827", - color: "#e6e6e6", - }, styles: [ ...prismThemes.vsDark.styles, { From b1f20e4973e9a5333687c68fde4e0c4fb7161595 Mon Sep 17 00:00:00 2001 From: Arjun Aditya Date: Sun, 16 Mar 2025 14:32:23 +0530 Subject: [PATCH 3/4] Update docusaurus.config.js --- apps/docs/docusaurus.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js index 616c13ae1..e04432339 100644 --- a/apps/docs/docusaurus.config.js +++ b/apps/docs/docusaurus.config.js @@ -114,6 +114,7 @@ const config = { ], plugins: ["line-numbers", "show-language"], theme: { + ...prismThemes.vsDark, styles: [ ...prismThemes.vsDark.styles, { From ee6b20aa2d9b017275107bc9127419e657083e38 Mon Sep 17 00:00:00 2001 From: Arjun Aditya Date: Sun, 16 Mar 2025 14:48:59 +0530 Subject: [PATCH 4/4] Update docusaurus.config.js --- apps/docs/docusaurus.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js index e04432339..0c8f89c98 100644 --- a/apps/docs/docusaurus.config.js +++ b/apps/docs/docusaurus.config.js @@ -115,6 +115,11 @@ const config = { plugins: ["line-numbers", "show-language"], theme: { ...prismThemes.vsDark, + plain: { + ...prismThemes.vsDark.plain, + backgroundColor: "#111827", + color: "#e6e6e6", + }, styles: [ ...prismThemes.vsDark.styles, {