Shortcodes for variable content based on the output format

[jmbuhr]

I am currently working on a paper in which I am including videos (which works great with the regular markdown image syntax btw.). However, this of course does not work for pdf output. For my Master's Thesis I solved this with Rmarkdown using R code:

```{r, results='asis'}
if (is_html_output()) {
  cat("
> **Dear reader**: You are holding in your hands the digital
  version of this document.
")
}
if (is_latex_output()) {
  cat("
> **Dear reader**: You are holding in your hands the
  print version of this document.
")
}
```

(https://github.com/jmbuhr/hdReports/blob/c55392dcf19cab8d1fd84796a83214fa848dc4ce/inst/rmarkdown/templates/hdReport/skeleton/skeleton.Rmd#L54-L67)

but for quarto it feels like there would be a more elegant language agnostic solution straight in quarto with some sort of shortcode. Is this feasible?

[cderv]

I believe it is on the roadmap. Shortcodes are already a thing for Quarto (https://quarto.org/docs/authoring/shortcodes-and-filters.html#shortcodes) and additional shortcodes for inserting videos, tweets, or others are definitely something that should be done !

Maybe we could use this discussion to identify the shortcodes that would be useful ?

I am thinking (mainly for HTML 😅 ) :

• {{< video url attributes >}}, and maybe more specific {{< youtube id >}}
• {{< tweet id >}}
• {{< gist id >}}

For custom shortcodes, it may be something feasible using a Lua Filters (that would output HTML or LaTeX syntax depending on Pandoc's output format.

[ericpgreen]

@jmbuhr I have a very similar use case. In rmd I was using is_latex_output() and is_html_output() in the chunk options along with cat(tufte::margin_note()) to conditionally print to the margin. Specifically, when the format is html I do things like add links and embed videos and gifs. When it's latex, I include only text plus small QR code images that point the reader to multimedia content.

I'm transitioning to Quarto and failing to get this to work:

:::web-only {.column-margin}
Test 1
:::

:::print-only {.column-margin}
Test 2
:::

I think this is because your PR is still open, right? @cderv do you think it will be possible to combine this approach with {.column-margin}?

> sessionInfo()
R version 4.0.2 (2020-06-22)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.7

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices datasets  utils     methods  
[7] base     

loaded via a namespace (and not attached):
 [1] compiler_4.0.2  here_1.0.1      fastmap_1.1.0  
 [4] tufte_0.12      rprojroot_2.0.3 htmltools_0.5.2
 [7] tools_4.0.2     rmarkdown_2.12  knitr_1.37     
[10] xfun_0.30       digest_0.6.29   rlang_1.0.2    
[13] renv_0.14.0     evaluate_0.15 

[jmbuhr]

Until there is an official solution you can use my lua filter by downloading it and including it in the the yaml frontmatter:
https://github.com/hits-mbm-dev/paper-talin-loop/blob/1d85e2b9d3c7b76b38ed185182abfa45b18eedaa/index.qmd#L57-L59
https://github.com/hits-mbm-dev/paper-talin-loop/blob/1d85e2b9d3c7b76b38ed185182abfa45b18eedaa/www/conditional-content.lua

[ericpgreen]

Thanks, @jmbuhr. I appreciate that. I grabbed the file and added it to the yaml. It works unless I add {.column-margin}.

:::web-only {.column-margin}
Test
:::

I think I need to use the .column-margin class to put content in the margin, and I assumed it might come after the filter name. This is quarto day 1 for me, so I might not be understanding something about how it works. Any ideas?

::: {.column-margin}
![A margin image](image.png)
:::

Your paper repository is amazing, btw. I'll be coming back to it for general learning.

[jmbuhr]

Thank you for your kind words!

:::web-only is a shorthand notation for a div with a single class, so it gets translated to :::{.web-only} (mind the dot). This means if you want a div with multiple classes they all need to go inside of the curly braces: :::{.web-ony .column-margin}.
Since quarto is based on pandoc, the pandoc manual can sometimes come in handy as well: https://pandoc.org/MANUAL.html#extension-fenced_divs and https://pandoc.org/MANUAL.html#extension-fenced_code_attributes

[ericpgreen]

This really helped me, @jmbuhr. Thanks. I didn't know it was shorthand for the dot version.

[cderv]

For cross reference, related discussion in #676 also following this issue should help know when something will be available: #646

[cderv]

See the new feature as answered in #646 (comment)

::: {.content-hidden when-format="pdf"}
This will not appear in a PDF
:::

::: {.content-visible unless-format="docx"}
This will not appear in word output
:::

::: {.content-hidden unless-format="html"}
This will only be visible in HTML output
:::

This should help regarding the discussion here. Please give us feedback to know if that answer all or still missing elements.

Thanks !

[cderv]

@ericpgreen This was a bug that should now be fixed in 8d40ba3
it should be available in the next build in https://github.com/quarto-dev/quarto-cli/releases

So you could use one div

::::{.column-margin .content-hidden unless-format="html"}
:::{#fig-pandas}
<iframe height="500px" src="https://www.youtube.com/embed/XdM6c4juY1g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Look at these pandas!
:::
::::

Thanks for the report

[ericpgreen]

@cderv should the latest build also allow combining the following?

::::{.column-margin .content-hidden unless-format="pdf"}

I updated to the development version today and the above is failing for me (i.e., content appears but not in margin), but the nested approach works.

[cderv]

Yes this above #373 (reply in thread) works to include a iframe in the margin. Can you confirm this works ?

In your example, you are trying to include content in margin for a PDF. I don't know what it is but it should be LaTeX compatible format otherwise it may be ignored. Can you share full minimal reprex of what is not working ?

[ericpgreen]

Thanks @cderv. I created a new repo and a reprex of the issue: https://github.com/ericpgreen/quarto_example/blob/main/index.qmd.

Only the nested version is working for PDF and html (it was working for html in an earlier version). I installed the development version and updated to 393 just prior to posting this.

It's not a problem to use nested divs if that's required. I'm about to convert a large project, so my main goal is to figure out the best way to do it currently.

[cderv]

We'll look closer to this, and we may indeed recommend nested divs as it will make more clear in layout what is happening. We'll keep you updated

[jjallaire]

Complete docs here: https://quarto.org/docs/authoring/conditional.html

[mcanouil]

Closing this as completed.