https://touying-typ.github.io/assets/js/98ce8162.23298150.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1543],{48194:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var i=t(85893),o=t(11151);const s={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install Tinymist LSP in any editor with LSP support; Tinymist also provides a VS Code extension.",source:"@site/docs/start.md",sourceDirName:".",slug:"/start",permalink:"/docs/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/start.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/docs/intro"},next:{title:"Tutorials",permalink:"/docs/category/tutorials"}},l={},c=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install ",(0,i.jsx)(n.a,{href:"https://github.com/Myriad-Dreamin/tinymist",children:"Tinymist LSP"})," in any editor with LSP support; Tinymist also provides a ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"VS Code extension"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(87110).Z+"",width:"3440",height:"1966"}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.university: *\n#import "@preview/cetz:0.5.2"\n#import "@preview/fletcher:0.5.8" as fletcher: node, edge\n#import "@preview/numbly:0.1.0": numbly\n#import "@preview/theorion:0.6.0": *\n#import cosmos.clouds: *\n#show: show-theorion\n\n// fletcher bindings for touying\n#let fletcher-diagram = touying-reduce.with(fletcher)\n\n// explicit bindings no longer needed we can just write `touying-(diagram|reduce)(cetz, {...})`\n//#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let cetz-canvas = touying-reduce.with(cetz)\n\n#show: university-theme.with(\n  aspect-ratio: "16-9",\n  // align: horizon,\n  // config-common(handout: true),\n  config-common(frozen-counters: (theorem-counter,)),  // freeze theorem counter for animation\n  config-info(\n    title: [Title],\n    subtitle: [Subtitle],\n    author: [Authors],\n    date: datetime.today(),\n    institution: [Institution],\n    contact: [contact\\@mail.com],\n    logo: emoji.school,\n  ),\n)\n\n#set heading(numbering: numbly("{1}.", default: "1.1"))\n\n#title-slide()\n\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n  + This is a speaker note.\n  + You won\'t see it unless you use `config-common(show-notes-on-second-screen: right)`\n]\n\n\n== Complex Animation\n\nAt subslide #touying-fn-wrapper((self: none) => str(self.subslide)), we can\n\nuse #uncover("2-")[`#uncover` function] for reserving space,\n\nuse #only("2-")[`#only` function] for not reserving space,\n\n#alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n\n\n== Callback Style Animation\n\n#slide(\n  repeat: 3,\n  self => [\n    #let (uncover, only, alternatives) = utils.methods(self)\n\n    At subslide #self.subslide, we can\n\n    use #uncover("2-")[`#uncover` function] for reserving space,\n\n    use #only("2-")[`#only` function] for not reserving space,\n\n    #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n  ],\n)\n\n\n== Math Equation Animation\n\nEquation with `pause`:\n\n$\n  f(x) &= pause x^2 + 2x + 1 \\\n  &= pause (x + 1)^2 \\\n$\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n  import 

1cetz.draw: *\n\n  rect((0, 0), (5, 5))\n\n  (pause,)\n\n  rect((0, 0), (1, 1))\n  rect((1, 1), (2, 2))\n  rect((2, 2), (3, 3))\n\n  (pause,)\n\n  line((0, 0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n  node-stroke: .1em,\n  node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n  spacing: 4em,\n  edge((-1, 0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n  node((0, 0), `reading`, radius: 2em),\n  edge((0, 0), (0, 0), `read()`, "--|>", bend: 130deg),\n  pause,\n  edge(`read()`, "-|>"),\n  node((1, 0), `eof`, radius: 2em),\n  pause,\n  edge(`close()`, "-|>"),\n  node((2, 0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n  edge((0, 0), (2, 0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theorems\n\n== Prime numbers\n\n#definition[\n  A natural number is called a #highlight[_prime number_] if it is greater\n  than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n  The numbers $2$, $3$, and $17$ are prime.\n  @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem(title: "Euclid")[\n  There are infinitely many primes.\n]\n#pagebreak(weak: true)\n#proof[\n  Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n  of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n  it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n  $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n  contradiction.\n]\n\n#corollary[\n  There is no largest prime number.\n] <cor_largest_prime>\n#corollary[\n  There are infinitely many composite numbers.\n]\n\n#theorem[\n  There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n  For any $n > 2$, consider $\n    n! + 2, quad n! + 3, quad ..., quad n! + n\n  $\n]\n\n\n= Others\n\n== Multiple columns\n\n#cols[\n  First column.\n][\n  Second column.\n]\n\n== Multiple columns with equal height blocks\n\n#cols(columns: (1fr, 1fr), gutter: 1em, lazy-layout: true)[\n  #emph-block[\n    First column with equal height: #lorem(10)\n    #lazy-v(1fr)\n  ]\n][\n  #emph-block[\n    Second column with equal height: : #lorem(15)\n    #lazy-v(1fr)\n  ]\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n#show: appendix\n\n= Appendix\n\n== Appendix\n\nPlease pay attention to the current slide number.\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(83581).Z+"",width:"3440",height:"15560"}),"\n",(0,i.jsxs)(n.p,{children:["Touying offers many built-in themes to easily create beautiful slides. For example, ",(0,i.jsx)(n.code,{children:"#show: university-theme.with()"})," uses the university theme. For more detailed tutorials on themes, you can refer to the following sections."]})]})}function d(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},83581:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/830a3ca1-82c4a32d4d42387e96280cc097695202.png"},87110:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/90be15b0-8f40c708782359d946e5517b354fc27b.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(67294);const o={},s=i.createContext(o);function r(e){const n=i.useContext(s);return i.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:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);