https://github.com/shafayetShafee/code-fullscreen

Quarto Extension filter that adds a full screen button in the code blocks in RevealJs slides and html documents.
https://github.com/shafayetShafee/code-fullscreen

html quarto quarto-extension quarto-filter quarto-pub quartopub revealjs

Last synced: 12 days ago
JSON representation

Quarto Extension filter that adds a full screen button in the code blocks in RevealJs slides and html documents.

• Host: GitHub
• URL: https://github.com/shafayetShafee/code-fullscreen
• Owner: shafayetShafee
• License: mit
• Created: 2023-02-11T09:31:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-18T19:40:24.000Z (over 1 year ago)
• Last Synced: 2024-08-01T16:37:52.416Z (3 months ago)
• Topics: html, quarto, quarto-extension, quarto-filter, quarto-pub, quartopub, revealjs
• Language: CSS
• Homepage: https://shafayetshafee.github.io/code-fullscreen/example_revealjs.html
• Size: 4.82 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Code-fullscreen Extension For Quarto

`code-fullscreen` is [Quarto](https://quarto.org/) filter that adds a fullscreen button in the code blocks in revealjs slides and html documents.

[`View live demo`](https://shafayetshafee.github.io/code-fullscreen/example_revealjs.html)

## Installing

:warning: This extension requires Quarto version to be at least 1.2

```bash

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](https://icons.getbootstrap.com/icons/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](example.qmd) and [rendered html document](https://shafayetshafee.github.io/code-fullscreen/example.html)

- The source code for a example revealjs Slides [example_revealjs.qmd](example_revealjs.qmd) and [rendered slides](https://shafayetshafee.github.io/code-fullscreen/example_revealjs.html)

## Acknowledgement

The internal js and css code taken and modified from [Reveal.js fullscreen code plugin](https://github.com/mkordulewski/reveal.js-fullscreen-code).