I am using Quarto to produce some revealjs slides and would like the table of contents to appear on an arbitrary slide rather than immediately after the title slide. Is there a way of achieving this?
Any help appreciated!
We can place the table of contents at an arbitrary slide at an arbitrary place with the help of RevealJs Partials toc-slide.html. I have modified it a bit and also used javascript (in toc-add.html) to change the TOC position. Note that, using RevealJs partials requires Quarto version 1.2 at least.
Suppose we want to add the TOC in the overview slide, so we create an HTML div as a placeholder for the TOC as follows,
```{=html}
<div id='toc'></div>
```
and then using javascript, we can fetch the TOC generated by quarto and replace the <div id='toc'></div> with the TOC.
quarto-revealjs.qmd
---
title: "Controlling TOC"
format:
revealjs:
toc: true
template-partials:
- toc-slide.html
include-after-body: toc-add.html
---
## Quarto
Quarto enables you to weave together content and executable code into a
finished presentation.
## Overview
This is the overview slide.
```{=html}
<div id='toc'></div>
```
This slide contain the contents that we going to discuss and hopyfully things
wiil make sense :).
## Code
You can embed code like this:
```{r}
#| echo: true
1 + 1
```
toc-slide.html
<section id="$idprefix$TOC">
<nav id="toc-nav" role="doc-toc" style="padding-top: 5px; padding-bottom: 5px;">
$if(toc-title)$
<h3 id="$idprefix$toc-title">$toc-title$</h3>
$endif$
$table-of-contents$
</nav>
</section>
toc-add.html
<script>
let placeholder = document.querySelector("div#toc");
let toc = document.querySelector("#toc-nav");
let toc_slide = document.querySelector("section#TOC");
let toc_clone = toc.cloneNode(true);
placeholder.replaceWith(toc_clone);
toc_slide.remove();
</script>
Rendered Output (in slide overview mode)
Related
I am using Quarto Book for writing an online Book for my students on scientific writing skills (see www.politik-wissenschaft.at).
I want to add the bibliographic entry of this book at the start site (index.qmd / index.html). I used the abstract option for doing that. This works fine, but the title of this meta data entry is now called "Zusammenfassung" (i.e., abstract).
Is there a way to change this title to "How to cite", for example?
Furthermore, after updating Quarto CLI to 1.2.313 this information ("Zusammenfassung") is not only printed on the index.html file, but on the head of all other sites as well. How can I switched that off, so that these meta data information is only shown at the start site (i.e., index.html).
You can change the meta data using template-partials. Add the following to your _quarto.yml file:
template-partials:
- title-block.html
And create the title-block.html file (see here the original file) and change the abstract-title to your liking:
<header id="title-block-header">
<h1 class="title">$title$</h1>
$if(subtitle)$
<p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
<p class="author">$author$</p>
$endfor$
$if(date)$
<p class="date">$date$</p>
$endif$
$if(abstract)$
<div class="abstract">
<div class="abstract-title">How to Cite </div>
$abstract$
</div>
$endif$
</header>
Different Option:
add a css file and change the text via css (usually not recommended):
styles.css
div.abstract-title {
visibility: hidden;
}
div.abstract-title:before {
content: "How to cite";
visibility: visible;
}
Is it possible to somehow tell pandoc to carry the names of styles from original HTML to .docx?
I understand that in order to tune the actual styles, I should be using reference.docx file generated by pandoc. However, reference.docx is limited to what styles it has to: headings, body text, block text, etc.
I'd like to:
specify "myStyle" style in the input HTML (via a "class" attribute, via any other HTML attribute or even via a filter code written in Lua),
<html>
<body>
<p>Hello</p>
<p class="myStyle">World!</p>
</body>
</html>
add a custom "myStyle" to reference.docx using Word,
run a html->docx conversion an expect pandoc generate a paragraph element with "myStyle" (instead of BodyText, which I believe it sets by default), so the end result looks like this (contents of word/document.xml inside the resulting output.docx was cut for brevity):
<w:p>
<w:pPr>
<w:pStyle w:val="BodyText" />
</w:pPr>
<w:r>
<w:txml:space="preserve">Hello</w:t>
</w:r>
</w:p>
<w:p>
<w:pPr>
<w:pStyle w:val="myStyle" />
</w:pPr>
<w:r>
<w:txml:space="preserve">World!</w:t>
</w:r>
</w:p>
There's some evidence styleId can be passed around, but I don't really understand it and am unable to find any documentation about it.
Doc on filtering in Lua states you can access attrs when manipulating a pandoc.div, but it says nothing about whether any of the attrs will be interpreted by pandoc in any meaningful way.
Finally, found what I needed – Custom styles. It's limited, but better than what I arrived earlier, and of course much better than nothing at all :)
I'll leave a step-by-step guide here in case anyone stumbles upon a similar question.
First, generate a reference.docx file like this:
pandoc --print-default-data-file reference.docx > styles.docx
Then open the file in MS Word (I was using a macOS version) you'll see this:
Click the "New style..." button on the right, and create a style to your liking. In my case I made change the style of text to be bold, in blue color:
Since I am converting from HTML to DOCX, here's my input.html:
<html>
<body>
<div>Page 1</div>
<div custom-style="eugene-is-testing">Page 2</div>
<div>Page 3</div>
</body>
</html>
Run:
pandoc --standalone --reference-doc styles.docx --output output.docx input.html
Finally, enjoy the result:
i understand v-cloak is used to display nothing when a new page is loaded.
in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.
this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?
v-cloak is used to do this.
official API：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
tips: written [v-cloak] in #import loaded css file can't work for this problem.
another way: around target tags.
Apart from using [v-cloak] which is a generic way of completely hiding an element until Vue inits, two more usable "tools" are v-text and v-html directives, coupled with computed properties delivering the strings the above directives expect from more complex logic.
Not only do they hide the content until init time, but they can also serve as selectors for the unparsed template elements, as they get removed from the element once Vue parses it. So you could apply backgrounds, width, min-heightto those elements, without the need to spiff your layout with preload classes and remove them on mounted().
An important note here is that transitions won't work on those elements, because Vue purposefully rebuilds the entire DOM of the template once it mounts. If it didn't, enter animations wouldn't work as expected. So there can be no transition from h2[v-text] to h2, because the element is completely replaced. But you can take that into account and start your enter transition from how the [v-text] element was styled.
It's probably not the solution you're looking for (it's more designer's work than programmer's, really) and it's definitely not a magical one liner: it has to be solved on a page by page basis.
But this is how pre-loaders are done (the technique is the same in any modern FE framework, it's just that sometimes you need to spiff your markup with preload classes and remove them on mounted, ngAfterViewInit or componentDidMount).
To be able to style this at your own pace, simply disable JavaScript (or don't init Vue, if you prefer) so you set every detail right. But don't overdo it.
Here's a basic example showing you don't need a whole lot of detail to get a decent effect. It's a matter of roughly matching element heights and coding in some striped CSS backgrounds, really (throw in a blur filter, if you want to get really fancy):
Vue.config.productionTip = false;
Vue.config.devtools = false;
setTimeout(() => {
new Vue({
el: '#app',
data: () => ({
Message: 'Message',
Description: `<p>I'm baby tousled echo park pabst polaroid synth marfa. Migas small batch paleo pop-up street art, chia sriracha cronut ramps succulents portland. YOLO normcore taiyaki organic. Green juice helvetica single-origin coffee polaroid swag selvage schlitz. Artisan la croix unicorn cardigan meh everyday carry wolf thundercats.
<p>Iceland hoodie vice, chicharrones gentrify dreamcatcher ethical jianbing blog truffaut pinterest VHS flannel selfies bushwick. Flannel activated charcoal bespoke master cleanse, chambray tumblr four loko helvetica chicharrones ugh aesthetic irony godard. Beard farm-to-table mumblecore wolf typewriter try-hard shoreditch church-key scenester tousled letterpress yuccie bitters. Selfies +1 man bun, jianbing hell of tote bag crucifix flexitarian. Cronut mumblecore knausgaard meditation authentic lumbersexual listicle pok pok coloring book pitchfork gentrify. +1 offal cronut, flexitarian glossier shoreditch biodiesel stumptown tumeric seitan polaroid.
<p>Narwhal williamsburg adaptogen, four dollar toast retro chillwave occupy kombucha YOLO marfa franzen kogi biodiesel street art next level. Viral blog taxidermy twee echo park roof party. Hammock street art tumeric selvage sartorial. Paleo hashtag activated charcoal, heirloom quinoa cred blog ethical.`
})
})
}, 1000)
#app h2[v-text] {
width: 200px;
background-color: #f8f8f8;
height: 1em;
}
#app div[v-html] {
min-height: 250px;
background-image: repeating-linear-gradient(
180deg,
#fff,
#fff 10px,
#f5f5f5 10px,
#f5f5f5 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2 v-text="Message"></h2>
<div v-html="Description"></div>
</div>
When applying this technique, do not use images, as they require loading as well. Work with CSS only and make sure that CSS is available in <header> (or at least before the app element). Last, but not least, keep in mind your preload has to match your app at all screen widths.
I have a MediaWiki installation (1.23) with the Scribunto extension and Module:Listen. I try to invoke this module from an article like so:
{{Listen
|filename = Noise.ogg
|title = Noise
|description = Some noise
}}
This generates the little infobox, but the embedded sound player itself does not appear. I looked at the generated HTML, and the module is just making a second ordinary href to the file:
<div class="haudio">
<div style="padding:2px 0;">Noise</div>
<div style="padding-right:4px;">File:Noise.ogg</div>
<div class="description" style="padding:2px 0 0 0;">Some noise</div></div>
Rather than the second href to the file, I'd expect to see a or similar. Am I missing some template or Lua module?
You need to have TimedMediaHandler installed for the sound player to show up!
I've been documenting a software package using Sphinx and reStructuredText.
Within my documents, there are some long code snippets. I want to be able to have them hidden as default, with a little "Show/Hide" button that would expand them (Example).
Is there a standard way to do that?
You don't need a custom theme. Use the built-in directive container that allows you to add custom css-classes to blocks and override the existsting theme to add some javascript to add the show/hide-functionality.
This is _templates/page.html:
{% extends "!page.html" %}
{% block footer %}
<script type="text/javascript">
$(document).ready(function() {
$(".toggle > *").hide();
$(".toggle .header").show();
$(".toggle .header").click(function() {
$(this).parent().children().not(".header").toggle(400);
$(this).parent().children(".header").toggleClass("open");
})
});
</script>
{% endblock %}
This is _static/custom.css:
.toggle .header {
display: block;
clear: both;
}
.toggle .header:after {
content: " ▶";
}
.toggle .header.open:after {
content: " ▼";
}
This is added to conf.py:
def setup(app):
app.add_css_file('custom.css')
Now you can show/hide a block of code.
.. container:: toggle
.. container:: header
**Show/Hide Code**
.. code-block:: xml
:linenos:
from plone import api
...
I use something very similar for exercises here: https://training.plone.org/5/mastering-plone/about_mastering.html#exercises
You can use the built-in HTML collapsible details tag by wrapping the code in two raw HTML directives
.. raw:: html
<details>
<summary><a>big code</a></summary>
.. code-block:: python
lots_of_code = "this text block"
.. raw:: html
</details>
Produces:
<details>
<summary><a>big code</a></summary>
<pre>lots_of_code = "this text block"</pre>
</details>
I think the easiest way to do this would be to create a custom Sphinx theme in which you tell certain html elements to have this functionality. A little JQuery would go a long way here.
If, however you want to be able to specify this in your reStructuredText markup, you would need to either
get such a thing included in Sphinx itself or
implement it in a Sphinx/docutils extension...and then create a Sphinx theme which knew about this functionality.
This would be a bit more work, but would give you more flexibility.
There is a very simplistic extension providing exactly that feature: https://github.com/scopatz/hiddencode
It works rather well for me.
The cloud sphinx theme has custom directive html-toggle that provides toggleable sections. To quote from their web page:
You can mark sections with .. rst-class:: html-toggle, which will make the section default to being collapsed under html, with a “show section” toggle link to the right of the title.
Here is a link to their test demonstration page.
sphinx-togglebutton
Looks like a new sphinx extension has been made to do just this since this question has been answered.
Run: pip install sphinx-togglebutton
Add to conf.py
extensions = [
...
'sphinx_togglebutton'
...
]
In rst source file:
.. admonition:: Show/Hide
:class: dropdown
hidden message
since none of the above methods seem to work for me, here's how I solved it in the end:
create a file substitutions.rst in your source-directory with the following content:
.. |toggleStart| raw:: html
<details>
<summary><a> the title of the collapse-block </a></summary>
.. |toggleEnd| raw:: html
</details>
<br/>
add the following line at the beginning of every file you want to use add collapsible blocks
..include:: substitutions.rst
now, to make a part of the code collapsible simply use:
|toggleStart|
the text you want to collapse
..code-block:: python
x=1
|toggleEnd|
Another option is the dropdown directive in the sphinx-design extension. From the docs:
Install sphinx-design
pip install sphinx-design
Add the extension to conf.py in the extensions list
extensions = ["sphinx_design"]
Use the dropdown directive in your rst file:
.. dropdown::
Dropdown content