Change CSS class names and refactor highlight style

david-yz-liu · Nov 6, 2024 · 5307e1a · 5307e1a
1 parent 57c8a3d
commit 5307e1a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/webstepper/src/CodeDisplay.tsx b/webstepper/src/CodeDisplay.tsx
@@ -11,14 +11,8 @@ type CodeDisplayPropTypes = {
 };
 
 export default function CodeDisplay(props: CodeDisplayPropTypes) {
-    const lineClass = (lineNumber: number) => {
-        if (lineNumber == props.highlightLine) {
-            return "HighlightedLine";
-        }
-    };
-
     return (
-        <Box className="CodeBox">
+        <Box className="code-box">
             <SyntaxHighlighter
                 data-testid="code-box"
                 language="python"
@@ -28,9 +22,11 @@ export default function CodeDisplay(props: CodeDisplayPropTypes) {
                 wrapLongLines={true}
                 style={a11yLight}
                 customStyle={{ backgroundColor: "transparent" }}
-                lineProps={(lineNumber) => ({
-                    className: lineClass(lineNumber),
-                })}
+                lineProps={(lineNumber: number) => {
+                    if (lineNumber == props.highlightLine) {
+                        return { className: "line-highlighted" };
+                    }
+                }}
             >
                 {props.text}
             </SyntaxHighlighter>

diff --git a/webstepper/src/css/styles.css b/webstepper/src/css/styles.css
@@ -1,10 +1,10 @@
-.CodeBox {
+.code-box {
     width: 100%;
     height: 100%;
     background-color: white;
 }
 
-.HighlightedLine {
+.line-highlighted {
     background-color: yellow;
 }