Code Monkey home page Code Monkey logo

quarto-revealjs-codewindow's Introduction

codewindow Extension For Quarto

Add styled codeblock windows for code.

Installing

quarto add emilhvitfeldt/quarto-revealjs-codewindow

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

Once an extension has been added, you can use the Reveal plugin by adding it to the reveal-plugins key. For example:

---
title: "My Presentation"
format: revealjs
revealjs-plugins:
  - codewindow
---

Using

Adding a ::: {.codewindow} fenced div around any code chunk will turn the output into a codewindow. The file tab is enabled by adding plain text before the code chunk.

Adding the one of the following classes adds an icon in the file tab. File an issue to have more icons added to this list

  • .r
  • .py
  • .js
  • .quarto
  • .html
  • .css
  • .sass
  • .julia

The width argument can be used directly in the code fence.

Example

Here is the source code for a minimal example: example.qmd.

quarto-revealjs-codewindow's People

Contributors

emilhvitfeldt avatar lpembleton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

quarto-revealjs-codewindow's Issues

code-line-numbers overwriting in code window

Hi @EmilHvitfeldt - i'm loving the code windows!

I found a potential bug when using code-line-numbers in a code window. When I specify which lines to highlight the previously highlighted lines do not un-highlight (they still have the same alpha/transparency).

Here's an example qmd. The first chunk with the code window and the second with a regular code block, both with code-line-numbers:

---
title: "check"
format: revealjs
echo: true
revealjs-plugins:
  - codewindow
knitr: true
---

using `code-line-numbers: "|1-5"`

:::{.codewindow width="500px"}
script.r
```{sass eval=FALSE}
#| code-line-numbers: "|1-5"
library(tidyverse)
mtcars %>%
  arrange(desc(modification_time)) %>%
  slice(1) %>%
  pull(mpg)

fs::dir_info(here::here()) %>%
  arrange(desc(modification_time)) %>%
  slice(1) %>%
  pull(path) %>%
  readr::read_csv
```

:::

# regular code block - this works
using `code-line-numbers: "|1-5"`

```{r}
#| eval: false
#| code-line-numbers: "|1-5"
library(tidyverse)
mtcars %>%
  arrange(desc(modification_time)) %>%
  slice(1) %>%
  pull(mpg)

fs::dir_info(here::here()) %>%
  arrange(desc(modification_time)) %>%
  slice(1) %>%
  pull(path) %>%
  readr::read_csv
  
```

codewindow drops block-level elements after the second block

If you try to put more than one thing, like two code blocks or additional text etc. into a codewindow, codewindow will silently drop the additional elements. An easy way around this (that clutters my source code a bit) is to wrap the second element in a fenced div,

Drops the second code block

::: {.codewindow .r}
my-script.R

```r
runif(1)
```

```r
runif(42)
```
:::

Keeps the second code block

::: {.codewindow .r}
my-script.R

::: {.contents}
```r
runif(1)
```

```r
runif(42)
```
:::
:::

Support for RStudio/posit.cloud style code windows

Hi, love the package extension!

I am not a Mac user (pretty anti-Apple, actually), and would love a platform-neutral option to use while teaching my R programming students. I've been promoting the use of RStudio, so it would be nice to use the RStudio/posit.cloud tabset (and it seems like you might even have easy access to the folks that produce the tabsets).

image

Current output (using my custom .scss theme (thanks, also, for the pointers there) and code highlighting .theme file):
image

(Apologies if Posit already puts out this tabset; I could only recall seeing this in one of your slidecraft 101 decks).

Multiple "tabs" (in air quotes)

It'd be cool to be able to make multiple tabs (not actually clickable tags, that's a rabbit hole).

It'd be mostly CSS styles and a little markup so that people could specify multiple tabs and maybe even say which one is active (the last one by default).

bash icon

bash or terminal icon would be fantastic when sharing Linux code snippets.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.