Render embedded code preview by permlink in markdown (#30234)

The permlink in markdown will be rendered as a code preview block, like GitHub

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-04-03 01:48:27 +08:00 committed by GitHub
parent eb505b128c
commit ca5c895efb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 450 additions and 21 deletions

View file

@ -0,0 +1,36 @@
.markup .code-preview-container {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
margin: 0.25em 0;
}
.markup .code-preview-container .code-preview-header {
border-bottom: 1px solid var(--color-secondary);
padding: 0.5em;
font-size: 12px;
}
.markup .code-preview-container table {
width: 100%;
max-height: 100px;
overflow-y: auto;
margin: 0; /* override ".markup table {margin}" */
}
/* workaround to hide empty p before container - more details are in "html_codepreview.go" */
.markup p:empty:has(+ .code-preview-container) {
display: none;
}
/* override the polluted styles from the content.css: ".markup table ..." */
.markup .code-preview-container table tr {
border: 0 !important;
}
.markup .code-preview-container table th,
.markup .code-preview-container table td {
border: 0 !important;
padding: 0 0 0 5px !important;
}
.markup .code-preview-container table tr:nth-child(2n) {
background: none !important;
}

View file

@ -382,7 +382,7 @@
text-align: center;
}
.markup span.align-center span img
.markup span.align-center span img,
.markup span.align-center span video {
margin: 0 auto;
text-align: center;
@ -432,7 +432,7 @@
text-align: right;
}
.markup code,
.markup code:not(.code-inner),
.markup tt {
padding: 0.2em 0.4em;
margin: 0;