quarto-dev / quarto-dev/quarto-cli

Code annotation in margin.

Open
#8,211 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

code-annotation enhancement
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

I was asked (here) to make an issue about this.

It would be nice, when making use of sidenote/margin space, to be able to have code annotations placed there.

---
format:
    pdf:
      code-annotations: true
      code-block-bg: "#FFFFE8"
      code-block-border-left: "#DDDDC8"
---

# Normal code annotation

```c
int main() {
  printf("Hello, World!\n"); /* <1> */
  return 0;                  /* <2> */
}
```
1. Say hello.
2. Leave.




# Workaround to use margin

::: {.column-margin}
1. Say hello.
2. Leave.
:::
```c
int main() {
  printf("Hello, World!\n"); /* <1> */
  return 0;                  /* <2> */
}
```

This workaround gives wonky placement in HTML.

Here's the current (main branch on 2023-01-10) output as HTML and PDF.

quarto-code-annotation-workaround-out

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the Markdown example in the issue and compare the linked HTML and PDF outputs, especially the code annotations and column-margin workaround. Determine the relevant rendering entry points before defining how annotations should appear in the margin; done means the requested margin placement works in both formats without the shown HTML misplacement.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript, markdown
Domain
documentation, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.