Code snippet styling (#27)

* codeSnippet styling * improve code snippet highlight styles
impresso · Oct 15, 2024 · e3f33ba · e3f33ba
1 parent 710d120
commit e3f33ba
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/src/components/CodeSnippet.css b/src/components/CodeSnippet.css
@@ -5,6 +5,7 @@
 .CodeSnippet .cm-editor {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
+  /* box-shadow: none; */
 }
 
 .CodeSnippet button.copy-code {
@@ -13,11 +14,50 @@
   top: 1px;
   background: transparent;
   border: 0 none;
-  color: var(--impresso-color-yellow);
+  color: var(--impresso-color-black-rgba-50);
 }
 
 .CodeSnippet .btn {
   position: absolute;
   right: 0;
   bottom: 0.5rem;
 }
+
+.cm-line:not(span) {
+  color: #1e90d2;
+}
+.ͼ2 .cm-activeLine {
+  background-color: transparent !important;
+}
+.ͼ1.mc-focused {
+  outline: none;
+}
+
+.ͼ1.cm-focused {
+  outline: 1px solid rgba(var(--impresso-color-black-rgb), 0.2);
+}
+
+.ͼ1 .cm-activeLineGutter,
+.ͼ2 .cm-activeLineGutter {
+  background-color: transparent !important;
+}
+
+.cm-gutterElement {
+  position: relative;
+}
+
+.cm-gutterElement::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(var(--impresso-color-black-rgb), 0.08);
+  transform: translateX(100%);
+  transition: all 0.3s;
+}
+
+.cm-gutterElement.cm-activeLineGutter::after {
+  transform: translateX(0%);
+}
diff --git a/src/components/CodeSnippet.tsx b/src/components/CodeSnippet.tsx
@@ -4,6 +4,8 @@ import type { ReactCodeMirrorRef } from "@uiw/react-codemirror"
 import { duotoneDark } from "@uiw/codemirror-theme-duotone"
 import { python } from "@codemirror/lang-python"
 import { Copy, CheckCircle } from "iconoir-react"
+import { createTheme } from "@uiw/codemirror-themes"
+import { tags as t } from "@lezer/highlight"
 
 import "./CodeSnippet.css"
 
@@ -13,6 +15,38 @@ export interface CodeSnippetProps {
   basicSetup?: any
 }
 
+const myTheme = createTheme({
+  theme: "light",
+  settings: {
+    background: "#fff9f2",
+    backgroundImage: "",
+    foreground: "#75baff",
+    caret: "#5d00ff",
+    selection: "#036dd626",
+    selectionMatch: "#036dd626",
+    lineHighlight: "#8a91991a",
+    gutterBorder: "1px solid #ffffff10",
+    gutterBackground: "#fff9f2",
+    gutterForeground: "#8a919966",
+  },
+  styles: [
+    { tag: t.comment, color: "#6c9d7c" },
+    { tag: t.variableName, color: "#9c48bd" },
+    { tag: [t.string, t.special(t.brace)], color: "#5c6166" },
+    { tag: t.number, color: "#5c6166" },
+    { tag: t.bool, color: "#5c6166" },
+    { tag: t.null, color: "#5c6166" },
+    { tag: t.keyword, color: "#5c6166" },
+    { tag: t.operator, color: "#5c6166" },
+    { tag: t.className, color: "#5c6166" },
+    { tag: t.definition(t.typeName), color: "#5c6166" },
+    { tag: t.typeName, color: "#5c6166" },
+    { tag: t.angleBracket, color: "#5c6166" },
+    { tag: t.tagName, color: "#5c6166" },
+    { tag: t.attributeName, color: "#5c6166" },
+  ],
+})
+
 const CodeSnippet: React.FC<CodeSnippetProps> = ({
   value = "",
   readonly = false,
@@ -61,7 +95,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
       <ReactCodeMirror
         ref={codeMirrorRef}
         value={value}
-        theme={duotoneDark}
+        // theme={duotoneDark}
+        theme={myTheme}
         readOnly={readonly}
         basicSetup={basicSetup}
         extensions={[python(), EditorView.lineWrapping]}