{"id":18043589,"url":"https://github.com/emilhvitfeldt/quarto-roughnotation","last_synced_at":"2026-03-18T01:33:40.042Z","repository":{"id":93528674,"uuid":"534056094","full_name":"EmilHvitfeldt/quarto-roughnotation","owner":"EmilHvitfeldt","description":"An extension that uses the roughnotation javascript library to add animated annotations to revealjs documents.","archived":false,"fork":false,"pushed_at":"2023-09-27T18:54:18.000Z","size":2153,"stargazers_count":67,"open_issues_count":8,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T22:12:07.112Z","etag":null,"topics":["quarto","quarto-extension","quarto-pub","quartopub"],"latest_commit_sha":null,"homepage":"https://emilhvitfeldt.github.io/quarto-roughnotation/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmilHvitfeldt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-09-08T04:56:55.000Z","updated_at":"2025-02-24T07:03:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"94367b03-4b2e-41c7-8da2-64909736c52a","html_url":"https://github.com/EmilHvitfeldt/quarto-roughnotation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilHvitfeldt%2Fquarto-roughnotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilHvitfeldt%2Fquarto-roughnotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilHvitfeldt%2Fquarto-roughnotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilHvitfeldt%2Fquarto-roughnotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmilHvitfeldt","download_url":"https://codeload.github.com/EmilHvitfeldt/quarto-roughnotation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119294,"owners_count":21050755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["quarto","quarto-extension","quarto-pub","quartopub"],"created_at":"2024-10-30T17:09:11.387Z","updated_at":"2026-03-18T01:33:40.029Z","avatar_url":"https://github.com/EmilHvitfeldt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# roughnotation\n\nAn extension that uses the [roughnotation](https://roughnotation.com/) javascript library to add animated annotations to revealjs documents.\n\n## Installation\n\nTo install this extension in your current directory (or into the Quarto project that you're currently working in), use the following command:\n\n``` bash\nquarto install extension EmilHvitfeldt/quarto-roughnotation\n```\n\n## Usage\n\nThe roughnotation extension is implemented as a filter in Quarto. Once installed, using the extension is easy.\n\n### Setup\n\nYou can enable this like:\n\n``` markdown\n---\ntitle: Simple roughnotation setup\nfilters:\n   - roughnotation\n---\n```\n\nThen use the `.rn-fragment` class to specify what elements should be highlighted.\n\n``` markdown\n[Highlight me!]{.rn-fragment}\n```\n\nUse arrow keys or spacebar to trigger annotations during your presentation. You can customize annotations with options like `rn-type` and `rn-color`:\n\n``` markdown\n[underlined phrase]{.rn-fragment rn-type=underline rn-color=red}\n```\n\nFor full documentation and examples, visit the [documentation site](https://emilhvitfeldt.github.io/quarto-roughnotation/).\n\n## Code Chunk Annotations (with Flourish)\n\nYou can annotate specific text within code chunks by combining roughnotation with the [flourish](https://github.com/kbodwin/flourish) extension.\n\n### Setup\n\nInstall both extensions:\n\n```bash\nquarto add EmilHvitfeldt/quarto-roughnotation\nquarto add kbodwin/flourish\n```\n\nAdd both as filters (flourish must come first):\n\n```yaml\n---\ntitle: Code annotations\nfilters:\n  - flourish\n  - roughnotation\n---\n```\n\n### Usage\n\nUse flourish's `style` option to pass roughnotation config via CSS custom properties:\n\n````markdown\n```{r}\n#| flourish:\n#|   - target: \"mean\"\n#|     style: \"--rn-type: circle; --rn-color: red;\"\nx \u003c- c(1, 2, 3, 4, 5)\nmean(x)\n```\n````\n\n### Available Properties\n\n| Property | Example | Description |\n|----------|---------|-------------|\n| `--rn-type` | `circle` | underline, box, circle, highlight, strike-through, crossed-off, bracket |\n| `--rn-color` | `red` | Any CSS color |\n| `--rn-animate` | `true` | Enable/disable animation |\n| `--rn-animationDuration` | `800` | Duration in ms |\n| `--rn-strokeWidth` | `2` | Line thickness |\n| `--rn-padding` | `5` | Space around element |\n| `--rn-multiline` | `true` | Annotate across lines |\n| `--rn-iterations` | `2` | Drawing passes |\n| `--rn-brackets` | `left,right` | Bracket sides |\n| `--rn-index` | `1` | Fragment order |\n\nSee [example-flourish.qmd](https://github.com/EmilHvitfeldt/quarto-roughnotation/blob/main/examples/example-flourish.qmd) for more examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilhvitfeldt%2Fquarto-roughnotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femilhvitfeldt%2Fquarto-roughnotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femilhvitfeldt%2Fquarto-roughnotation/lists"}