Giter Club home page Giter Club logo

collapse-callout's Introduction

collapse-callout

A very simple filter extension For Quarto that provides options from document yaml header (i.e. global options) to make the Callout Blocks in your document collapsible. By specifying true or false, you can either make the Callout Blocks collapsed or keep them expanded by default.

And Note that, Callout blocks collapsibility works only for html format.

Installing

quarto install extension shafayetShafee/collapse-callout

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

Using

Collapsing all types of callout blocks

Add the following to yaml header of your document to make all of the callout blocks in your document collapsed by default.

title: "Collapse-callout Example"
filters:
  - collapse-callout
collapse-callout:
  all: true
format: html
---

here all can be either true or false.

Collapsing specific types of callout blocks

You can also set the collapsibility for specfic types of callout blocks in the following way,

---
title: "Collapse-callout Example"
filters:
  - collapse-callout
collapse-callout:
  tip: true
  note: false
  warning: false
  important: false
  caution: true
---

here tip and caution types Callout blocks will be in collapsed form and rest of the callout blocks will be in expanded form by default.

If you do not want to make a specfic type of Callout Blocks collapsible, simply do not include its name under collapse-callout in the yaml header.

Therefore, the following will not do anything for important type Callout blocks,

---
title: "Collapse-callout Example"
filters:
  - collapse-callout
collapse-callout:
  tip: true
  note: false
  warning: false
  caution: true
---

A few things to note,

  • If you use all option, specific options (i.e. tip, important etc.) will not be used.

  • if you set collapse=false or collapse=true manually in the callout divs in the document source file (that is in the qmd file), this filter will not overwrite that.

Example

Source Files Rendered HTML Output
A minimal example where all Callout Blocks are collapsible and collapsed (with all: true) example_all_true.qmd Rendered Output
A minimal example where all Callout Blocks are collapsible and expanded (with all: false) example_all_false.qmd Rendered Output
A minimal example where some specific types of Callout Blocks are collapsible and collapsed or expanded example_specific.qmd Rendered Output

collapse-callout's People

Contributors

shafayetshafee avatar

Stargazers

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

Watchers

 avatar

collapse-callout's Issues

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.