Fixed page breaks when printing

parse.js

@@ -279,6 +279,7 @@ function highlightCode() {
   });
   fixClasses();
   fixFroms();
+  preventPageBreaks();
 }
 
 function setApaches(elements) {
@@ -296,6 +297,19 @@ function fixFroms() {
   $(`code:contains(os.rename)`).html(OS_RENAME);
 }
 
+function preventPageBreaks() {
+  $(':header').each(function(index) {
+    var el = $(this)
+    var untilPre = el.nextUntil('pre')
+    var untilH2 = el.nextUntil('h2')
+    if (untilPre.length < untilH2.length) {
+      untilPre.add(el).next().add(el).wrapAll("<div></div>");
+    } else {
+      untilH2.add(el).wrapAll("<div></div>");
+    }
+  });
+}
+
 function readFile(filename) {
   try {  
     return fs.readFileSync(filename, 'utf8');

web/style.css

@@ -90,11 +90,13 @@ h1 ~ aside {
 }
 
 body > p,
-li > p {
+li > p,
+div > p {
   line-height: 1.5em;
 }
 
-body > p {
+body > p,
+div > p {
   width: 720px;
 }
 

web/template.html

@@ -146,46 +146,55 @@ pre.prettyprint {
 }
 
 #return-to-top {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: rgb(0, 0, 0);
-    background: rgba(0, 0, 0, 0.2);
-    width: 50px;
-    height: 50px;
-    display: block;
-    text-decoration: none;
-    -webkit-border-radius: 35px;
-    -moz-border-radius: 35px;
-    border-radius: 35px;
-    display: none;
-    -webkit-transition: all 0.3s linear;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.2);
+  width: 50px;
+  height: 50px;
+  display: block;
+  text-decoration: none;
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  border-radius: 35px;
+  display: none;
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 #return-to-top i {
-    color: #fff;
-    margin: 0;
-    position: relative;
-    left: 16px;
-    top: 13px;
-    font-size: 19px;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
+  color: #fff;
+  margin: 0;
+  position: relative;
+  left: 16px;
+  top: 13px;
+  font-size: 19px;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 #return-to-top:hover {
-    background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.35);
 }
 
 #return-to-top:hover i {
-    color: #f0f0f0;
+   color: #f0f0f0;
+}
+
+@media print {
+  div {
+    page-break-inside: avoid;
+  }
+  pre {
+    page-break-inside: avoid;
+  }
 }
 </style>