Is there a way to move all inline JavaScript and CSS in HTML format to external files? #11736

erichgoldman · 2024-12-24T01:23:05Z

erichgoldman
Dec 24, 2024

Description

quarto -v
1.6.39

Is there a way to have all JavaScript and CSS rendered into external files instead of in the body of the HTML document?

I made a very simple and basic site and there is a lot of non HTML stuff inline in the document. This is less efficient and also makes it harder to implement CSP, etc. There are many other library files included, so I am not sure why some stuff is inline?

e.g., in the rendered index.html I see:

In the <head />:

<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
  vertical-align: middle;
}
</style>

and

<script id="quarto-search-options" type="application/json">{
  "location": "navbar",
  "copy-button": false,
  "collapse-after": 3,
  "panel-placement": "end",
  "type": "overlay",
  "limit": 50,
  "keyboard-shortcut": [
    "f",
    "/",
    "s"
  ],
...

and then quite a bit more at the end of the file

</main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
  const toggleBodyColorMode = (bsSheetEl) => {
    const mode = bsSheetEl.getAttribute("data-mode");
...

This seems to be a lot to include by default, some of it seems to only be conditionally needed. I would like to reduce bloat where possible, but also ideally my HTML page just links/imports things rather then inline. If its well organized I could do post processing to remove the unnecessary libraries.

I saw some things mentioning:

format:
  html:
    self-contained: false
    embed-resources: false

but these do not seem to do anything. I also see you can disable some features, but it would still seem to be better if these were not online even if you wanted them.

e.g, I have in _quarto.yml

format:
  html:
    theme: cosmo
    toc: true

and then a simple index.qmd

---
title: "Index Page"
---

This is the homepage.

cderv · 2024-12-24T10:19:07Z

cderv
Dec 24, 2024
Maintainer

Is there a way to have all JavaScript and CSS rendered into external files instead of in the body of the HTML document?

There is no built it configuration that will allow you to do that.

Some of the inline CSS are coming from template, so for this one you could create your own template and externalize the CSS. Example with Pandoc's style

quarto-cli/src/resources/formats/html/pandoc/styles.html

Lines 190 to 200 in 3f492cc

    
           code{white-space: pre-wrap;} 
        
           span.smallcaps{font-variant: small-caps;} 
        
           div.columns{display: flex; gap: min(4vw, 1.5em);} 
        
           div.column{flex: auto; overflow-x: auto;} 
        
           div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} 
        
           ul.task-list{list-style: none;} 
        
           ul.task-list li input[type="checkbox"] { 
        
             width: 0.8em; 
        
             margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */  
        
             vertical-align: middle; 
        
           }

coming from styles.html which is inserted in HTML template

quarto-cli/src/resources/formats/html/pandoc/template.html

Lines 8 to 11 in 3f492cc

    
           <style> 
        
           $styles.html()$ 
        
           </style>

This is how Pandoc's is doing it and we did no change that
https://github.com/jgm/pandoc/blob/af2b276afeaae3faa4c4a9759d1530e2f1da6871/data/templates/default.html5#L20-L22

Other content are inserted inline directly by Quarto itself, like the search options that we do add as included text

quarto-cli/src/project/types/website/website-search.ts

Lines 613 to 615 in 3f492cc

    
           const searchOptionsScript = 
        
             `<script id="quarto-search-options" type="application/json">${searchOptionsJson}</script>`; 
        
           const includes = [searchOptionsScript];

using include logic for HTML https://quarto.org/docs/output-formats/html-basics.html#includes

So this would be an enhancement request to make all those content in external file, and also would require to maintain this comparing to Pandoc's difference.

Hope it helps understand.

format:
  html:
    self-contained: false
    embed-resources: false

Regarding, self-contained and embed-resources are the same thing. Only use the latter now. They do indeed avoid inlining content, but this is meant to be used with external CSS and JS script, that would be inline when embed-resources: true. And by default embed-resources: false for HTML format so it won't make a difference in your case. And it won't prevent already inlined content to be inlined.

I also see you can disable some features, but it would still seem to be better if these were not online even if you wanted them.

Some of the content you see is indeed added only when some features are not opt-out.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there a way to move all inline JavaScript and CSS in HTML format to external files? #11736

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Is there a way to move all inline JavaScript and CSS in HTML format to external files? #11736

erichgoldman Dec 24, 2024

Description

Replies: 1 comment

cderv Dec 24, 2024 Maintainer

erichgoldman
Dec 24, 2024

cderv
Dec 24, 2024
Maintainer