Skip to content

Commit bfca5fb

Browse files
author
sangam14
committed
add
1 parent 291775b commit bfca5fb

File tree

4 files changed

+149
-75
lines changed

4 files changed

+149
-75
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
"typescriptreact": "javascript"
1111
},
1212
"editor.codeActionsOnSave": {
13-
"source.fixAll.eslint": true
13+
"source.fixAll.eslint": "explicit"
1414
}
1515
}

‎src/components/CodeBlock.tsx‎

Lines changed: 77 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ interface CodeBlockProps {
77
showLineNumbers?: boolean;
88
title?: string;
99
highlight?: string; // Line numbers to highlight e.g. "1,3-5"
10+
activeLine?: number; // Active line to highlight like in VSCode
1011
}
1112

1213
// Go keywords for syntax highlighting
@@ -41,7 +42,8 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
4142
className = '',
4243
showLineNumbers = true,
4344
title,
44-
highlight
45+
highlight,
46+
activeLine
4547
}) => {
4648
const [copied, setCopied] = useState(false);
4749

@@ -148,53 +150,62 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
148150
// Split code into lines for line numbers
149151
const lines = codeString.split('\n');
150152

153+
// File extension based on language
154+
const getFileExtension = () => {
155+
switch(language) {
156+
case 'go': return 'go';
157+
case 'js': return 'js';
158+
case 'jsx': return 'jsx';
159+
case 'ts': return 'ts';
160+
case 'tsx': return 'tsx';
161+
case 'html': return 'html';
162+
case 'css': return 'css';
163+
case 'json': return 'json';
164+
case 'yml':
165+
case 'yaml': return 'yml';
166+
case 'md': return 'md';
167+
case 'bash':
168+
case 'sh': return 'sh';
169+
default: return 'txt';
170+
}
171+
};
172+
173+
const fileName = title || `example.${getFileExtension()}`;
174+
151175
return (
152-
<div className="relative my-8 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-md">
153-
{/* Header with language and title */}
154-
<div className="flex items-center justify-between bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2">
155-
<div className="flex items-center">
156-
<CodeBracketIcon className="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
157-
{title ? (
158-
<span className="text-gray-700 dark:text-gray-300 font-medium">{title}</span>
159-
) : (
160-
language && <span className="text-gray-700 dark:text-gray-300 font-mono text-sm">{language}</span>
161-
)}
176+
<div className="code-block-wrapper">
177+
{/* VSCode editor tabs */}
178+
<div className="editor-tabs">
179+
<div className="editor-tab active">
180+
<span>{fileName}</span>
162181
</div>
163-
164-
{/* Copy button */}
165-
<button
166-
onClick={copyToClipboard}
167-
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm transition-colors flex items-center gap-1"
168-
aria-label="Copy code"
169-
>
170-
{copied ? (
171-
<>
172-
<CheckIcon className="w-4 h-4 text-green-500" />
173-
<span>Copied!</span>
174-
</>
175-
) : (
176-
<>
177-
<ClipboardIcon className="w-4 h-4" />
178-
<span>Copy</span>
179-
</>
180-
)}
181-
</button>
182182
</div>
183183

184-
{/* Code block with optional line numbers */}
185-
<div className="overflow-x-auto bg-gray-50 dark:bg-gray-900">
186-
<div className="min-w-full p-4 font-mono text-sm">
187-
{lines.map((line, i) => (
188-
<div
189-
key={i}
190-
className={`flex ${highlightedLines.has(i + 1) ? 'bg-yellow-50 dark:bg-yellow-900/20' : ''}`}
191-
>
192-
{showLineNumbers && (
193-
<div className="text-gray-400 dark:text-gray-600 text-right select-none w-8 mr-4 flex-shrink-0">
194-
{i + 1}
195-
</div>
196-
)}
197-
<div className="flex-grow overflow-x-auto">
184+
{/* Code container */}
185+
<div className="flex bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto">
186+
{/* Line numbers */}
187+
{showLineNumbers && (
188+
<div className="line-numbers-rows">
189+
{lines.map((_, i) => (
190+
<span key={i}></span>
191+
))}
192+
</div>
193+
)}
194+
195+
{/* Code content */}
196+
<pre className="flex-1 m-0 p-4 overflow-x-auto bg-[#1e1e1e] border-l-0">
197+
<div>
198+
{lines.map((line, i) => (
199+
<div
200+
key={i}
201+
className={`${
202+
activeLine === i + 1
203+
? 'active-line'
204+
: highlightedLines.has(i + 1)
205+
? 'code-highlight'
206+
: ''
207+
}`}
208+
>
198209
{isGo ? (
199210
<code dangerouslySetInnerHTML={{
200211
__html: highlightGoSyntax(line || '\u00A0')
@@ -203,10 +214,29 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
203214
<code>{line || '\u00A0'}</code>
204215
)}
205216
</div>
206-
</div>
207-
))}
208-
</div>
217+
))}
218+
</div>
219+
</pre>
209220
</div>
221+
222+
{/* Copy button */}
223+
<button
224+
onClick={copyToClipboard}
225+
className="copy-button"
226+
aria-label="Copy code"
227+
>
228+
{copied ? (
229+
<>
230+
<CheckIcon className="w-4 h-4" />
231+
<span>Copied!</span>
232+
</>
233+
) : (
234+
<>
235+
<ClipboardIcon className="w-4 h-4" />
236+
<span>Copy</span>
237+
</>
238+
)}
239+
</button>
210240
</div>
211241
);
212242
};

‎src/styles/mdx.css‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@
1010

1111
/* Code syntax highlighting */
1212
.mdx-content pre {
13-
@apply bg-gray-50 dark:bg-gray-900 rounded-lg overflow-hidden;
13+
@apply rounded-lg overflow-hidden;
14+
background-color: #1e1e1e; /* VSCode dark background */
15+
border: 1px solid #323232; /* VSCode border */
1416
}
1517

1618
.mdx-content code {
1719
@apply font-mono text-sm;
20+
color: #d4d4d4; /* VSCode default text color */
1821
}
1922

2023
/* Table styles */
@@ -44,15 +47,17 @@
4447
}
4548

4649
.mdx-content pre::-webkit-scrollbar-track {
47-
@apply bg-gray-100 dark:bg-gray-800 rounded-full;
50+
background: #1e1e1e;
51+
border-radius: 4px;
4852
}
4953

5054
.mdx-content pre::-webkit-scrollbar-thumb {
51-
@apply bg-gray-300 dark:bg-gray-600 rounded-full;
55+
background: #505050;
56+
border-radius: 4px;
5257
}
5358

5459
.mdx-content pre::-webkit-scrollbar-thumb:hover {
55-
@apply bg-gray-400 dark:bg-gray-500;
60+
background: #676767;
5661
}
5762

5863
/* Content transitions */
@@ -104,7 +109,7 @@
104109
}
105110

106111
.dark .language-go {
107-
background-color: #1e1e1e;
112+
background-color: #1e1e1e; /* VSCode dark background */
108113
}
109114

110115
/* Keywords (func, var, const, etc) */

‎styles/globals.css‎

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -103,29 +103,26 @@ body {
103103

104104
/* VS Code-like syntax highlighting */
105105
pre {
106-
background-color: #1e1e1e; /* VS Code dark theme background */
107-
border-radius: 0.375rem;
106+
background-color: #1e1e1e; /* VSCode dark background */
108107
padding: 1rem;
109-
overflow-x: auto;
110108
margin: 1.25rem 0;
111-
border: 1px solid #323232;
109+
border: 1px solid #323232; /* VSCode dark border */
110+
border-radius: 0.375rem;
112111
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
113112
scrollbar-width: thin;
114113
scrollbar-color: #505050 #1e1e1e;
115114
position: relative;
116-
font-size: 14px;
117-
line-height: 1.6;
115+
overflow-x: auto;
118116
}
119117

120-
/* Custom scrollbar for WebKit browsers */
121118
pre::-webkit-scrollbar {
122-
height: 8px;
123119
width: 8px;
120+
height: 8px;
124121
}
125122

126123
pre::-webkit-scrollbar-track {
127124
background: #1e1e1e;
128-
border-radius: 0.375rem;
125+
border-radius: 4px;
129126
}
130127

131128
pre::-webkit-scrollbar-thumb {
@@ -138,10 +135,12 @@ pre::-webkit-scrollbar-thumb:hover {
138135
}
139136

140137
pre code {
141-
font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace; /* Better monospace fonts */
138+
font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace;
142139
font-size: 14px;
143140
line-height: 1.6;
144-
color: #d4d4d4; /* VS Code default text color */
141+
color: #d4d4d4; /* VSCode default text color */
142+
-moz-tab-size: 2;
143+
-o-tab-size: 2;
145144
tab-size: 2;
146145
padding: 0;
147146
background-color: transparent !important;
@@ -153,14 +152,15 @@ pre code {
153152
float: left;
154153
}
155154

156-
/* Code block container */
157155
.code-block-wrapper {
158156
position: relative;
159157
margin: 1.75rem 0;
160158
border-radius: 0.375rem;
161159
overflow: hidden;
162160
opacity: 0;
163161
animation: fade-in 0.5s ease-out forwards;
162+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
163+
border: 1px solid #323232; /* VSCode-like border */
164164
}
165165

166166
/* Language tab styling */
@@ -207,24 +207,25 @@ pre code {
207207
user-select: none;
208208
text-align: right;
209209
counter-reset: linenumber;
210-
background-color: #252526;
211-
border-right: 1px solid #404040;
212-
padding: 1rem 0.5rem 1rem 0.5rem;
213-
margin-right: 0.75rem;
214-
color: #858585;
210+
background-color: #1e1e1e;
211+
color: #858585; /* VSCode line number color */
212+
padding: 1rem 0.5rem;
213+
border-right: 1px solid #3e3e42; /* VSCode gutter divider */
214+
min-width: 3.5rem;
215215
font-size: 14px;
216216
line-height: 1.6;
217217
font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, Monaco, monospace;
218-
min-width: 30px;
219-
display: flex;
220-
flex-direction: column;
221218
}
222219

223220
.line-numbers-rows span {
221+
display: block;
224222
counter-increment: linenumber;
223+
padding-right: 0.8rem;
224+
}
225+
226+
.line-numbers-rows span::before {
227+
content: counter(linenumber);
225228
display: block;
226-
position: relative;
227-
padding-right: 0.5rem;
228229
}
229230

230231
.code-with-line-numbers pre {
@@ -953,3 +954,41 @@ code {
953954
.dark .language-go .operator {
954955
color: #79c0ff;
955956
}
957+
958+
/* VSCode active line highlight */
959+
.active-line {
960+
background-color: #282828; /* VSCode active line background */
961+
display: block;
962+
margin: 0 -1rem;
963+
padding: 0 1rem;
964+
border-left: 2px solid #007acc; /* VSCode active line indicator */
965+
}
966+
967+
/* VSCode selection highlight */
968+
.code-selection {
969+
background-color: rgba(0, 122, 204, 0.3); /* VSCode selection color */
970+
}
971+
972+
/* VSCode editor tabs styling */
973+
.editor-tabs {
974+
display: flex;
975+
background-color: #252526; /* VSCode tab bar background */
976+
border-bottom: 1px solid #3e3e42;
977+
overflow-x: auto;
978+
scrollbar-width: thin;
979+
}
980+
981+
.editor-tab {
982+
padding: 8px 16px;
983+
font-size: 13px;
984+
color: #969696;
985+
border-right: 1px solid #3e3e42;
986+
white-space: nowrap;
987+
}
988+
989+
.editor-tab.active {
990+
background-color: #1e1e1e;
991+
color: #ffffff;
992+
border-top: 1px solid #007acc;
993+
padding-top: 7px;
994+
}

0 commit comments

Comments
 (0)