https://touying-typ.github.io/assets/js/d287f9e6.ad2f8c3d.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[612],{1344:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var i=t(85893),o=t(11151);const s={sidebar_position:5},a="Codly",r={id:"integration/codly",title:"Codly",description:"Codly is a Typst package that provides beautiful code blocks with language icons, line numbers, and syntax highlighting.",source:"@site/docs/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/docs/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/integration/codly.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/docs/integration/fletcher"},next:{title:"Theorion",permalink:"/docs/integration/theorion"}},c={},d=[{value:"Setup",id:"setup",level:2},{value:"Animated Code Blocks",id:"animated-code-blocks",level:2},{value:"Codly + Animation",id:"codly--animation",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/Dherse/codly",children:"Codly"})," is a Typst package that provides beautiful code blocks with language icons, line numbers, and syntax highlighting."]}),"\n",(0,i.jsx)(n.h2,{id:"setup",children:"Setup"}),"\n",(0,i.jsxs)(n.p,{children:["Because Touying re-renders content on every subslide, ",(0,i.jsx)(n.code,{children:"codly"}),"'s per-page state must be restored before each slide is drawn. Pass the codly initialization as a ",(0,i.jsx)(n.code,{children:"preamble"}),":"]}),"\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#import "@preview/codly:1.3.0": *\n#import "@preview/codly-languages:0.1.10": *\n\n#show: codly-init.with()\n\n#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(preamble: {\n    codly(languages: codly-languages)\n  }),\n)\n\n== First Slide\n\n#raw(lang: "rust", block: true,\n`pub fn main() {\n  println!("Hello, world!");\n}`.text)\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(30291).Z+"",width:"1684",height:"947"}),"\n",(0,i.jsx)(n.h2,{id:"animated-code-blocks",children:"Animated Code Blocks"}),"\n",(0,i.jsxs)(n.p,{children:["You can reveal code line-by-line using ",(0,i.jsx)(n.code,{children:"#pause"})," or ",(0,i.jsx)(n.code,{children:"#only"}),". However, remember that ",(0,i.jsx)(n.code,{children:"#pause"})," does not work inside a ",(0,i.jsx)(n.code,{children:"raw"})," block directly \u2014 use ",(0,i.jsx)(n.code,{children:"touying-raw"})," for animated code:"]}),"\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== Animated Raw Block\n\n#touying-raw(lang: "python", ```\nprint("Step 1")\n// pause\nprint("Step 2")\n// pause\nprint("Step 3")\n```)\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(88450).Z+"",width:"3440",height:"1966"}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"touying-raw"})," uses special comment markers (",(0,i.jsx)(n.code,{children:"// pause"}),", ",(0,i.jsx)(n.code,{children:"// meanwhile"}),") to trigger animation steps, keeping the source readable."]})}),"\n",(0,i.jsx)(n.h2,{id:"codly--animation",children:"Codly + Animation"}),"\n",(0,i.jsxs)(n.p,{children:["For a fully styled codly block with animation, combine ",(0,i.jsx)(n.code,{children:"touying-raw"})," with ",(0,i.jsx)(n.code,{children:"config-common(preamble: ...)"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#show: simple-theme.with(\n  aspect-ratio: "16-9",\n  config-common(preamble: {\n    codly(languages: codly-languages)\n  }),\n)\n\n== Animated Code\n\n#touying-raw(lang: "python", ```\ndef greet(name):\n// pause\n    return f"Hello, {name}

1!"\n// pause\nprint(greet("World"))\n```)\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},88450:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/83b4b74a-c7dfa5ff8fcb1532dfb73a08ba4b767d.png"},30291:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/c1302998-4b179c80f0b20ecd1df1616db420b581.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(67294);const o={},s=i.createContext(o);function a(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);