Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
canifa_note
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Vũ Hoàng Anh
canifa_note
Commits
c522e145
Commit
c522e145
authored
Feb 01, 2024
by
Steven
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
chore: update codeblock style
parent
c342c464
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
13 additions
and
18 deletions
+13
-18
CodeBlock.tsx
web/src/components/MemoContent/CodeBlock.tsx
+13
-18
No files found.
web/src/components/MemoContent/CodeBlock.tsx
View file @
c522e145
import
{
IconButton
}
from
"@mui/joy"
;
import
classNames
from
"classnames"
;
import
copy
from
"copy-to-clipboard"
;
import
hljs
from
"highlight.js"
;
...
...
@@ -12,7 +11,7 @@ interface Props extends BaseProps {
}
const
CodeBlock
:
React
.
FC
<
Props
>
=
({
language
,
content
}:
Props
)
=>
{
const
formatedLanguage
=
(
language
||
""
).
toLowerCase
()
||
"
plain
text"
;
const
formatedLanguage
=
(
language
||
""
).
toLowerCase
()
||
"text"
;
let
highlightedCode
=
hljs
.
highlightAuto
(
content
).
value
;
// Users can set Markdown code blocks as `__html` to render HTML directly.
...
...
@@ -35,22 +34,18 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
};
return
(
<
pre
className=
"w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-700 whitespace-pre-wrap relative"
>
<
IconButton
size=
"sm"
className=
"!absolute top-0.5 right-0.5 opacity-50"
sx=
{
{
"--IconButton-size"
:
"24px"
,
}
}
onClick=
{
handleCopyButtonClick
}
>
<
Icon
.
Copy
className=
"w-4 h-auto"
/>
</
IconButton
>
<
code
className=
{
classNames
(
`language-${formatedLanguage}`
,
"block text-sm"
)
}
dangerouslySetInnerHTML=
{
{
__html
:
highlightedCode
}
}
></
code
>
</
pre
>
<
div
className=
"w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded overflow-clip hover:shadow dark:bg-zinc-600 dark:border-zinc-400"
>
<
div
className=
"w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400"
>
<
span
className=
"text-sm font-mono"
>
{
formatedLanguage
}
</
span
>
<
Icon
.
Copy
className=
"w-4 h-auto cursor-pointer hover:opacity-80"
onClick=
{
handleCopyButtonClick
}
/>
</
div
>
<
pre
className=
"w-full p-2 bg-amber-50 dark:bg-zinc-700 whitespace-pre-wrap relative"
>
<
code
className=
{
classNames
(
`language-${formatedLanguage}`
,
"block text-sm leading-5"
)
}
dangerouslySetInnerHTML=
{
{
__html
:
highlightedCode
}
}
></
code
>
</
pre
>
</
div
>
);
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment