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