- Modify code block style and remove copy button in favor of a code click

Author: DannyBen

app/public/css/main.css

@@ -1,11 +1,7 @@
 $(function() {
-  new ClipboardJS('.clipboard-button', {
+  new ClipboardJS('.sourceCode', {
     target: function(trigger) {
       return trigger.parentElement;
     }
   });
-
-  html = '<a href="#" onclick="return false" class="icon clipboard-button" data-clipboard-target="code"><i class="icon-copy"></i></a>';
-
-  $('pre code').prepend(html);
 })

app/public/css/main.css.map

@@ -8,40 +8,17 @@ code {
 }
 
 pre {
-  overflow-x: auto;
   position: relative;
-  border-radius: 3px;
+
+  border: 1px solid var(--code-border-color);
+  border-radius: 5px;
+  overflow-x: auto;
+  padding: 10px;
 
   code {
     background-color: transparent;
     display: block;
-    font-size: inherit;
-
-    // padding: 0 20px;
     line-height: 1.2;
-
-    .clipboard-button {
-      background: var(--clipboard-button-bg-color);
-      border: 1px solid var(--clipboard-button-border-color);
-      position: absolute;
-      left: 7px;
-      bottom: 7px;
-      font-size: 1.25em;
-      border-radius: 5px;
-      opacity: 0;
-      transition: opacity 0.3s;
-      display: inline-block;
-      padding: 7px;
-    }
-
-    &:hover .clipboard-button {
-      opacity: 0.7;
-      transition: opacity 0.3s;
-
-      &:hover {
-        opacity: 1.0;
-        transition: opacity 0.3s;
-      }
-    }
+    position: relative;
   }
 }

app/public/js/clipboard.js

@@ -1,7 +1,7 @@
 pre > code.sourceCode { white-space: pre; position: relative; }
 pre > code.sourceCode > span { line-height: 1.25; }
 pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
+// .sourceCode { overflow: visible; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
@@ -10,7 +10,7 @@ div.sourceCode { overflow: auto; }
 }
 @media print {
 pre > code.sourceCode { white-space: pre-wrap; }
-pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }

app/styles/_code.scss

@@ -2,8 +2,7 @@ body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   color: var(--font-color);
-  // font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica,Arial, freesans, sans-serif;
+  font-family: var(--font-family);
   font-size: 16px;
   line-height: 1.6;
   word-wrap: break-word;
@@ -59,5 +58,6 @@ h6 {
 }
 
 code, pre, kbd {
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-family: var(--font-family-monospace);
 }
+

app/styles/_pandoc_code.scss

@@ -1,12 +1,12 @@
 :root {
-
   --background-color: #fff;
   --blockquote-border-color: #ddd;
   --blockquote-color: #777;
   --breadcrumbs-border-color: #ccc;
-  --clipboard-button-bg-color: white;
-  --clipboard-button-border-color: #ccc;
+  --code-border-color: #ddd;
   --font-color: #333;
+  --font-family: "Segoe UI", "Helvetica Neue", Helvetica,Arial, freesans, sans-serif;
+  --font-family-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --footnotes-color: #666;
   --h1-border-color: #eee;
   --h1-color: #333;
@@ -36,5 +36,4 @@
   --table-border-color: #ddd;
   --table-header-bg-color: transparent;
   --table-row-bg-color: transparent;
-
-}
+}

app/styles/_typography.scss

@@ -32,5 +32,9 @@ action :pandoc do
   File.write 'tmp/pandoc-dummy.md', sample
 
   puts 'Saving app/styles/_pandoc_code.scss'
-  system 'pandoc tmp/pandoc-dummy.md --metadata title=dummy --highlight-style=pygments --template=tmp/pandoc-style.css > app/styles/_pandoc_code.scss'
+  system 'pandoc tmp/pandoc-dummy.md --metadata title=dummy --highlight-style=pygments --template=tmp/pandoc-style.css > tmp/pandoc.scss'
+
+  css = File.read 'tmp/pandoc.scss'
+  patched_css = css.gsub(/^(.sourceCode { overflow: visible; })/, '// \1')
+  File.write 'app/styles/_pandoc_code.scss', patched_css
 end