Including a <script> in a .qmd file

[howardm]

Hi,

I'm using the Nutshell extension in a Quaro document:

https://github.com/schochastics/quarto-nutshell

In order to change a default concerning the display of a Share Icon, I have to follow these instructions:

To turn off the share-icon, type:

<script>
Nutshell.setOptions({
    dontEmbedHeadings: true
});
</script>

after including the Nutshell.js file.

How do I do that for the .qmd document ?

Here's a screenshot from Rstudio of what I have:

A detailed and basic explanation would be great for a newbie :-)

Thanks.

[jimjam-slam]

Hey @howardm,

You need to include some extra JavaScript (that's the <script> HTML tag you mentioned) in your Quarto doc to configure the plugin. The code will ideally run after the plugin has loaded (unlike Observable JS in ojs chunks, regular JavaScript just runs once!).

It's pretty common to need to run some initialisation code in JavaScript, so the Quarto devs have added some options to the frontmatter for injecting JavaScript in various places:

Try adding this in your Quarto doc's frontmatter:

---
title: Blah
author: Howard
filters:
   - nutshell
include-before-body:
  text: |
    <script>
      Nutshell.setOptions({
        dontEmbedHeadings: true
      });
    </script>
---

(Note that you need to include the text key under include-before-body if you want to just write the code there directly instead of saving it in a seperate file. The pipe | means you can write it over several lines.)

[howardm]

@jimjam-slam

Thanks a lot.

Since I posted this question, I found out that I could achieve this in this instance by including a simple declaration in my custom.css file:

.nutshell-heading-embed{ display:none; }

However, I'll likely have to specify another js file elsewhere as well:

<script type="text/javascript" src="pacsbin-client.js"></script>

I have the pacsbin-client.js file which will be in the root of my site's directory.

How should I write that after an include-after-body entry in the YAML -- in an analogous fashion ?

Cheers.

[jimjam-slam]

Yeah, absolutely! In the case of loading a script for another library, I would probably recommend using include-in-header rather than include-before-body or include-after-body, but experiment and see how you go.

There are two ways you can use these options—either write out the whole script tag yourself (using the text key), or just point directly to the JavaScript file (using the file key).

---
include-in-header:
  text: <script type="text/javascript" src="pacsbin-client.js"></script>
---

or:

---
include-in-header:
  file: pacsbin-client.js
---

[howardm]

@jimjam-slam

Thanks!