https://touying-typ.github.io/assets/js/0480b142.ba3ac259.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[836],{98976:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>r});var t=i(85893),o=i(11151);const s={sidebar_position:4},d="Frequently Asked Questions",a={id:"faq",title:"Frequently Asked Questions",description:"Themes and Configuration",source:"@site/docs/faq.md",sourceDirName:".",slug:"/faq",permalink:"/docs/faq",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/faq.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Build Your Own Theme",permalink:"/docs/tutorials/build-your-own-theme"},next:{title:"Package Integration",permalink:"/docs/category/package-integration"}},l={},r=[{value:"Themes and Configuration",id:"themes-and-configuration",level:2},{value:"How do I choose or switch themes?",id:"how-do-i-choose-or-switch-themes",level:3},{value:"How do I customize theme colors?",id:"how-do-i-customize-theme-colors",level:3},{value:"How do I access the current theme colors in slide content?",id:"how-do-i-access-the-current-theme-colors-in-slide-content",level:3},{value:"Layout and Columns",id:"layout-and-columns",level:2},{value:"How do I create a two-column layout?",id:"how-do-i-create-a-two-column-layout",level:3},{value:"How do I place content at an absolute position?",id:"how-do-i-place-content-at-an-absolute-position",level:3},{value:"How do I fit content to fill the remaining slide height or width?",id:"how-do-i-fit-content-to-fill-the-remaining-slide-height-or-width",level:3},{value:"Table of Contents",id:"table-of-contents",level:2},{value:"How do I display a table of contents?",id:"how-do-i-display-a-table-of-contents",level:3},{value:"How do I keep only the main outline and disable automatic section slides?",id:"how-do-i-keep-only-the-main-outline-and-disable-automatic-section-slides",level:3},{value:"How do I add numbering to sections in the outline?",id:"how-do-i-add-numbering-to-sections-in-the-outline",level:3},{value:"How do I show a progressive/highlighted outline?",id:"how-do-i-show-a-progressivehighlighted-outline",level:3},{value:"Bibliography and Citations",id:"bibliography-and-citations",level:2},{value:"How do I show citations as footnotes?",id:"how-do-i-show-citations-as-footnotes",level:3},{value:"How do I add a bibliography slide at the end?",id:"how-do-i-add-a-bibliography-slide-at-the-end",level:3},{value:"Speaker Notes",id:"speaker-notes",level:2},{value:"How do I add speaker notes to a slide?",id:"how-do-i-add-speaker-notes-to-a-slide",level:3},{value:"How do I show speaker notes on a second screen?",id:"how-do-i-show-speaker-notes-on-a-second-screen",level:3},{value:"Slide Numbering and Appendix",id:"slide-numbering-and-appendix",level:2},{value:"How do I display slide numbers in the footer?",id:"how-do-i-display-slide-numbers-in-the-footer",level:3},{value:"How do I mark a slide as unnumbered?",id:"how-do-i-mark-a-slide-as-unnumbered",level:3},{value:"How do I use an appendix so it doesn&#39;t affect the slide count?",id:"how-do-i-use-an-appendix-so-it-doesnt-affect-the-slide-count",level:3},{value:"Animations and Dynamic Content",id:"animations-and-dynamic-content",level:2},{value:"How do I use <code>#pause</code> to reveal content step by step?",id:"how-do-i-use-pause-to-reveal-content-step-by-step",level:3},{value:"How do I show content only on specific subslides?",id:"how-do-i-show-content-only-on-specific-subslides",level:3},{value:"Why doesn&#39;t <code>#pause</code> work inside a <code>context</code> expression?",id:"why-doesnt-pause-work-inside-a-context-expression",level:3},{value:"How do I use <code>#pause</code> inside a CeTZ drawing?",id:"how-do-i-use-pause-inside-a-cetz-drawing",level:3},{value:"How do I use <code>#pause</code> inside a Fletcher diagram?",id:"how-do-i-use-pause-inside-a-fletcher-diagram",level:3},{value:"How do I show alternative content across subslides?",id:"how-do-i-show-alternative-content-across-subslides",level:3},{value:"How do I enable handout mode (no animations)?",id:"how-do-i-enable-handout-mode-no-animations",level:3},{value:"Fonts and Text",id:"fonts-and-text",level:2},{value:"How do I change the font for my presentation?",id:"how-do-i-change-the-font-for-my-presentation",level:3}

1,{value:"How do I justify paragraph text?",id:"how-do-i-justify-paragraph-text",level:3},{value:"Headings and Sections",id:"headings-and-sections",level:2},{value:"How do I disable automatic section slides?",id:"how-do-i-disable-automatic-section-slides",level:3},{value:"How do I write content for sections that have section slides?",id:"how-do-i-write-content-for-sections-that-have-section-slides",level:3},{value:"How do I hide section slides, or keep headings out of outlines/bookmarks?",id:"how-do-i-hide-section-slides-or-keep-headings-out-of-outlinesbookmarks",level:3},{value:"How do I exclude a slide from the outline but still show it?",id:"how-do-i-exclude-a-slide-from-the-outline-but-still-show-it",level:3},{value:"How do I control which heading level creates a new slide?",id:"how-do-i-control-which-heading-level-creates-a-new-slide",level:3},{value:"How do I add a custom header or footer?",id:"how-do-i-add-a-custom-header-or-footer",level:3},{value:"config-common Reference",id:"config-common-reference",level:2},{value:"How do I prevent slide content from overflowing to the next page?",id:"how-do-i-prevent-slide-content-from-overflowing-to-the-next-page",level:3},{value:"How do I use a semi-transparent cover instead of fully hiding content?",id:"how-do-i-use-a-semi-transparent-cover-instead-of-fully-hiding-content",level:3},{value:"How do I use preamble to insert content before every slide?",id:"how-do-i-use-preamble-to-insert-content-before-every-slide",level:3},{value:"How do I use <code>---</code> to separate slides?",id:"how-do-i-use-----to-separate-slides",level:3},{value:"Testing and Development",id:"testing-and-development",level:2},{value:"How do I run Touying&#39;s test suite?",id:"how-do-i-run-touyings-test-suite",level:3},{value:"How do I contribute to Touying?",id:"how-do-i-contribute-to-touying",level:3},{value:"Miscellaneous",id:"miscellaneous",level:2},{value:"How do I set the presentation title, author, date, etc.?",id:"how-do-i-set-the-presentation-title-author-date-etc",level:3},{value:"How do I override the config for a single slide?",id:"how-do-i-override-the-config-for-a-single-slide",level:3},{value:"How do I access global or slide config information?",id:"how-do-i-access-global-or-slide-config-information",level:3},{value:"How do I compile my Touying presentation?",id:"how-do-i-compile-my-touying-presentation",level:3},{value:"How do I create a multi-file presentation?",id:"how-do-i-create-a-multi-file-presentation",level:3},{value:"How do I display the current section name in the header or footer?",id:"how-do-i-display-the-current-section-name-in-the-header-or-footer",level:3},{value:"How do I use Touying with the <code>pinit</code> package for pin annotations?",id:"how-do-i-use-touying-with-the-pinit-package-for-pin-annotations",level:3},{value:"How do I freeze counters (figures, equations) across subslides?",id:"how-do-i-freeze-counters-figures-equations-across-subslides",level:3},{value:"How do I disable/enable warnings?",id:"how-do-i-disableenable-warnings",level:3}];function c(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"frequently-asked-questions",children:"Frequently Asked Questions"}),"\n",(0,t.jsx)(n.h2,{id:"themes-and-configuration",children:"Themes and Configuration"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-choose-or-switch-themes",children:"How do I choose or switch themes?"}),"\n",(0,t.jsxs)(n.p,{children:["Import a theme and apply it with ",(0,t.jsx)(n.code,{children:"#show"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n= Section\n\n== Slide\n\nThis uses the simple theme.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(97982).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsxs)(n.p,{children:["Available themes: ",(0,t.jsx)(n.code,{children:"simple"}),", ",(0,t.jsx)(n.code,{children:"default"}),", ",(0,t.jsx)(n.code,{children:"metropolis"}),", ",(0,t.jsx)(n.code,{children:"aqua"}),", ",(0,t.jsx)(n.code,{children:"dewdrop"}),", ",(0,t.jsx)(n.code,{children:"stargazer"}),", ",(0,t.jsx)(n.code,{children:"university"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-customize-theme-colors",children:"How do I customize theme colors?"}),"\n",(0,t.jsxs)(n.p,{children:["Pass a ",(0,t.jsx)(n.code,{children:"config-colors(...)"})," argument to your theme:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-colors(primary: rgb("#d94f00")),\n  config-info(title: [Custom Color], author: [Author]),\n)\n\n= Section\n\n== Slide\n\nThe header now uses the custom primary color.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(11362).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-access-the-current-theme-colors-in-slide-content",children:"How do I access the current theme colors in slide content?"}),"\n",(0,t.jsxs)(n.p,{children:["Theme colors live on ",(0,t.jsx)(n.code,{children:"self.colors"}),". In ordinary slide content, wrap a function with ",(0,t.jsx)(n.code,{children:"touying-fn-wrapper"})," so Touying can pass the current slide context as ",(0,t.jsx)(n.code,{children:"self"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n= Section\n\n== Slide\n\n#touying-fn-wrapper((self: none) => text(fill: self.colors.primary)[\n  This text uses the current theme\'s primary color.\n])\n\n#touying-fn-wrapper((self: none) => rect(\n  fill: self.colors.secondary,\n  width: 4em,\n  height: 1em,\n))\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(17593).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsxs)(n.p,{children:["If you are writing a theme method or callback that already receives ",(0,t.jsx)(n.code,{children:"self"}),", access colors directly as ",(0,t.jsx)(n.code,{children:"self.colors.primary"}),", ",(0,t.jsx)(n.code,{children:"self.colors.neutral-lightest"}),", and so on."]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"layout-and-columns",children:"Layout and Columns"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-create-a-two-column-layout",children:"How do I create a two-column layout?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"slide"})," with a ",(0,t.jsx)(n.code,{children:"composer"})," argument to split content into columns:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide(composer: (1fr, 1fr))[\n  == Left Column\n\n  Some text on the left side.\n][\n  == Right Column\n\n  Some text on the right side.\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(93398).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsxs)(n.p,{children:["For unequal widths, adjust the fractions, e.g. ",(0,t.jsx)(n.code,{children:"(2fr, 1fr)"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-place-content-at-an-absolute-position",children:"How do I place content at an absolute position?"}),"\n",(0,t.jsxs)(n.p,{children:["Use Typst's ",(0,t.jsx)(n.code,{children:"place"})," function for absolute positioning:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\n#slide[\n  Main slide content here.\n\n  #place(bottom + right, dx: -1em, dy: -1em)[\n    #rect(fill: blue.lighten(80%), inset: 0.5em)[Note]\n  ]\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(64431).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-fit-content-to-fill-the-remaining-slide-height-or-width",children:"How do I fit content to fill the remaining slide height or width?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"utils.fit-to-height"})," or ",(0,t.jsx)(n.code,{children:"utils.fit-to-width"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide[\n  #utils.fit-to-width(1fr)[\n    == This heading fills the slide width\n  ]\n\n  Some content below.\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(57978).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-display-a-table-of-contents",children:"How do I display a table of contents?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"components.adaptive-columns"})," wrapping Typst's built-in ",(0,t.jsx)(n.code,{children:"outline"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= First Section\n\n== Introduction\n\nHello, Touying!\n\n= Second Section\n\n== Details\n\nMore content here.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(60155).Z+"",width:"3440",height:"2937"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"<touying:hidden>"})," label hides the outline slide from the outline itself."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-keep-only-the-main-outline-and-disable-automatic-section-slides",children:"How do I keep only the main outline and disable automatic section slides?"}),"\n",(0,t.jsxs)(n.p,{children:["Some themes generate an automatic section slide (often an outline or section overview) when they see a new top-level section (",(0,t.jsx)(n.code,{children:"="}),"). Disable those generated section slides with ",(0,t.jsx)(n.code,{children:"config-common(new-section-slide-fn: none)"}),", then keep only the main outline slide you write yourself:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.metropolis: *\n\n#show: metropolis-theme.with(\n  aspect-ratio: "16-9",\n  config-common(new-section-slide-fn: none),\n)\n\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= First Section\n\n== First Slide\n\n= Second Section\n\n== Second Slide\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(63261).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-add-numbering-to-sections-in-the-outline",children:"How do I add numbering to sections in the outline?"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"numbly"})," package together with ",(0,t.jsx)(n.code,{children:"#set heading(numbering: ...)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#import "@preview/numbly:0.1.0": numbly\n\n#set heading(numbering: numbly("{1}.", default: "1.1"))\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= First Section\n\n== First Slide\n\n= Second Section\n\n== Second Slide\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(26548).Z+"",width:"3440",height:"2937"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-show-a-progressivehighlighted-outline",children:"How do I show a progressive/highlighted outline?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"components.progressive-outline"})," to highlight the current section:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.dewdrop: *\n\n#show: dewdrop-theme.with(aspect-ratio: "16-9")\n\n= First Section\n\n== Outline\n\n#components.progressive-outline()\n\n= Second Section\n\n== Slide\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(36106).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"bibliography-and-citations",children:"Bibliography and Citations"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-show-citations-as-footnotes",children:"How do I show citations as footnotes?"}),"\n",(0,t.jsxs)(n.p,{children:["Pass a ",(0,t.jsx)(n.code,{children:"bibliography(...)"})," value to ",(0,t.jsx)(n.code,{children:"config-common(show-bibliography-as-footnote: ...)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#let bib = bytes(\n  "@book{knuth,\n    title={The Art of Computer Programming},\n    author={Donald E. Knuth},\n    year={1968},\n    publisher={Addison-Wesley},\n  }",\n)\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(show-bibliography-as-footnote: bibliography(bib)),\n)\n\n= Citations\n\n== Footnote Example\n\nThis is a famous book. @knuth\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(84778).Z+"",width:"3440",height:"995"}

1),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-add-a-bibliography-slide-at-the-end",children:"How do I add a bibliography slide at the end?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"magic.bibliography(...)"})," to display a references slide:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#let bib = bytes(\n  "@book{knuth,\n    title={The Art of Computer Programming},\n    author={Donald E. Knuth},\n    year={1968},\n    publisher={Addison-Wesley},\n  }",\n)\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(show-bibliography-as-footnote: bibliography(bib)),\n)\n\n= Intro\n\n== Slide\n\nSome cited content. @knuth\n\n== References\n\n#magic.bibliography(title: none)\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(37253).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-add-speaker-notes-to-a-slide",children:"How do I add speaker notes to a slide?"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"#speaker-note[...]"})," function anywhere in a slide:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide[\n  == My Slide\n\n  Visible content here.\n\n  #speaker-note[\n    - Remind the audience of the previous topic.\n    - Emphasize the key takeaway.\n    - Time check: should be at 10 min mark.\n  ]\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(80130).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.p,{children:"Speaker notes do not appear in the slide output by default."}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-show-speaker-notes-on-a-second-screen",children:"How do I show speaker notes on a second screen?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-common(show-notes-on-second-screen: right)"})," to show notes beside the slides:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(show-notes-on-second-screen: right),\n)\n'})}),"\n",(0,t.jsxs)(n.p,{children:["This is compatible with presenter tools like ",(0,t.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"})," and ",(0,t.jsx)(n.a,{href:"https://github.com/Cimbali/pympress",children:"pympress"}),"."]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"slide-numbering-and-appendix",children:"Slide Numbering and Appendix"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-display-slide-numbers-in-the-footer",children:"How do I display slide numbers in the footer?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"utils.slide-counter.display()"})," for the current slide number and ",(0,t.jsx)(n.code,{children:"utils.last-slide-number"})," for the total:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-page(\n    footer: context [\n      #utils.slide-counter.display() / #utils.last-slide-number\n    ],\n  ),\n)\n\n= Section\n\n== First Slide\n\nThe footer shows the slide number.\n\n== Second Slide\n\nStill counting.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(24649).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-mark-a-slide-as-unnumbered",children:"How do I mark a slide as unnumbered?"}),"\n",(0,t.jsxs)(n.p,{children:["Add the ",(0,t.jsx)(n.code,{children:"<touying:unnumbered>"})," label to the heading:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n= Title Slide <touying:unnumbered>\n\n== Welcome\n\nThis slide is not counted.\n\n== Normal Slide\n\nThis slide is counted.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(3439).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-use-an-appendix-so-it-doesnt-affect-the-slide-count",children:"How do I use an appendix so it doesn't affect the slide count?"}),"\n",(0,t.jsxs)(n.p,{children:["Apply ",(0,t.jsx)(n.code,{children:"#show: appendix"})," after your main content. Slides after this point do not increment the slide counter:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n= Main Content\n\n== Introduction\n\nThis is slide 1.\n\n== Results\n\nThis is slide 2.\n\n#show: appendix\n\n= Appendix\n\n== Extra Material\n\nThis slide is in the appendix and does not increment the main counter.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(62254).Z+"",width:"3440",height:"2937"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"animations-and-dynamic-content",children:"Animations and Dynamic Content"}),"\n",(0,t.jsxs)(n.h3,{id:"how-do-i-use-pause-to-reveal-content-step-by-step",children:["How do I use ",(0,t.jsx)(n.code,{children:"#pause"})," to reveal content step by step?"]}),"\n",(0,t.jsxs)(n.p,{children:["Place ",(0,t.jsx)(n.code,{children:"#pause"})," between content blocks within a ",(0,t.jsx)(n.code,{children:"#slide"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide[\n  First point.\n\n  #pause\n\n  Second point revealed on click.\n\n  #pause\n\n  Third point revealed on second click.\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(52303).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-show-content-only-on-specific-subslides",children:"How do I show content only on specific subslides?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:'#only("...")'})," to show content on particular subslides, or ",(0,t.jsx)(n.code,{children:'#uncover("...")'})," to show it while reserving its space:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\n#slide[\n  #only("1")[Shown on subslide 1 only.]\n  #only("2-")[Shown from subslide 2 onward.]\n  #uncover("3-")[Revealed on subslide 3, space reserved before.]\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(56047).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsxs)(n.h3,{id:"why-doesnt-pause-work-inside-a-context-expression",children:["Why doesn't ",(0,t.jsx)(n.code,{children:"#pause"})," work inside a ",(0,t.jsx)(n.code,{children:"context"})," expression?"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"#pause"})," uses metadata injection that does not work inside ",(0,t.jsx)(n.code,{children:"context { ... }"})," blocks. Use the callback-style ",(0,t.jsx)(n.code,{children:"slide"})," instead to access ",(0,t.jsx)(n.code,{children:"self.subslide"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide(self => {\n  let (uncover, only) = utils.methods(self)\n  [First content.]\n  linebreak()\n  uncover("2-")[Revealed on subslide 2.]\n  linebreak()\n  only("3")[Only on subslide 3.]\n})\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(16775).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsxs)(n.h3,{id:"how-do-i-use-pause-inside-a-cetz-drawing",children:["How do I use ",(0,t.jsx)(n.code,{children:"#pause"})," inside a CeTZ drawing?"]}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"touying-reduce"})," or the alias ",(0,t.jsx)(n.code,{children:"touying-diagram"})," to wrap CeTZ canvas so Touying can animate it:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/cetz:0.5.2"\n\n#let cetz-canvas = touying-reduce.with(cetz)\n\n#slide[\n  #cetz-canvas({\n    import cetz.draw: *\n    rect((0, 0), (4, 3))\n    (pause,)\n    circle((2, 1.5), radius: 1)\n  })\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(45130).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsxs)(n.h3,{id:"how-do-i-use-pause-inside-a-fletcher-diagram",children:["How do I use ",(0,t.jsx)(n.code,{children:"#pause"})," inside a Fletcher diagram?"]}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"touying-reduce"})," to wrap Fletcher diagrams so Touying can automatically find the Fletcher reducer bindings:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/fletcher:0.5.8" as fletcher: diagram, node, edge\n\n#let fletcher-diagram = touying-reduce.with(fletcher)\n\n#slide[\n  #fletcher-diagram(\n    node((0, 0), [A]),\n    edge("->"),\n    (pause,),\n    node((1, 0), [B]),\n  )\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(89413).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsx)(n.p,{children:"(we cannot provide the same easy syntax atm as fletcher does not expose its package name)"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-show-alternative-content-across-subslides",children:"How do I show alternative content across subslides?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"#alternatives"})," to swap between different content versions:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide[\n  The answer is: #alternatives[42][*forty-two*][_the ultimate answer_].\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(51552).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-enable-handout-mode-no-animations",children:"How do I enable handout mode (no animations)?"}),"\n",(0,t.jsxs)(n.p,{children:["Set ",(0,t.jsx)(n.code,{children:"config-common(handout: true)"})," in your theme setup:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(handout: true),\n)\n'})}),"\n",(0,t.jsx)(n.p,{children:"In handout mode, only the final subslide of each slide is output."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"fonts-and-text",children:"Fonts and Text"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-change-the-font-for-my-presentation",children:"How do I change the font for my presentation?"}),"\n",(0,t.jsxs)(n.p,{children:["Use a ",(0,t.jsx)(n.code,{children:"#set text(...)"})," rule before or after your theme setup:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.metropolis: *\n\n#show: metropolis-theme.with(\n  aspect-ratio: "16-9",\n  config-info(title: [Custom Font]),\n)\n\n#set text(font: "New Computer Modern", size: 22pt)\n\n= Section\n\n== Slide\n\nText now uses the custom font.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(21828).Z+"",width:"3440",height:"995"}),"\n",(0,t.jsx)(n.p,{children:"For math, also set the math font:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#show math.equation: set text(font: "New Computer Modern Math")\n'})}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-justify-paragraph-text",children:"How do I justify paragraph text?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"#set par(justify: true)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#set par(justify: true)\n\n#slide[\n  == Justified Text\n\n  #lorem(40)\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(8253).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"headings-and-sections",children:"Headings and Sections"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-disable-automatic-section-slides",children:"How do I disable automatic section slides?"}),"\n",(0,t.jsxs)(n.p,{children:["Set ",(0,t.jsx)(n.code,{children:"config-common(new-section-slide-fn: none)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.metropolis: *\n\n#show: metropolis-theme.with(\n  aspect-ratio: "16-9",\n  config-common(new-section-slide-fn: none),\n  config-info(title: [No Auto Sections]),\n)\n\n= Section\n\n== Slide\n\nNo automatic section slide was created for the `= Section` heading.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(34621).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-write-content-for-sections-that-have-section-slides",children:"How do I write content for sections that have section slides?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"pagebreak()"})," or ",(0,t.jsx)(n.code,{children:"---"})," to force a new page for that section and write there."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'>>>#import "@preview/touying:0.7.4": *\n>>>#import themes.metropolis: *\n>>>#show: metropolis-theme.with(\n>>>)\n\n= Section\n---\nHere is my content for this section.\n\n== Slide\nAnd this works normally.\n'})}),"\n",(0,t.jsxs)(n.p,{children:["You may also set ",(0,t.jsx)(n.code,{children:"config-common(receive-body-for-new-section-slide-fn: false)"}),". This however will prevent you from writing speaker-notes for the section slide."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-hide-section-slides-or-keep-headings-out-of-outlinesbookmarks",children:"How do I hide section slides, or keep headings out of outlines/bookmarks?"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"<touying:hidden>"})," does not remove the ordinary slide content under that heading from the PDF output. It makes the generated invisible heading unnumbered, unoutlined, and unbookmarked, and it skips the automatic section/subsection slide that the heading would otherwise trigger."]}),"\n",(0,t.jsx)(n.p,{children:"This makes it suitable for slides such as an outline slide that should remain in the PDF, but should not appear in outlines/bookmarks or create an extra section slide:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= First Section\n\n== First Slide\n\nHello, Touying!\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(8157).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.p,{children:"If you need to temporarily remove a slide, delete or comment out the corresponding content."}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-exclude-a-slide-from-the-outline-but-still-show-it",children:"How do I exclude a slide from the outline but still show it?"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"<touying:unoutlined>"})," label:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= Section\n\n== Normal Slide\n\nAppears in the outline.\n\n== Interstitial Slide <touying:unoutlined>\n\nThis slide shows but is not listed in the outline.\n\n== Another Normal Slide\n\nAlso appears in the outline.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(67664).Z+"",width:"3440",height:"2937"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-control-which-heading-level-creates-a-new-slide",children:"How do I control which heading level creates a new slide?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-common(slide-level: ...)"}),". The default varies by theme:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(slide-level: 2),\n)\n\n= Section\n\nThis text is part of the section slide.\n\n== Subsection Slide\n\nEach `==` heading creates a new slide.\n\n=== Sub-subheading\n\nSub-subheadings do not create new slides.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(77104).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-add-a-custom-header-or-footer",children:"How do I add a custom header or footer?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-page(header: ..., footer: ...)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.default: *\n\n#show: default-theme.with(\n  aspect-ratio: "16-9",\n  config-page(\n    header: text(gray)[My Custom Header],\n    footer: context align(right, text(gray)[\n      Slide #utils.slide-counter.display()\n    ]),\n  ),\n)\n\n= Section\n\n== Slide\n\nSlide with a custom header and footer.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(71424).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"config-common-reference",children:"config-common Reference"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-prevent-slide-content-from-overflowing-to-the-next-page",children:"How do I prevent slide content from overflowing to the next page?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-common(breakable: false)"})," to prevent slide content from automatically overflowing to the next page. By default (",(0,t.jsx)(n.code,{children:"breakable: true"}),"), content that exceeds the slide height creates new pages. When set to ",(0,t.jsx)(n.code,{children:"false"}),", content is constrained to a single page using a non-breakable block, which is useful for ensuring a strict one-to-one mapping between source slides and output pages \u2014 especially in agentic workflows where an agent needs to reason about slide boundaries."]}),"\n",(0,t.jsx)(n.p,{children:"Related parameters:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.code,{children:"clip"})})," (default ",(0,t.jsx)(n.code,{children:"false"}),"): When ",(0,t.jsx)(n.code,{children:"true"}),", content that exceeds the slide height is visually truncated."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.code,{children:"detect-overflow"})})," (default ",(0,t.jsx)(n.code,{children:"true"}),"): When ",(0,t.jsx)(n.code,{children:"true"}),", a layout measurement is performed and ",(0,t.jsx)(n.code,{children:"panic()"}

1)," is called if the content height exceeds the available slide height, making it easy to catch overflow early. Set to ",(0,t.jsx)(n.code,{children:"false"})," to avoid the extra layout overhead."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"// Prevent overflow, panic on overflow (default behavior when breakable: false)\n#show: simple-theme.with(\n  config-common(breakable: false),\n)\n\n// Prevent overflow and visually clip overflowing content\n#show: simple-theme.with(\n  config-common(breakable: false, clip: true),\n)\n\n// Prevent overflow, disable overflow detection (performance-first)\n#show: simple-theme.with(\n  config-common(breakable: false, detect-overflow: false),\n)\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can also switch these settings mid-presentation using ",(0,t.jsx)(n.code,{children:"touying-set-config"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"== This slide's overflow will be clipped\n\n// Enable clipping for a specific slide\n#show: touying-set-config.with(config-common(clip: true))\n\n#lorem(500)\n"})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(76698).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-use-a-semi-transparent-cover-instead-of-fully-hiding-content",children:"How do I use a semi-transparent cover instead of fully hiding content?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-methods(cover: utils.semi-transparent-cover)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-methods(cover: utils.semi-transparent-cover),\n)\n\n= Section\n\n== Slide\n\n#pause\nThis content is shown with a semi-transparent cover.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(29277).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-use-preamble-to-insert-content-before-every-slide",children:"How do I use preamble to insert content before every slide?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-common(preamble: ...)"})," and ",(0,t.jsx)(n.code,{children:"subslide-preamble"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(\n    preamble: text(gray)[This appears before every slide],\n    subslide-preamble: (2: [Special prelude for subslide 2]),\n  ),\n)\n\n= Section\n\n== Slide\n\nContent here.\n\n#pause\n\nMore content.\n'})}),"\n",(0,t.jsxs)(n.h3,{id:"how-do-i-use-----to-separate-slides",children:["How do I use ",(0,t.jsx)(n.code,{children:"---"})," to separate slides?"]}),"\n",(0,t.jsxs)(n.p,{children:["Set ",(0,t.jsx)(n.code,{children:"horizontal-line-to-pagebreak: true"})," (default) and use ",(0,t.jsx)(n.code,{children:"---"})," to create page breaks:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(horizontal-line-to-pagebreak: true),\n)\n\n= First Section\n\n== Slide One\n\nContent here.\n\n---\n\n== Slide Two\n\nSeparated by horizontal rule.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(49977).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"testing-and-development",children:"Testing and Development"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-run-touyings-test-suite",children:"How do I run Touying's test suite?"}),"\n",(0,t.jsxs)(n.p,{children:["Touying uses the ",(0,t.jsx)(n.a,{href:"https://github.com/Myriad-Dreamin/tytanic",children:"tytanic"})," test framework. Install it with:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"cargo binstall tytanic\n"})}),"\n",(0,t.jsx)(n.p,{children:"Run tests with:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"tt run\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Tests are organized in the ",(0,t.jsx)(n.code,{children:"tests/"})," directory:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"features/"})," \u2014 Feature tests for core functionality"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"themes/"})," \u2014 Theme-specific tests"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"integration/"})," \u2014 Third-party package integration tests (cetz, fletcher, pinit, theorion, codly, mitex)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"issues/"})," \u2014 Regression tests for reported issues"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"examples/"})," \u2014 Example tests from the documentation"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-contribute-to-touying",children:"How do I contribute to Touying?"}),"\n",(0,t.jsx)(n.p,{children:"To contribute to Touying:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Fork the repository on GitHub"}),"\n",(0,t.jsx)(n.li,{children:"Create a new branch for your changes"}),"\n",(0,t.jsx)(n.li,{children:"Make your changes following the existing code style"}

1),"\n",(0,t.jsxs)(n.li,{children:["Format your code with ",(0,t.jsx)(n.a,{href:"https://github.com/Myriad-Dreamin/typstyle",children:"typstyle"})]}),"\n",(0,t.jsxs)(n.li,{children:["Run ",(0,t.jsx)(n.code,{children:"tt run"})," to ensure all tests pass"]}),"\n",(0,t.jsx)(n.li,{children:"Submit a pull request with a clear description of your changes"}),"\n"]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h2,{id:"miscellaneous",children:"Miscellaneous"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-set-the-presentation-title-author-date-etc",children:"How do I set the presentation title, author, date, etc.?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"config-info(...)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.metropolis: *\n\n#show: metropolis-theme.with(\n  aspect-ratio: "16-9",\n  config-info(\n    title: [My Presentation],\n    subtitle: [A Subtitle],\n    author: [Jane Doe],\n    date: datetime.today(),\n    institution: [My University],\n    contact: [contact\\@mail.com],\n  ),\n)\n\n#title-slide()\n\n= Introduction\n\n== First Slide\n\nContent here.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(97595).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-override-the-config-for-a-single-slide",children:"How do I override the config for a single slide?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"touying-set-config"})," around the content you want to change:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme\

1n#slide[\n  Normal slide.\n]\n\n#touying-set-config(config-page(fill: rgb("#fff3cd")))[\n  #slide[\n    This slide has a yellow background.\n  ]\n]\n\n#slide[\n  Back to normal.\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(62481).Z+"",width:"3440",height:"1966"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-access-global-or-slide-config-information",children:"How do I access global or slide config information?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"touying-get-config"})," at the position you want to know the config. The config is only accessible during ",(0,t.jsx)(n.code,{children:"context"})," time, thus computing with this may lead to problems."]}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsx)(n.p,{children:"If you write this inside a slide that has local config, the local config will be returned instead of the global config."}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#show: simple-theme.with(\n  config-info(author: "Beautiful Name")\n)\n#slide(config:config-colors(primary: rgb("ABCDEF")))[\n  #touying-get-config().info.author\n  \n  #touying-get-config().colors.primary\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(40313).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-compile-my-touying-presentation",children:"How do I compile my Touying presentation?"}),"\n",(0,t.jsx)(n.p,{children:"Touying is a pure Typst package \u2014 there is no separate build step:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"typst compile slides.typ\n"})}),"\n",(0,t.jsx)(n.p,{children:"For live preview during editing:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"typst watch slides.typ\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Or use the ",(0,t.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," VS Code extension for instant in-editor preview."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-create-a-multi-file-presentation",children:"How do I create a multi-file presentation?"}),"\n",(0,t.jsxs)(n.p,{children:["Import ",(0,t.jsx)(n.code,{children:"lib.typ"})," from the main entry file and use ",(0,t.jsx)(n.code,{children:"include"})," for sections:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n#include "intro.typ"\n#include "methods.typ"\n#include "results.typ"\n'})}),"\n",(0,t.jsx)(n.p,{children:"Each included file uses headings normally \u2014 no extra imports needed in each file."}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-display-the-current-section-name-in-the-header-or-footer",children:"How do I display the current section name in the header or footer?"}),"\n",(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"utils.display-current-heading(...)"})," or ",(0,t.jsx)(n.code,{children:"utils.display-current-short-heading(...)"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.default: *\n\n#show: default-theme.with(\n  aspect-ratio: "16-9",\n  config-page(\n    header: context text(gray)[\n      #utils.display-current-heading(level: 1)\n    ],\n  ),\n)\n\n= My Section\n\n== Slide\n\nThe header shows the current section name.\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(43428).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsxs)(n.h3,{id:"how-do-i-use-touying-with-the-pinit-package-for-pin-annotations",children:["How do I use Touying with the ",(0,t.jsx)(n.code,{children:"pinit"})," package for pin annotations?"]}),"\n",(0,t.jsxs)(n.p,{children:["Import both packages and use ",(0,t.jsx)(n.code,{children:"#pin"}),"/",(0,t.jsx)(n.code,{children:"#pinit-highlight"})," inside slides as normal:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import "@preview/pinit:0.2.2": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n#slide[\n  A #pin(1)key term#pin(2) to highlight.\n\n  #pinit-highlight(1, 2)\n]\n'})}),"\n",(0,t.jsx)(n.img,{alt:"Touying example output",src:i(79243).Z+"",width:"1684",height:"947"}),"\n",(0,t.jsxs)(n.p,{children:["For animated pin reveals, use the callback-style slide so ",(0,t.jsx)(n.code,{children:"#pause"})," interacts correctly with pinit."]}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-freeze-counters-figures-equations-across-subslides",children:"How do I freeze counters (figures, equations) across subslides?"}),"\n",(0,t.jsxs)(n.p,{children:["Touying freezes common counters between subslides by default. To freeze additional counters, pass a counter array to ",(0,t.jsx)(n.code,{children:"frozen-counters"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#show: simple-theme.with(\n  config-common(frozen-counters: (counter("my-custom-counter"),)),\n)\n'})}),"\n",(0,t.jsx)(n.h3,{id:"how-do-i-disableenable-warnings",children:"How do I disable/enable warnings?"}),"\n",(0,t.jsxs)(n.p,{children:["Touying uses ",(0,t.jsx)(n.code,{children:"uniwarn"})," for its warnings with the namespace ",(0,t.jsx)(n.code,{children:"touying"}),".\nWe bind the functions into touying so you can directly do"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n\n//to disable the warnings emitted by touying\n#touying-disable-warnings\n//to reenable the warnings emitted by touying\n#touying-enable-warnings\n'})}),"\n",(0,t.jsx)(n.p,{children:"But you can also do"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/uniwarn:0.1.0"\n#uniwarn.disable-warnings("touying")\n#uniwarn.enable-warnings("touying")\n'})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},34621:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/06a05a1e-4a88de0674c3c5f572ecdfaffe39fbef.png"},97982:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/08ab9691-d45d76cb5a02dd47f3c214c8d16aab23.png"},64431:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/099d1301-dffd84701d476c37a67debed88f437ce.png"},8253:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/09eeb6f1-5edd10741c48a3ec02c814acc57d3faf.png"},37253:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/0db046d0-f1a09a3570a5b3a55c881b14892fd580.png"},24649:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/0ed0e40c-940c2250c2463bea8fad50437080215a.png"}

1,57978:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/0f2c1d69-38c5d1fb631ebed5e86127fb05a766b5.png"},56047:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/169647da-8af3a6e188e1a48d03855fa9a244e1a1.png"},62481:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/1e9ef82b-42aeb248c131f1f7e99526efeb28d009.png"},63261:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/1f19017a-e13a28045f8b891d1725cf6f74fed2a0.png"},51552:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/4a528a56-42aa7ad3ec5386ff5abf929d8ccb2705.png"},43428:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/53488324-ec93ac4e7efcc242b34ed8f62e0acd30.png"},11362:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/5c8e735e-6e4806d17102bd2f9ecd6ab77a5ecb70.png"},77104:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/62e12925-493959860bd3ad2b9017655d897ad468.png"},60155:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/68cc713e-4774e8be4ce4d242dc2a3566ba194c5f.png"},29277:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/7582e25f-f942b3db0cd7943ec0de5897774ef7c0.png"},80130:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/7b31b166-66a106b03b791d5eacd9cd5ef5e86cfe.png"},52303:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/96af6acb-24e2cd221ce84320322974ea863097b5.png"},93398:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/9ddd3f34-8d1b0c920da578bd19db6cff563b0e7c.png"},84778:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/ab0033fe-63c2bb7c5d57a46af18888c287e040e0.png"},3439:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/b57f2956-8d99c7ab3d464c7da903ba7bad9d2acf.png"},40313:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/b855f506-ecf5b28cd9b9d68ccfc3723c407fdb87.png"},26548:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/bc3809bb-a7f65d8143c49e50673512050c6c1e5e.png"},49977:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/c7147769-9c96d668922e8d220d0e819024bacf04.png"},89413:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/d02b6d20-0d9d327787637183d6ce1e31763aa941.png"},17593:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/d0bb4d98-f197f02ed402c51c4928ac15913bb4ff.png"},36106:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/d3f5fac1-d53a2a58cf483bcc425954c230f42fb2.png"},97595:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/d6efa9a8-b5ec8bd752617b381df31f6a6a11badd.png"},76698:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/d84c9091-bfd8e3a894927da8b6d8b1f83e58fee0.png"},67664:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/dc407350-41ec2382fb3533f0ee98194b66194442.png"},21828:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/dfee1d07-49b6c3dfc554ad080fa4e4dbaf42d6d7.png"},79243:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/e057e45d-dd7571739d05c8f3b9483ee528731aef.png"},71424:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/ed7c68da-8da9c99cfcb73cc6cd5490b78bde1a55.png"},16775:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/f06a9ef0-77149f38760e42dc7b87a67465b8dd7c.png"},62254:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/f1ceca26-29fdc046cf1aefcd767fae8e9dfb2709.png"},45130:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/f402d6b1-f7df27a4568a2d0e6907dbc372b7076f.png"},8157:(e,n,i)=>{i.d(n,{Z:()=>t});const t=i.p+"assets/images/f44b8485-da0d19e95d1d7c96b1e777b31191da4a.png"},11151:(e,n,i)=>{i.d(n,{Z:()=>a,a:()=>d});var t=i(67294);const o={},s=t.createContext(o);function d(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);