diff --git a/assets/copyicon.svg b/assets/copyicon.svg
new file mode 100644
index 0000000..233c66f
--- /dev/null
+++ b/assets/copyicon.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/index.html b/index.html
index b10bcb0..5f72716 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
diff --git a/package.json b/package.json
index d4bb019..3466bbc 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"react-router-dom": "^7.5.0",
"react-scripts": "^5.0.1",
"react-scroll": "^1.9.3",
+ "react-syntax-highlighter": "^16.1.0",
"react-turnstile": "^1.1.4",
"sass": "^1.86.3",
"simplebar": "^6.3.2",
diff --git a/src/components/CodeBlock.jsx b/src/components/CodeBlock.jsx
new file mode 100644
index 0000000..9460a61
--- /dev/null
+++ b/src/components/CodeBlock.jsx
@@ -0,0 +1,244 @@
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useTheme } from "../contexts/ThemeContext";
+import { useMemo, useState } from "react";
+import CopyIcon from "../icons/CopyIcon";
+import CheckIcon from "../icons/CheckIcon";
+
+// Helper function to parse hex color to RGB
+const hexToRgb = (hex) => {
+ const cleanHex = hex.replace("#", "");
+ return {
+ r: parseInt(cleanHex.slice(0, 2), 16),
+ g: parseInt(cleanHex.slice(2, 4), 16),
+ b: parseInt(cleanHex.slice(4, 6), 16),
+ };
+};
+
+// Helper function to blend two colors
+const blendColors = (color1, color2, ratio) => {
+ const rgb1 = hexToRgb(color1);
+ const rgb2 = hexToRgb(color2);
+ const r = Math.round(rgb1.r * ratio + rgb2.r * (1 - ratio));
+ const g = Math.round(rgb1.g * ratio + rgb2.g * (1 - ratio));
+ const b = Math.round(rgb1.b * ratio + rgb2.b * (1 - ratio));
+ return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+};
+
+// Helper function to create a custom theme based on app theme colors
+const createCustomTheme = (backgroundColor, textColor) => {
+ // Determine if theme is dark or light based on background color brightness
+ const bgRgb = hexToRgb(backgroundColor);
+ const brightness = (bgRgb.r * 299 + bgRgb.g * 587 + bgRgb.b * 114) / 1000;
+ const isDark = brightness < 128;
+
+ // Base colors
+ const bg = backgroundColor;
+ const fg = textColor;
+
+ // Create color variations by blending foreground and background
+ // For dark themes: use brighter accents
+ // For light themes: use darker accents
+ const accent1 = isDark ? blendColors(fg, bg, 0.8) : blendColors(fg, bg, 0.6);
+ const accent2 = isDark ? blendColors(fg, bg, 0.6) : blendColors(fg, bg, 0.4);
+
+ // Syntax highlighting colors
+ // Strings: slightly warmer tone
+ const stringColor = isDark ? "#f1fa8c" : "#8b6914";
+ // Keywords: slightly cooler tone
+ const keywordColor = isDark ? "#bd93f9" : "#6b46c1";
+ // Comments: muted
+ const commentColor = isDark ? "#6272a4" : "#6b7280";
+ // Numbers: accent color
+ const numberColor = isDark ? "#ff79c6" : "#c026d3";
+ // Functions: primary text color
+ const functionColor = isDark ? "#50fa7b" : "#059669";
+ // Operators: accent
+ const operatorColor = fg;
+
+ return {
+ 'code[class*="language-"]': {
+ color: fg,
+ background: bg,
+ textShadow: "none",
+ },
+ 'pre[class*="language-"]': {
+ color: fg,
+ background: bg,
+ textShadow: "none",
+ },
+ comment: {
+ color: commentColor,
+ fontStyle: "italic",
+ },
+ prolog: {
+ color: commentColor,
+ },
+ doctype: {
+ color: commentColor,
+ },
+ cdata: {
+ color: commentColor,
+ },
+ punctuation: {
+ color: accent2,
+ },
+ property: {
+ color: keywordColor,
+ },
+ tag: {
+ color: keywordColor,
+ },
+ boolean: {
+ color: keywordColor,
+ },
+ number: {
+ color: numberColor,
+ },
+ constant: {
+ color: numberColor,
+ },
+ symbol: {
+ color: numberColor,
+ },
+ deleted: {
+ color: numberColor,
+ },
+ selector: {
+ color: functionColor,
+ },
+ "attr-name": {
+ color: functionColor,
+ },
+ string: {
+ color: stringColor,
+ },
+ char: {
+ color: stringColor,
+ },
+ builtin: {
+ color: stringColor,
+ },
+ inserted: {
+ color: stringColor,
+ },
+ operator: {
+ color: operatorColor,
+ },
+ entity: {
+ color: accent1,
+ cursor: "help",
+ },
+ url: {
+ color: accent1,
+ },
+ ".language-css .token.string": {
+ color: accent1,
+ },
+ ".style .token.string": {
+ color: accent1,
+ },
+ variable: {
+ color: accent1,
+ },
+ atrule: {
+ color: keywordColor,
+ },
+ "attr-value": {
+ color: stringColor,
+ },
+ function: {
+ color: functionColor,
+ },
+ "class-name": {
+ color: functionColor,
+ },
+ keyword: {
+ color: keywordColor,
+ },
+ regex: {
+ color: stringColor,
+ },
+ important: {
+ color: keywordColor,
+ fontWeight: "bold",
+ },
+ bold: {
+ fontWeight: "bold",
+ },
+ italic: {
+ fontStyle: "italic",
+ },
+ };
+};
+
+export default function CodeBlock({ code, language }) {
+ const { theme } = useTheme();
+
+ // Create custom theme based on app theme
+ const customTheme = useMemo(() => {
+ const bg = theme?.backgroundColor || "#ffffff";
+ const text = theme?.textColor || "#000000";
+ return createCustomTheme(bg, text);
+ }, [theme?.backgroundColor, theme?.textColor]);
+
+ // Determine line number color based on theme
+ const lineNumberColor = useMemo(() => {
+ if (!theme?.backgroundColor || !theme?.textColor) {
+ return "#6272a4";
+ }
+ const bgRgb = hexToRgb(theme.backgroundColor);
+ const brightness = (bgRgb.r * 299 + bgRgb.g * 587 + bgRgb.b * 114) / 1000;
+ const isDark = brightness < 128;
+ // Use a muted version of the text color for line numbers
+ return isDark
+ ? blendColors(theme.textColor, theme.backgroundColor, 0.4)
+ : blendColors(theme.textColor, theme.backgroundColor, 0.3);
+ }, [theme?.backgroundColor, theme?.textColor]);
+
+ const [isCopied, setIsCopied] = useState(false);
+ const handleCopy = () => {
+ navigator.clipboard.writeText(code);
+ setIsCopied(true);
+ setTimeout(() => {
+ setIsCopied(false);
+ }, 2000);
+ };
+
+ return (
+
+
+
+
+ {code}
+
+