Skip to content

Commit e843113

Browse files
wxiaoguangwxiaoguang
committed
fix
1 parent f61cb3c commit e843113

File tree

5 files changed

+95
-28
lines changed

5 files changed

+95
-28
lines changed

‎modules/markup/markdown/markdown.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
8686
preClasses += " is-loading"
8787
}
8888

89-
err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<div class="code-wrapper"><pre class="%s">`, preClasses)
89+
err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<div class="code-block-container code-overflow-scroll"><pre class="%s">`, preClasses)
9090
if err != nil {
9191
return
9292
}

‎templates/devtest/markup-render.tmpl

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{{template "devtest/devtest-header"}}
2+
<div class="page-content devtest ui container">
3+
{{$longCode := "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"}}
4+
<div class="tw-flex">
5+
<div class="tw-w-[50%] tw-p-4">
6+
<div class="markup render-content">
7+
Inline <code>code</code> content
8+
</div>
9+
10+
<div class="divider"></div>
11+
12+
<div class="markup render-content">
13+
<p>content before</p>
14+
<pre><code>Very long line with no code block or container: {{$longCode}}</code></pre>
15+
<p>content after</p>
16+
</div>
17+
18+
<div class="divider"></div>
19+
20+
<div class="markup render-content">
21+
<p>content before</p>
22+
<div class="code-block-container code-overflow-wrap">
23+
<pre class="code-block"><code>Very long line with wrap: {{$longCode}}</code></pre>
24+
</div>
25+
<p>content after</p>
26+
</div>
27+
28+
<div class="divider"></div>
29+
30+
<div class="markup render-content">
31+
<p>content before</p>
32+
<div class="code-block-container code-overflow-scroll">
33+
<pre class="code-block"><code>Short line in scroll container</code></pre>
34+
</div>
35+
<div class="code-block-container code-overflow-scroll">
36+
<pre class="code-block"><code>Very long line with scroll: {{$longCode}}</code></pre>
37+
</div>
38+
<p>content after</p>
39+
</div>
40+
</div>
41+
42+
<div class="tw-w-[50%] tw-p-4">
43+
<div class="markup render-content">
44+
<p>content before</p>
45+
<div class="code-block-container">
46+
<pre class="code-block"><code class="language-math">
47+
\lim\limits_{n\rightarrow\infty}{\left(1+\frac{1}{n}\right)^n}
48+
</code></pre>
49+
</div>
50+
<p>content after</p>
51+
</div>
52+
53+
<div class="divider"></div>
54+
55+
<div class="markup render-content">
56+
<p>content before</p>
57+
<div class="code-block-container">
58+
<pre class="code-block"><code class="language-mermaid is-loading">
59+
graph LR
60+
A[Square Rect] -- Link text --> B((Circle))
61+
A --> C(Round Rect)
62+
B --> D{Rhombus}
63+
C --> D
64+
</code></pre>
65+
</div>
66+
<p>content after</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
{{template "devtest/devtest-footer"}}

‎web_src/css/markup/codecopy.css

+2-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
.markup .code-wrapper,
2-
.markup .mermaid-block {
3-
position: relative;
4-
}
5-
6-
.code-wrapper {
7-
background-color: var(--color-markup-code-block);
8-
border-radius: var(--border-radius);
9-
}
10-
11-
.code-block {
12-
margin-right: 56px;
13-
}
14-
151
.markup .code-copy {
162
position: absolute;
173
top: 8px;
@@ -37,8 +23,8 @@
3723
background: var(--color-secondary-dark-1) !important;
3824
}
3925

40-
.markup .code-wrapper:hover .code-copy,
41-
.markup .mermaid-block:hover .code-copy {
26+
.markup .code-block-container:hover .code-copy,
27+
.markup .code-block:hover .code-copy {
4228
visibility: visible;
4329
animation: fadein 0.2s both;
4430
}

‎web_src/css/markup/content.css

+19-10
Original file line numberDiff line numberDiff line change
@@ -443,13 +443,25 @@
443443
}
444444

445445
.markup pre > code {
446-
padding: 0;
447-
margin: 0;
448446
font-size: 100%;
447+
}
448+
449+
.markup .code-block,
450+
.markup .code-block-container {
451+
position: relative;
452+
}
453+
454+
.markup .code-block-container.code-overflow-wrap pre > code {
449455
white-space: pre-wrap;
450-
overflow-wrap: anywhere;
451-
background: transparent;
452-
border: 0;
456+
}
457+
458+
.markup .code-block-container.code-overflow-scroll pre {
459+
overflow-x: auto;
460+
}
461+
462+
.markup .code-block-container.code-overflow-scroll pre > code {
463+
white-space: pre-wrap;
464+
overflow-wrap: normal;
453465
}
454466

455467
.markup .highlight {
@@ -461,23 +473,20 @@
461473
padding: 16px;
462474
font-size: 85%;
463475
line-height: 1.45;
476+
background-color: var(--color-markup-code-block);
477+
border-radius: var(--border-radius);
464478
}
465479

466480
.markup .highlight pre {
467481
margin-bottom: 0;
468482
word-break: normal;
469483
}
470484

471-
.markup pre {
472-
word-wrap: normal;
473-
}
474-
475485
.markup pre code,
476486
.markup pre tt {
477487
display: inline;
478488
padding: 0;
479489
line-height: inherit;
480-
word-wrap: normal;
481490
background-color: transparent;
482491
border: 0;
483492
}

‎web_src/js/markup/codecopy.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
1515
const btn = makeCodeCopyButton();
1616
// remove final trailing newline introduced during HTML rendering
1717
btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
18-
el.after(btn);
18+
const btnContainer = el.closest('.code-block-container') ?? el.closest('.code-block');
19+
btnContainer.append(btn);
1920
});
2021
}

0 commit comments

Comments
 (0)