mirror of
https://github.com/go-gitea/gitea
synced 2025-07-04 01:27:20 +00:00
markup: improve code block readability and isolate copy button (#34009)
Fix #33197 Improve the rendering of code blocks in markdown content for better readability and UI stability across screen sizes. Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
@ -1,8 +1,3 @@
|
||||
.markup .code-block,
|
||||
.markup .mermaid-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markup .code-copy {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
@ -28,8 +23,8 @@
|
||||
background: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
|
||||
.markup .code-block:hover .code-copy,
|
||||
.markup .mermaid-block:hover .code-copy {
|
||||
.markup .code-block-container:hover .code-copy,
|
||||
.markup .code-block:hover .code-copy {
|
||||
visibility: visible;
|
||||
animation: fadein 0.2s both;
|
||||
}
|
||||
|
@ -443,13 +443,25 @@
|
||||
}
|
||||
|
||||
.markup pre > code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.markup .code-block,
|
||||
.markup .code-block-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-wrap pre > code {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-scroll pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-scroll pre > code {
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.markup .highlight {
|
||||
@ -470,16 +482,11 @@
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markup pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markup pre code,
|
||||
.markup pre tt {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
Reference in New Issue
Block a user