GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - reuning/codefocus: Quarto extension to implement RevealJS code-focus

BranchesTags
Open more actions menu

Latest commit

 

History

16 Commits
16 Commits

Folders and files

NameName
Last commit message
Last commit date
_extensions/codefocus
_extensions/codefocus
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
example.html
example.html
 
 
example.qmd
example.qmd
 
 

Repository files navigation

Codefocus Extension For Quarto

This extension is a (jankily made) implementation of reveal-code-focus. I stripped somethings out of it, and then tried to make sure it would still work with the original line-highlight plugin.

See the demo.

Installing

quarto add reuning/codefocus

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

Using

If you want to highlight and explain specific pieces of code as you go through it you'll include the explanations in fragments under the code. For example:

---
title: "Codefocus Example"
format:
  revealjs: default
revealjs-plugins:
  - codefocus
execute:
  echo: true
---

```{r}
vector <- c(1,2,3)
vector <- sample(vector)
sum(vector)
```

::: {.fragment .current-only data-code-focus="1"}
When this fragment is shown, the first line of code will have the `focus` class added to it and it gets highlighted.
:::

In addition, .current-only will make the fragment disappear when you move into other fragments.

Example

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

Thanks also to shafayetShafee.

About

Quarto extension to implement RevealJS code-focus

Topics

quarto-extensionreveal-js

Resources

Readme
MIT license
Activity

Stars

15 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.