Optimize code blocks for printing

Author: yucheng11122017

docs/userGuide/syntax/code.md

@@ -281,7 +281,17 @@ A _wrap text_ button can be added to code blocks using the `codeBlockWrapButtons
 ##### Printing optimization
 
 <div id="code-print-optimization">
-Markbind enhances the readability of your code blocks for printing by applying soft wrapping, ensuring code doesn't get cut off. Additionally, line numbers are added to maintain context when wrapping occurs.
+Markbind enhances the readability of your code blocks for printing by 
+
+- Applying soft wrapping, ensuring code doesn't get cut off
+- Adding line numbers to maintain context when wrapping occurs
+- Automatically changing dark code theme to light
+- Removing [codeBlockCopyButtons]({{baseUrl}}/userGuide/formattingContents.html#copy-button) and [codeBlockWrapButtons]({{baseUrl}}/userGuide/formattingContents.html#wrap-text-button)
+
+<box type="warning" seamless> 
+    There are some issues with printing in Firefox. Please use other browsers such as Chrome if these issues persist.
+</box>
+
 </div>
 <br>
 

packages/core-web/src/styles/markbind.css

@@ -1,3 +1,5 @@
+@import url("../../asset/css/codeblock-light.min.css") print;
+
 :root {
     --sticky-header-height: 0;
 }
@@ -27,7 +29,7 @@ pre.hljs > code {
     background: none;
 }
 
-pre > code.hljs { 
+pre > code.hljs {
     background-clip: padding-box;
     border-radius: 5px;
     counter-reset: line;
@@ -63,24 +65,13 @@ pre > code.hljs[heading] {
     display: block;
 }
 
-/* switch to light style on print view */
 @media print {
     pre > code.hljs {
         white-space: pre-wrap;
         word-wrap: break-word;
         word-break: break-all;
     }
 
-    code.hljs.inline {
-        background: ghostwhite;
-        color: #333;
-        border: 0.5px solid #d4d4d4;
-    }
-
-    code span.highlighted {
-        background: lavender;
-    }
-
     .hljs:not(.inline).line-numbers-print > span {
         padding: 0 0.5em 0 3.5em;
         position: relative;
@@ -102,6 +93,12 @@ pre > code.hljs[heading] {
         width: 3em;
         height: 100%;
     }
+
+    /* force printing the highlighting colour */
+    .hljs span.highlighted{
+        -webkit-print-color-adjust:exact;
+        background:#e6e6fa !important;
+    }
 }
 
 kbd {

packages/core/src/plugins/codeBlockCopyButtons.ts

@@ -23,7 +23,7 @@ const COPY_ICON = `
 `;
 
 function getButtonHTML() {
-  const html = `<button onclick="copyCodeBlock(this)" class="function-btn">
+  const html = `<button onclick="copyCodeBlock(this)" class="function-btn d-print-none">
     <div class="function-btn-body">
     ${COPY_ICON}
     </div>

packages/core/src/plugins/codeBlockWrapButtons.ts

@@ -28,7 +28,7 @@ const WRAP_ICON = `
 `;
 
 function getButtonHTML() {
-  const html = `<button onclick="toggleCodeBlockWrap(this)" class="function-btn">
+  const html = `<button onclick="toggleCodeBlockWrap(this)" class="function-btn d-print-none">
     <div class="function-btn-body">
       ${WRAP_ICON}
     </div>