Code-fullscreen Extension For Quarto

code-fullscreen is Quarto filter that adds a fullscreen button in the code blocks in revealjs slides and html documents.

View live demo

Installing

⚠️ This extension requires Quarto version to be at least 1.2

quarto add shafayetShafee/code-fullscreen

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

Simply use the filter in the document yaml section.

filters:
  - code-fullscreen

Then a fullscreen button will be added in top right corner of each code blocks.

Example

• The source codes for a example of html format: example.qmd and rendered html document

• The source code for a example revealjs Slides example_revealjs.qmd and rendered slides

Acknowledgement

The internal js and css code taken and modified from Reveal.js fullscreen code plugin.