diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml
index 884a87d..f66521e 100644
--- a/input/_Layout.cshtml
+++ b/input/_Layout.cshtml
@@ -278,6 +278,15 @@
}
}
}
+
+ // Find the active element
+ var activeElement = $("#left-sidebar .sidebar-nav-item.active");
+
+ if (activeElement.length > 0) {
+ // Scroll to the active element
+ $("#left-sidebar").scrollTop(activeElement.position().top);
+ }
+
}
function stickSidebar(sidebar, rect) {
// Bottom
@@ -345,6 +354,58 @@
});
}
});
+
+ // Create the SVG element
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+ svg.setAttribute("height", "16");
+ svg.setAttribute("width", "14");
+ svg.setAttribute("viewBox", "0 0 448 512");
+ svg.innerHTML = '';
+
+ // use a class selector if available
+ let blocks = document.querySelectorAll("pre");
+
+ blocks.forEach((block) => {
+ // only add button if browser supports Clipboard API
+ if (navigator.clipboard) {
+ let button = document.createElement("button");
+
+ // Clone the SVG and append it to the button
+ button.appendChild(svg.cloneNode(true));
+
+ // Add a title attribute for accessibility
+ button.title = "Copy Code";
+
+ // Wrap the pre element with a div of class "language"
+ let languageDiv = document.createElement("div");
+ languageDiv.classList.add("language");
+ block.parentNode.insertBefore(languageDiv, block);
+ languageDiv.appendChild(block);
+
+ // Append the button to the languageDiv
+ languageDiv.appendChild(button);
+
+ button.addEventListener("click", async () => {
+ await copyCode(block, button);
+ });
+ }
+ });
+
+ async function copyCode(block, button) {
+ let code = block.querySelector("code");
+ let text = code.innerText;
+
+ await navigator.clipboard.writeText(text);
+
+ // visual feedback that task is completed
+ button.innerHTML = '';
+
+ setTimeout(() => {
+ button.innerHTML = svg.cloneNode(true).outerHTML;
+ }, 1000);
+ }
+
@await RenderSectionAsync(SectionNames.Scripts, false)
diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss
index a393d64..dac7535 100644
--- a/input/assets/css/theme.scss
+++ b/input/assets/css/theme.scss
@@ -244,13 +244,6 @@ code, code[class*="language-"], pre[class*="language-"] {
padding-bottom: $spacer * .25;
}
}
-
- &.p-4 > pre[class*="language-"] {
- margin-left: -$spacer * 1.5;
- margin-right: -$spacer * 1.5;
- padding-left: $spacer * 1.5;
- padding-right: $spacer * 1.5;
- }
}
#footer {
@@ -469,4 +462,54 @@ code, code[class*="language-"], pre[class*="language-"] {
.cluster rect {
fill: $gray-100 !important;
stroke: $gray-300 !important;
- }
\ No newline at end of file
+ }
+
+/* Search Button*/
+.language {
+ position: relative;
+
+ button {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ font-size: 0.9rem;
+ background-color: #bcbabb;
+ border: ridge 1px #7b7b7c;
+ border-radius: 5px;
+ text-shadow: #c4c4c4 0 0 2px;
+ outline: none;
+ background-clip: padding-box;
+
+ &:hover {
+ cursor: pointer;
+ background-color: #828282;
+ }
+ }
+}
+
+pre[class*="language-"] {
+ overflow: auto;
+ margin: 5px 0;
+ border-radius: 10px;
+ padding-top: 30px !important;
+
+ /* custom scrollbar */
+ &::-webkit-scrollbar {
+ width: 20px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #d6dee1;
+ border-radius: 20px;
+ border: 6px solid transparent;
+ background-clip: content-box;
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background-color: #a8bbbf;
+ }
+}