Skip to content

Commit 8407ef2

Browse files
lamATnginxnginx-jack
lamATnginx
authored and
nginx-jack
committed
Codeblock: Add styling to base codeblock
1 parent db1d92e commit 8407ef2

File tree

6 files changed

+155
-128
lines changed

6 files changed

+155
-128
lines changed

‎assets/css/v2/style.css‎

Lines changed: 63 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
--color-tabs-divider: #00000033;
2626
--color-codeblock-code-with-comment: #00963926;
2727

28+
--code-copy-icon-height: 1rem;
29+
--code-copy-icon-width: 1rem;
2830
--sidebar-margin: 24px;
2931
--sidebar-line-box-side-length: 8px;
3032
--sidebar-line-box-top: 6px;
@@ -988,140 +990,83 @@ blockquote.side-callout {
988990

989991
/* Codeblocks */
990992
.highlight {
993+
padding: 0 1rem 0 1rem;
991994
position: relative;
992995
z-index: -1;
996+
flex: 1;
993997

994998
code .cl {
995999
position: relative;
996-
width: 100%;
997-
white-space: pre-wrap;
9981000
}
9991001
}
10001002

1001-
.highlight-mf {
1002-
grid-column: 1 / -1 !important;
1003-
position: relative;
1004-
margin-left: 0;
1005-
z-index: -1;
1006-
width: calc(100% + var(--overflow-gutter-extension));
1007-
1008-
&:has(.comment) {
1009-
margin-left: calc(var(--overflow-gutter-extension) / -1);
1010-
}
1011-
1012-
code {
1013-
font-weight: light;
1014-
font-family: "JetBrains Mono", monospace;
1015-
display: flex;
1016-
flex-direction: column;
1017-
}
1018-
1019-
pre.chroma {
1020-
overflow-x: auto;
1021-
box-sizing: border-box;
1022-
}
1003+
.code-block {
1004+
grid-column: 1;
1005+
}
10231006

1024-
code .line {
1025-
position: relative;
1026-
display: grid;
1027-
grid-template-columns: 1fr 1fr;
1028-
grid-template-areas:
1029-
" code "
1030-
" comment ";
1031-
}
1007+
.icon-code-copy {
1008+
background-color: #f2f2f2;
1009+
border: none;
1010+
padding: 5px 10px;
1011+
cursor: pointer;
1012+
font-family: "JetBrains Mono", monospace;
1013+
font-size: 12px;
1014+
color: #000;
1015+
}
10321016

1033-
code .line:has(.comment) .code {
1034-
display: inline-block;
1035-
height: fit-content;
1036-
white-space: pre-wrap;
1037-
width: 100%;
1038-
background-color: var(--color-codeblock-code-with-comment);
1039-
margin: var(--codeblock-comment-space-between) 0;
1040-
position: relative;
1041-
grid-column: 1 / -1;
1042-
}
1017+
.highlight-v2 {
1018+
padding: 0 1rem 0 0;
1019+
margin: 0 -1rem 1rem -1rem;
1020+
border-top: 1px solid #cccccc;
1021+
border-bottom: 1px solid #cccccc;
1022+
overflow-x: scroll;
1023+
}
10431024

1044-
code .line:not(:has(.comment)) .code {
1045-
grid-column: 1 / -1;
1046-
grid-row: 1;
1047-
}
1025+
.highlight-v2.single-line {
1026+
display: flex;
1027+
align-items: center;
1028+
padding: 0 1rem 0 0;
1029+
border: 1px solid #cccccc;
1030+
overflow-x: scroll;
1031+
width: calc(100% + (2 * var(--overflow-gutter-extension)));
1032+
}
10481033

1049-
code:not(:has(.comment)) .code {
1050-
/* For codeblocks without comments */
1051-
grid-column: 1 / -1 !important;
1052-
grid-row: 1;
1053-
padding-left: 0;
1054-
}
1034+
.code-header {
1035+
display: flex;
1036+
justify-content: space-between;
1037+
}
10551038

1056-
code .code {
1057-
padding-left: var(--codeblock-code-section-padding-left);
1058-
grid-area: code;
1059-
}
1039+
.code-header.no-lang {
1040+
justify-content: right;
1041+
}
10601042

1061-
code .comment {
1062-
display: inline-block;
1063-
white-space: normal;
1064-
margin: var(--codeblock-comment-space-between) 0;
1065-
width: calc(100vw - (var(--codeblock-comment-diff) * 2));
1066-
border: black var(--codeblock-border-thickness) solid;
1067-
box-shadow: 3px 3px 0px var(--color-shadow);
1068-
padding: 8px;
1069-
grid-column: 1 / -1;
1070-
}
1043+
.code-type {
1044+
text-transform: uppercase;
1045+
border: 1px solid #cccccc;
1046+
border-bottom: 1px solid white;
1047+
padding: .25rem 1rem; /* Padding for button content */
1048+
font-size: 12px; /* Font size */
1049+
z-index: 9999;
1050+
margin-bottom: -1px;
1051+
}
10711052

1072-
code .line:has(.comment) .code::before {
1073-
/* Vertical Lines */
1074-
content: "";
1075-
position: absolute;
1076-
border-left: black var(--codeblock-border-thickness) solid;
1077-
left: calc(var(--codeblock-horizontal-line-overflow) + 1px);
1078-
top: 10px;
1079-
height: calc(100% + 0.7rem);
1080-
}
1053+
.code-copy-button {
1054+
background-color: #f2f2f2;
1055+
border: none;
1056+
padding: 5px 10px;
1057+
cursor: pointer;
1058+
font-family: "JetBrains Mono", monospace;
1059+
font-size: 12px;
1060+
color: #000;
1061+
}
10811062

1082-
code .line:has(.comment) .code::after {
1083-
/* Block */
1084-
content: "";
1085-
background-color: black;
1086-
position: absolute;
1087-
height: var(--codeblock-line-box-side-length);
1088-
width: var(--codeblock-line-box-side-length);
1089-
top: calc(10px - (var(--codeblock-border-thickness) * 1.5));
1090-
left: var(--codeblock-horizontal-line-overflow);
1091-
}
1063+
.code-copy-button:hover {
1064+
background-color: #e0e0e0;
1065+
}
10921066

1093-
@media (min-width: 768px) {
1094-
/* Tablet */
1095-
code .line:has(.comment) .code {
1096-
grid-column: 2 / -1;
1097-
}
1098-
1099-
code .comment {
1100-
grid-column: 1;
1101-
width: calc(100% - (var(--codeblock-comment-diff)));
1102-
}
1103-
1104-
code .line:not(:has(.comment)) .code {
1105-
grid-column: 2 / -1;
1106-
}
1107-
1108-
code .line {
1109-
/* Readjust the areas to be more responsive */
1110-
grid-template-columns: 40% 60%;
1111-
grid-template-areas: "comment code";
1112-
}
1113-
1114-
code .line:has(.comment) .code::before {
1115-
/* Horizontal Lines */
1116-
border-left: none;
1117-
border-top: black var(--codeblock-border-thickness) solid;
1118-
left: calc(var(--codeblock-comment-diff) * -1);
1119-
width: calc(
1120-
var(--codeblock-horizontal-line-length) +
1121-
var(--codeblock-horizontal-line-overflow)
1122-
);
1123-
}
1124-
}
1067+
.code-copy-button:focus {
1068+
outline: none;
1069+
box-shadow: 0 0 2px 2px #a5a5a5;
11251070
}
11261071

11271072
.next-prev-icon {
@@ -1174,6 +1119,7 @@ figure {
11741119
/* FILTHY HACKS END */
11751120

11761121
/* Hidden temporarily */
1122+
11771123
.code-copy {
11781124
display: none;
11791125
}

‎assets/js/code-copy-v2.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Tightly coupled to `render-codeblock.html` for element targeting
2+
const copyToClipBoard = ((clipboard) => async (button) => {
3+
const codeBlockId = button.getAttribute('data-id-codeblock');
4+
const codeBlock = document
5+
.getElementById(codeBlockId)
6+
.getElementsByClassName('highlight')[0];
7+
8+
if (!codeBlock) {
9+
console.error('No code block found to copy from.');
10+
button.innerHTML = 'Error';
11+
return;
12+
}
13+
14+
const cleanCode = codeBlock.textContent
15+
.replace(/^\s*\d+\s/gm, '') // Remove line numbers
16+
.trim();
17+
18+
try {
19+
await clipboard.writeText(cleanCode);
20+
21+
updateButtonState(button, 'Copied!', 2000, true);
22+
} catch (error) {
23+
updateButtonState(button, 'Error');
24+
console.error(error);
25+
}
26+
})(navigator.clipboard);
27+
28+
const updateButtonState = (button, message, revertDelay, disable = false) => {
29+
button.innerHTML = message;
30+
31+
if (disable) {
32+
button.disabled = true;
33+
}
34+
35+
if (revertDelay) {
36+
setTimeout(() => {
37+
button.innerHTML = 'Copy';
38+
button.disabled = false;
39+
}, revertDelay);
40+
}
41+
};

‎exampleSite/content/nginx/installing-nginx-open-source.md‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ http {
4545
# Proxy settings
4646
server {
4747
listen 80;
48-
server_name www.example.com;
48+
server_name www.exampleklajsdlkajsldkjaslkdjalksdjalksdjalksjdlakjsdlaksjdlkajdlakjsdlakjwodijaosidjaowidjaosidjasldkjldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdasldkjas.com;
4949
5050
root /usr/share/nginx/html;
5151
@@ -117,13 +117,6 @@ server {
117117
118118
```
119119

120-
```js
121-
function hello() {
122-
// this is a comment
123-
console.log("Hello world!");
124-
const thing = ["a", "string", "array"];
125-
}
126-
```
127120

128121
This article explains how to install NGINX Open Source.
129122

@@ -191,7 +184,7 @@ The package can be installed from:
191184
3. Install NGINX Open Source:
192185

193186
```shell
194-
sudo yum install nginx
187+
sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx
195188
```
196189

197190
4. Verify the installation:
@@ -262,8 +255,8 @@ The package can be installed from:
262255

263256
7. Start NGINX Open Source:
264257

265-
```shell
266-
sudo nginx
258+
```js
259+
console.log("hello")
267260
```
268261

269262
8. Verify that NGINX Open Source is up and running:

‎layouts/_default/_markup/render-codeblock.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{{ $result := transform.HighlightCodeBlock . }}
2+
{{ $codeBlockId := printf "id-%x" (now.UnixNano) }}
3+
{{ $lines := split $result.Wrapped "\n" }}
4+
{{ $isSingleLine := eq (len $lines) 1 }}
5+
6+
{{ if $isSingleLine }}
7+
<div class="code-block" data-mf="true" style="display: none;">
8+
<div class="code-header no-lang">
9+
<button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
10+
</div>
11+
<div class="highlight-v2 single-line" id="{{ $codeBlockId }}">
12+
{{ $result.Wrapped }}
13+
</div>
14+
</div>
15+
{{ else }}
16+
17+
<div class="code-block" data-mf="true" style="display: none;">
18+
{{ if and (ne .Type "") (ne .Type "none") }}
19+
<div class="code-header">
20+
<span class="code-type">{{ .Type }}</span>
21+
<button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
22+
</div>
23+
{{ else }}
24+
<div class="code-header no-lang">
25+
<button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
26+
</div>
27+
{{ end }}
28+
<div class="highlight-v2" id="{{ $codeBlockId }}">
29+
{{ $result.Wrapped }}
30+
</div>
31+
</div>
32+
33+
{{ end }}
34+
<div id="code-block-v1" data-mf="false">
35+
{{ $result.Wrapped }}
36+
</div>

‎layouts/_default/baseof.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,13 @@
7575
table.style.display = isNewTheme ? "none" : "";
7676
});
7777

78+
const notMfElements = ['[data-mf="false"]'];
79+
notMfElements.forEach((elementId) => {
80+
document.querySelectorAll(elementId).forEach((element) => {
81+
element.style.display = isNewTheme ? "none" : "";
82+
});
83+
})
84+
7885
const mfElements = ['[data-mf="true"]'];
7986
mfElements.forEach((elementId) => {
8087
document.querySelectorAll(elementId).forEach((element) => {

‎layouts/partials/scripts.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
{{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }}
1414
<script src="{{ $codecopy.RelPermalink }}" type="text/javascript"></script>
1515

16+
<!-- load code copy v2 js -->
17+
{{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
18+
<script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
19+
1620
<!-- load mermaid.js -->
1721
{{ if .Page.Store.Get "hasMermaid" }}
1822
{{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}

0 commit comments

Comments
 (0)