Connect a word in one QMD file to a word in another QMD file with a hyperlink

As I work on creating a Quarto book, I am looking to link key terms in the book to corresponding definitions in a glossary. The challenge is to ensure that these links function properly in both HTML and PDF formats. Below are some methods I have explored so far.

Let's consider a scenario where my project comprises two files:

  1. chapter.qmd
  2. glossary.qmd

Method 1: Linking to Glossary Headings

To define a term like data frame in the glossary, I converted it into a heading with an assigned ID in glossary.qmd.

## Data frame {#glossary-data-frame .unnumbered}

I then linked to this heading within the narrative of chapter.qmd.

We want to define the term [data frame](glossary.qmd#glossary-data-frame) in the glossary.

While effective, having each glossary term listed as a heading can clutter the table of contents in the PDF version, especially with numerous terms.

Method 2: Using Anchor Tags

Inspired by a post on Stack Overflow, I experimented with anchor tags in glossary.qmd instead of headings. Additionally, I applied CSS styling to enhance the appearance of linked terms in the glossary. Here's an example:

.glossary-term {
  font-size: 14pt;
  font-weight: bold;
}
<a name="glossary-data-frame">
  <span class="glossary-term">
    Data frame
  </span>
</a>

Once again, I referenced these anchors within the narrative of chapter.qmd.

We want to define the term [data frame](glossary.qmd#glossary-data-frame) in the glossary.

While this method works well for the HTML version, the functionality of links and CSS styling does not carry over to the PDF version. I'm currently seeking solutions to address this issue.

If you have insights on:

  1. Removing glossary terms from the PDF table of contents using Method 1,
  2. Activating links and adjusting font styles in the PDF version when utilizing Method 2, or
  3. Any alternative approaches that could achieve the desired outcome,

I would greatly appreciate your input and suggestions. Thank you for your time and consideration!

You can also find this question on Posit Community.

Answer №1

Instead of making a section just to link to the glossary:

Pandoc actually has built-in support for definition lists, which will be rendered as description list (<dl>) elements in HTML output. -- big thanks to Salim!

# Glossary {.unnumbered}

[Data frame]{#glossary-data-frame}

:   A data frame consists of columns and rows.

The glossary, without its details, will be generated:

https://i.sstatic.net/ybdnj.png

This method will function well in both PDF and HTML:

https://i.sstatic.net/HFZRp.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Markdown in Vue.js filters

I found a helpful example by Evan You on how to convert HTML to markdown - check it out here. However, when trying to install the marked package via npm and implementing it, I encountered an error stating that 'marked' is not defined. After inc ...

Using Ionic framework alongside Ionic View to display a beautiful background image

How can I display a full background image in Ionic 1.2? -hooks -platfroms -plugins -resources -scss -www -css -img -js -lib -templates ... Currently, I have the following HTML structure: <ion-view id="login" hide-nav-bar="true"> ...

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

What is causing my button to act in this way?

Initially, the website redirects to an undefined URL and then to test.com. I am looking for a way to implement a redirection sequence from to and finally to <head> <script type="text/javascript"> <!-- function popup(url ...

Flawless Carousel - Flipping the Sequence

I am currently implementing Slick Carousel on a website that I am working on. One challenge I am encountering is trying to get the "slider-nav" to move in the opposite direction than it normally does. For instance, at the moment, the order goes like this ...

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

What could be causing coalesce() in R to unexpectedly produce additional values?

I am currently experimenting with the coalesce() function. Here's an example dataset along with reproducible code: Country X2016 X2017 X2018 1 Australia 10 NA 12 2 UK 15 20 NA 3 USA NA 40 NA Using two vect ...

Stripping particular labels off a string in R

I checked out some similar questions and tried to apply the solutions to my situation, but unfortunately they didn't work. So, I'm wondering - how can I successfully remove the <\/p>\r\n<p> sequence from a string? Here ...

When transformed into clickable links, the list items start piling up on

Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...

What could be causing my object to not be added properly to a select element using JavaScript programmatically?

When it comes to customizing your pizza, the options are endless. From selecting the type of crust to choosing your favorite toppings, every detail matters. One common issue that arises is when changing the crust type affects the available sizes ...

At times, certain commands fail to complete after updating to R 4.0 on Ubuntu 20.04

Recently, I updated R (from version 3.6 to 4.0), RStudio (from version 1.1 to 1.2.5), and Ubuntu (from version 18.04 to 20.04). Since the updates, there has been an issue where R sometimes does not terminate when running specific commands such as ivreg (f ...

Struggling to vertically center input within Bootstrap 4 column

I'm attempting to design some form elements and align the inputs vertically within the columns. I've experimented with vertical-align:middle; and margin:auto 0;, however, neither of these solutions seem to be effective. input { vertical-alig ...

Troubleshooting the lack of functionality with justify-items in CSS Grid

I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start. Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my tex ...

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

Cross-origin resource sharing policy preventing ajax request

Seeking help with my simple code for making an ajax request. Initially tried using a .txt file and encountered a CORS error. Switched to using a php file with header("Access-Control-Allow-Origin: *") but still facing issues. Searched through numerous SO po ...

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

Include numerous values within a hyperlink

Is there a way to pass three values through a link without displaying them in the URL? ...

elements of bootstrap overlapping one another

I have created a website using Bootstrap, which can be accessed at this link. The homepage is experiencing alignment issues, with sections colliding with each other. To prevent this collision, I had to add margin-top like the example below: ...