Make tutorials printable

NEWS.md

@@ -12,6 +12,7 @@ learnr (development version)
 
 ## New features
 
+* Added a print option to the default tutorial format. ([#467](https://github.com/rstudio/learnr/pull/467))
 * Introduced "setup chunk chaining", which allows a setup chunk to depend on another setup chunk and so on, forming a chain of setup code that can be used for exercises via `exercise.setup`. Run `run_tutorial("setup-chunks", "learnr")` for a demo. ([#390](https://github.com/rstudio/learnr/pull/390))
 * Introduced an [experimental](https://www.tidyverse.org/lifecycle/#experimental) function `external_evaluator()` which can be used to define an exercise evaluator that runs on a remote server and is invoked via HTTP. This allows all exercise execution to be performed outside of the Shiny process hosting the learnr document. ([#345](https://github.com/rstudio/learnr/pull/345), [#354](https://github.com/rstudio/learnr/pull/354))
 * For the "forked" evaluator (the default used on Linux), add a limit to the number of forked exercises that learnr will execute in parallel. Previously, this was uncapped, which could cause a learnr process to run out of memory when an influx of traffic arrived. The default limit is 3, but it can be configured using the `tutorial.max.forked.procs` option or the `TUTORIAL_MAX_FORKED_PROCS` environment variable. ([#353](https://github.com/rstudio/learnr/pull/353))

inst/rmarkdown/templates/tutorial/resources/tutorial-format.css

@@ -100,6 +100,17 @@
   opacity: 1;
 }
 
+.topicsFooter .printButton {
+  padding-left: 10px;
+  font-size: .66em;
+  cursor: pointer;
+  opacity: .7;
+}
+
+.topicsFooter .printButton:hover {
+  opacity: 1;
+}
+
 .topicsList .topic {
   line-height: 40px;
   font-size: 15px;
@@ -235,6 +246,33 @@
   }
 }
 
+@media print {
+  .topicsContainer,
+  .topicActions,
+  .exerciseActions .skip {
+    display: none;
+  }
+  .topics .tutorialTitle,
+  .topics .section.level2,
+  .topics .section.level3:not(.hide) {
+    display: block;
+  }
+  .topics {
+    width: 100%;
+  }
+  .tutorial-exercise, .tutorial-question {
+    page-break-inside: avoid;
+  }
+  .section.level3.done h3 {
+    padding-left: 0;
+    background-image: none;
+  }
+  .topics .showSkip .exerciseActions::before {
+    content: "Topic not yet completed...";
+    font-style: italic;
+  }
+}
+
 /* override the width to be 100%, not 300px wide */
 .shiny-input-container:not(.shiny-input-container-inline) {
   width: 100%;

inst/rmarkdown/templates/tutorial/resources/tutorial-format.js

@@ -350,6 +350,12 @@ $(document).ready(function() {
                         });
       });
       topicsFooter.append(resetButton);
+
+      var printButton = $('<span class="printButton">Print</span>');
+      printButton.on('click', function() {
+        window.print();
+      });
+      topicsFooter.append(printButton);
       topicsList.append(topicsFooter);
 
       return topicsList;