This commit is contained in:
@@ -52,9 +52,7 @@ function BlogPost() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const copyCode = useCallback((code: string) => {
|
const copyCode = useCallback((code: string) => {
|
||||||
navigator.clipboard.writeText(code).then(() => {
|
navigator.clipboard.writeText(code);
|
||||||
// Можно добавить toast позже
|
|
||||||
});
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
@@ -118,14 +116,15 @@ function BlogPost() {
|
|||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
components={{
|
components={{
|
||||||
code({ node, inline, className, children, ...props }) {
|
code(props) {
|
||||||
|
const { children, className, ...rest } = props;
|
||||||
const match = /language-(\w+)/.exec(className || "");
|
const match = /language-(\w+)/.exec(className || "");
|
||||||
const language = match ? match[1] : "text";
|
const language = match ? match[1] : "text";
|
||||||
|
|
||||||
if (inline) {
|
if (!match) {
|
||||||
return (
|
return (
|
||||||
<code className="inline-code">
|
<code {...rest} className="inline-code">
|
||||||
{String(children).replace(/\n$/, "")}
|
{children}
|
||||||
</code>
|
</code>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -142,21 +141,17 @@ function BlogPost() {
|
|||||||
<span>Copy</span>
|
<span>Copy</span>
|
||||||
</button>
|
</button>
|
||||||
<SyntaxHighlighter
|
<SyntaxHighlighter
|
||||||
{...props}
|
style={theme}
|
||||||
style={{
|
|
||||||
...theme,
|
|
||||||
'pre[class*="language-"]': {
|
|
||||||
...theme['pre[class*="language-"]'],
|
|
||||||
background: "rgb(15, 15, 25) !important",
|
|
||||||
marginBottom: "0 !important",
|
|
||||||
borderRadius: "0 0 12px 12px !important",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
language={language}
|
language={language}
|
||||||
PreTag="div"
|
PreTag="div"
|
||||||
showLineNumbers
|
customStyle={{
|
||||||
wrapLines
|
background: "rgb(12, 12, 22)",
|
||||||
className="code-highlighter"
|
margin: 0,
|
||||||
|
padding: "1.75rem 1.5rem 1.5rem",
|
||||||
|
borderRadius: "0 0 12px 12px",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
lineHeight: "1.65",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{String(children).replace(/\n$/, "")}
|
{String(children).replace(/\n$/, "")}
|
||||||
</SyntaxHighlighter>
|
</SyntaxHighlighter>
|
||||||
@@ -198,6 +193,10 @@ function BlogPost() {
|
|||||||
padding-left: 1.5em;
|
padding-left: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blog-content li {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Inline код */
|
/* Inline код */
|
||||||
.inline-code {
|
.inline-code {
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
@@ -205,28 +204,28 @@ function BlogPost() {
|
|||||||
padding: 0.2em 0.4em !important;
|
padding: 0.2em 0.4em !important;
|
||||||
border-radius: 6px !important;
|
border-radius: 6px !important;
|
||||||
font-size: 0.875em !important;
|
font-size: 0.875em !important;
|
||||||
|
font-family: 'Commit_Mono', monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 🔥 КОНТЕЙНЕР КОДА */
|
/* Контейнер кода */
|
||||||
.code-container {
|
.code-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(145deg, rgb(10,10,20) 0%, rgb(20,20,35) 100%);
|
background: linear-gradient(145deg, rgb(8,8,18) 0%, rgb(18,18,32) 100%);
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ✨ АНИМИРОВАННАЯ КНОПКА COPY */
|
/* Анимированная кнопка */
|
||||||
.copy-button {
|
.copy-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
right: 14px;
|
right: 14px;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
background: linear-gradient(135deg, rgba(117,43,255,0.2) 0%, rgba(117,43,255,0.1) 100%);
|
background: linear-gradient(135deg, rgba(117,43,255,0.25) 0%, rgba(117,43,255,0.15) 100%);
|
||||||
border: 1px solid rgba(117,43,255,0.4);
|
border: 1px solid rgba(117,43,255,0.5);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -236,53 +235,30 @@ function BlogPost() {
|
|||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
font-family: 'Commit_Mono', monospace;
|
font-family: 'Commit_Mono', monospace;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
box-shadow: 0 4px 14px rgba(117,43,255,0.2);
|
box-shadow: 0 4px 16px rgba(117,43,255,0.25);
|
||||||
transform: translateY(0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-button:hover {
|
.copy-button:hover {
|
||||||
background: linear-gradient(135deg, hsl(270,73%,63%) 0%, hsl(270,73%,55%) 100%);
|
background: linear-gradient(135deg, hsl(270,73%,65%) 0%, hsl(270,73%,55%) 100%);
|
||||||
transform: translateY(-2px) scale(1.02);
|
transform: translateY(-3px) scale(1.03);
|
||||||
box-shadow: 0 8px 25px rgba(117,43,255,0.4);
|
box-shadow: 0 12px 30px rgba(117,43,255,0.45);
|
||||||
border-color: hsl(270,73%,70%);
|
border-color: hsl(270,73%,75%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-button:active {
|
.copy-button:active {
|
||||||
transform: translateY(0) scale(0.98);
|
transform: translateY(-1px) scale(0.98);
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-button span {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SyntaxHighlighter */
|
|
||||||
.code-highlighter {
|
|
||||||
margin: 0 !important;
|
|
||||||
border-radius: 0 0 12px 12px !important;
|
|
||||||
font-family: 'Commit_Mono', monospace !important;
|
|
||||||
font-size: 0.875rem !important;
|
|
||||||
line-height: 1.65 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-highlighter pre[class*="language-"] {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 1.75rem 1.5rem 1.5rem !important;
|
|
||||||
background: transparent !important;
|
|
||||||
border-radius: 0 0 12px 12px !important;
|
|
||||||
overflow-x: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Номера строк */
|
|
||||||
.code-highlighter .token-line {
|
|
||||||
padding-left: 1.25rem !important;
|
|
||||||
counter-increment: line;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Заголовки */
|
/* Заголовки */
|
||||||
.blog-content h1, .blog-content h2, .blog-content h3 {
|
.blog-content h1, .blog-content h2, .blog-content h3 {
|
||||||
color: hsl(270, 73%, 63%) !important;
|
color: hsl(270, 73%, 63%) !important;
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-content a {
|
||||||
|
color: hsl(270, 73%, 63%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@@ -292,7 +268,6 @@ function BlogPost() {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
.copy-button {
|
.copy-button {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user