Change pre code css in markdown

resources/common.js

@@ -277,6 +277,34 @@ function registerPopper($trigger, $dropdown) {
     })
 }
 
+function populateCopyButton() {
+    var copyButton;
+    $('pre code').each(function () {
+        $(this).before($('<div>', {'class': 'copy-clipboard'})
+                .append(copyButton = $('<span>', {
+                'class': 'btn-clipboard',
+                'data-clipboard-text': $(this).text(),
+                'title': 'Click to copy'
+            }).append('<i class="fa fa-copy"></i><span style="margin-left: 2px">Copy</span>')));
+
+        $(copyButton.get(0)).mouseleave(function () {
+            $(this).attr('class', 'btn-clipboard');
+            $(this).removeAttr('aria-label');
+        });
+
+        var curClipboard = new Clipboard(copyButton.get(0));
+
+        curClipboard.on('success', function (e) {
+            e.clearSelection();
+            showTooltip(e.trigger, 'Copied!');
+        });
+
+        curClipboard.on('error', function (e) {
+            showTooltip(e.trigger, fallbackMessage(e.action));
+        });
+    });
+}
+
 function onWindowReady() {
     // http://stackoverflow.com/a/1060034/1090657
     var hidden = 'hidden';
@@ -370,31 +398,8 @@ function onWindowReady() {
     })
     $('#logout').on('click', () => $('#logout-form').submit());
 
-    var copyButton;
-    $('pre code').each(function () {
-        $(this).parent().before($('<div>', {'class': 'copy-clipboard'})
-                .append(copyButton = $('<span>', {
-                'class': 'btn-clipboard',
-                'data-clipboard-text': $(this).text(),
-                'title': 'Click to copy'
-            }).text('Copy')));
-
-        $(copyButton.get(0)).mouseleave(function () {
-            $(this).attr('class', 'btn-clipboard');
-            $(this).removeAttr('aria-label');
-        });
-
-        var curClipboard = new Clipboard(copyButton.get(0));
-
-        curClipboard.on('success', function (e) {
-            e.clearSelection();
-            showTooltip(e.trigger, 'Copied!');
-        });
-
-        curClipboard.on('error', function (e) {
-            showTooltip(e.trigger, fallbackMessage(e.action));
-        });
-    });
+    populateCopyButton();
+    
     $('a').click(function() {
         var href = $(this).attr('href');
         if (!href || href === '#' || href.startsWith("javascript")) {

resources/content-description.scss

@@ -21,11 +21,9 @@
         font-family: $monospace-fonts !important;
         margin: 0 2px;
         padding: 0 5px;
-        border: 1px solid $border_gray;
-        background-color: #f8f8f8;
+        background-color: var(--md-code-bg-color);
         border-radius: $widget_border_radius;
-        font-size: 0.95em;
-        color: #444;
+        color: var(--md-code-fg-color);
     }
 
     pre {
@@ -36,17 +34,16 @@
             padding: 0;
             background: transparent;
             font-size: 1em;
-            color: black;
+            color: var(--md-code-fg-color);
 
         }
 
         white-space: pre-wrap;
         word-wrap: break-word;
-        padding: 1em;
-        border: 1px solid $border_gray;
-        background-color: #f8f8f8;
-        color: black;
-        border-radius: $widget_border_radius;
+        padding: 0.5em 1em;
+        background-color: var(--md-code-bg-color);
+        color: var(--md-code-fg-color);
+        border-radius: 3px;
     }
 
     pre.no-border {
@@ -57,6 +54,10 @@
         border-radius: none;
     }
 
+    .linenos pre {
+        padding-right: 0;
+    }
+
     b, strong {
         font-weight: bold;
     }
@@ -170,7 +171,10 @@ pre {
 }
 
 
-@media (min-width: 700px) {
+@media (min-width: 800px) {
+    .content-description pre:has(code) {
+        min-width: 20em;
+    }
     #common-content {
         display: flex;
         flex-direction: row-reverse;
@@ -206,7 +210,7 @@ pre {
     }
 }
 
-@media not all and (min-width: 700px) {
+@media not all and (min-width: 800px) {
     #content-right .info-float {
         float: none;
         width: 100% !important;

resources/markdown.css

@@ -4295,7 +4295,7 @@ html .md-typeset .footnote-ref{
     padding:0 1.1764705882em
 }
 .highlight span.filename{
-    background-color:var(--md-code-bg-color);
+    background-color:var(--md-default-fg-color--lighter);
     border-bottom:.05rem solid var(--md-default-fg-color--lightest);
     border-top-left-radius:.1rem;
     border-top-right-radius:.1rem;
@@ -4374,8 +4374,6 @@ html .md-typeset .footnote-ref{
     background-color:var(--md-code-bg-color);
     border-bottom-left-radius:.1rem;
     border-top-left-radius:.1rem;
-    font-size:.85em;
-    padding:.7720588235em 0 .7720588235em 1.1764705882em;
     -webkit-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;

resources/submission.scss

@@ -155,48 +155,6 @@ label[for="language"], label[for="status"] {
     color: #555;
 }
 
-.source-ln {
-    color: gray;
-    border-right: 1px solid gray;
-    padding-right: 5px;
-    text-align: right;
-
-    a {
-        color: gray;
-        display: block;
-
-        &:hover {
-            text-decoration: underline;
-        }
-
-        &::before {
-            display: block;
-            content: " ";
-            margin-top: -50px;
-            height: 50px;
-            visibility: hidden;
-        }
-    }
-}
-
-.source-code pre, .source-ln pre {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-}
-
-.source-code {
-    padding-left: 15px;
-    width: 100%;
-}
-
-.source-wrap {
-    overflow-x: auto;
-    padding: 1em;
-    border-radius: 10px;
-    border: double 4px darkgray;
-}
-
 .statistics-table {
     .status {
         font-weight: bold;

resources/widgets.scss

@@ -200,30 +200,26 @@ input {
 
 // Bootstrap-y copy button
 .btn-clipboard {
-    top: 0;
-    right: 0;
+    top: -5px;
+    right: -8px;
     display: block;
     font-size: 12px;
-    color: #767676;
     cursor: pointer;
-    background-color: #FFF;
-    border: 1px solid #E1E1E8;
-    border-radius: 0 $widget_border_radius;
     position: absolute;
     padding: 5px 8px;
+    font-family: system-ui, "Noto Sans";
+
+    &:hover {
+        border-radius: $widget_border_radius;
+        border: 1px solid #E1E1E8;
+        background-color: #FFF;
+    }
 }
 
 .copy-clipboard {
     position: relative;
 }
 
-.md-typeset .admonition .btn-clipboard,
-.md-typeset details .btn-clipboard {
-    right: -0.6rem;
-    border-radius: 0 0 0 4px;
-}
-
-
 // Bootstrap-y tabs
 .ul_tab_a_active {
     color: $theme_color;