https://motioncanvas.io/assets/js/eb5af6d7.c931c1d4.js

1var _____WB$wombat$assign$function_____=function(name){return (globalThis._wb_wombat && globalThis._wb_wombat.local_init && globalThis._wb_wombat.local_init(name))||globalThis[name];};if(!globalThis.__WB_pmw){globalThis.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
2let window = _____WB$wombat$assign$function_____("window");
3let self = _____WB$wombat$assign$function_____("self");
4let document = _____WB$wombat$assign$function_____("document");
5let location = _____WB$wombat$assign$function_____("location");
6let top = _____WB$wombat$assign$function_____("top");
7let parent = _____WB$wombat$assign$function_____("parent");
8let frames = _____WB$wombat$assign$function_____("frames");
9let opener = _____WB$wombat$assign$function_____("opener");
10"use strict";(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[1576],{876:(e,n,t)=>{t.d(n,{Zo:()=>s,kt:()=>h});var o=t(2784);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function r(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var d=o.createContext({}),c=function(e){var n=o.useContext(d),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=c(e.components);return o.createElement(d.Provider,{value:n},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,a=e.mdxType,l=e.originalType,d=e.parentName,s=r(e,["components","mdxType","originalType","parentName"]),p=c(t),u=a,h=p["".concat(d,".").concat(u)]||p[u]||m[u]||l;return t?o.createElement(h,i(i({ref:n},s),{},{components:t})):o.createElement(h,i({ref:n},s))}));function h(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var l=t.length,i=new Array(l);i[0]=u;var r={};for(var d in n)hasOwnProperty.call(n,d)&&(r[d]=n[d]);r.originalType=e,r[p]="string"==typeof e?e:a,i[1]=r;for(var c=2;c<l;c++)i[c]=t[c];return o.createElement.apply(null,i)}return o.createElement.apply(null,t)}u.displayName="MDXCreateElement"},2665:(e,n,t)=>{t.d(n,{Z:()=>k});var o=t(2784);const a="container_lQCo",l="small_As57",i="banner_A4QS",r="player_tELG",d="link_BTzN",c="icon_wSGd";var s=t(7896);function p(e){let{width:n=24,height:t=24,...a}=e;return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:n,height:t,"aria-hidden":!0},a),o.createElement("path",{d:"M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",fill:"currentColor"}))}var m=t(9817),u=t(6277);function h(e){let{name:n}=e;const t=`http://web.archive.org/web/20230317133404/https://github.com/motion-canvas/motion-canvas/blob/main/packages/examples/src/scenes/${n}.tsx`;return o.createElement(m.Z,{to:t,className:(0,u.Z)("padding--sm",d)},o.createElement("span",null,"View source code"),o.createElement(p,{className:c}))}function k(e){let{name:n,banner:t,small:d,link:c}=e;return o.createElement("div",{className:(0,u.Z)(a,t&&i,d&&l)},o.createElement("motion-canvas-player",{class:r,src:`/examples/${n}.js`,auto:t}),o.createElement(h,{name:c||n}))}t(1263).Z.canUseDOM&&Promise.all([t.e(5392),t.e(9106)]).then(t.bind(t,9106))},511:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>m,frontMatter:()=>i,metadata:()=>d,toc:()=>s});var o=t(7896),a=(t(2784),t(876)),l=t(2665);const i={sidebar_position:1,slug:"/code-block"}

10,r="CodeBlock",d={unversionedId:"components/code-block",id:"components/code-block",title:"CodeBlock",description:"The CodeBlock component is used to present syntax highlighted code. It can",source:"@site/docs/components/code-block.mdx",sourceDirName:"components",slug:"/code-block",permalink:"/docs/code-block",draft:!1,editUrl:"http://web.archive.org/web/20230317133404/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/components/code-block.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:1,frontMatter:{sidebar_position:1,slug:"/code-block"},sidebar:"docs",previous:{title:"Components",permalink:"/docs/category/components"},next:{title:"LaTeX",permalink:"/docs/nodes"}},c={},s=[{value:"Using the component",id:"using-the-component",level:2},{value:"Indentation",id:"indentation",level:3},{value:"Selection",id:"selection",level:3},{value:"Animating code",id:"animating-code",level:3}],p={toc:s};function m(e){let{components:n,...t}=e;return(0,a.kt)("wrapper",(0,o.Z)({},p,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"codeblock"},"CodeBlock"),(0,a.kt)(l.Z,{banner:!0,name:"code-block",mdxType:"AnimationPlayer"}),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"CodeBlock"),' component is used to present syntax highlighted code. It can\nautomatically highlight many common languages. That code can then be modified in\nplace to present changes to the viewer. Modified code will animate from the\nprior code to the new code by removing old code, translating the remaining code,\nand inserting new code. You may also "select" code in order to call attention to\nimportant snippets.'),(0,a.kt)("h2",{id:"using-the-component"},"Using the component"),(0,a.kt)("p",null,"To display code, set the ",(0,a.kt)("inlineCode",{parentName:"p"},"code")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"language")," property."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'import {CodeBlock} from \'@motion-canvas/2d/lib/components/CodeBlock\';\n\nyield view.add(\n  <CodeBlock language="c#" code={`Console.WriteLine("Hello World!")`} />,\n);\n')),(0,a.kt)("p",null,"You can find a list of available languages in the ",(0,a.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230317133404/https://github.com/wooorm/starry-night#languages"},"Starry Night"),"\nrepository\u2014the library used for syntax highlighting. The default language is\n",(0,a.kt)("inlineCode",{parentName:"p"},"tsx"),", the language of Motion Canvas, which we will use for the rest of this\nguide."),(0,a.kt)("p",null,"Note that unlike most components, you must ",(0,a.kt)("inlineCode",{parentName:"p"},"yield")," any call to ",(0,a.kt)("inlineCode",{parentName:"p"},"add")," which\nincludes a ",(0,a.kt)("inlineCode",{parentName:"p"},"CodeBlock"),". This prompts Motion Canvas to prepare the syntax\nhighlighter."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(<CodeBlock />);\n")),(0,a.kt)("h3",{id:"indentation"},"Indentation"),(0,a.kt)("p",null,"For convenience, the indentation of code will be automatically adjust whenever\nthe code starts with a new line."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {CodeBlock} from '@motion-canvas/2d/lib/components/CodeBlock';\n\nyield view.add(\n  // note that the ` bracket is followed by a new line\n  <CodeBlock\n    code={`\n      console.log('Hello World!')\n        // more indented\n      // less indented`}\n  />,\n);\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"console.log('Hello World!');\n  // more indented\n// less indented\n")),(0,a.kt)("p",null,"The indentation is then set by the least indented code."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {CodeBlock} from '@motion-canvas/2d/lib/components/CodeBlock';\n\nyield view.add(\n  // note that the ` bracket is followed by a new line\n  <CodeBlock\n    code={`\n      console.log('Hello World!')\n    // less indented\n      // more indented`}\n  />,\n);\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"  console.log('Hello World!');\n// less indented\n  // more indented\n")),(0,a.kt)("h3",{id:"selection"},"Selection"),(0,a.kt)("p",null,'Code may be "selected" to call attention to it. The default behavior is to\ndesaturate any unselected text.'),(0,a.kt)("p",null,"A selection can be made using the ",(0,a.kt)("inlineCode",{parentName:"p"},"selection")," property when the ",(0,a.kt)("inlineCode",{parentName:"p"},"CodeBlock")," is\nfirst created. Selections are specified using two ",(0,a.kt)("inlineCode",{parentName:"p"},"[line, position]")," arrays,\nwhere ",(0,a.kt)("inlineCode",{parentName:"p"},"line")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"position")," are zero indexed, and ",(0,a.kt)("inlineCode",{parentName:"p"},"position")," is an insert\nposition between characters. So ",(0,a.kt)("inlineCode",{parentName:"p"},"[[0, 5], [1, 2]]")," will select the sixth\ncharacter on the first line through to the second character on the second line."),(0,a.kt)("p",null,"The following code will select ",(0,a.kt)("inlineCode",{parentName:"p"},"myBool")," out of the code snippet."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(\n  <CodeBlock\n    code={`var myBool;`}\n    selection={[\n      [0, 4],\n      [0, 10],\n    ]}\n  />,\n);\n")),(0,a.kt)("p",null,"It is often better, however, to use one of the three provided utility functions\nfor selection. Though they all return a two by two array of numbers, they can be\nmore descriptive than an array literal."),(0,a.kt)("p",null,"The first and most commonly used is the ",(0,a.kt)("inlineCode",{parentName:"p"},"range")," function. ",(0,a.kt)("inlineCode",{parentName:"p"},"range(0, 4, 0, 10)"),"\nis equivalent to ",(0,a.kt)("inlineCode",{parentName:"p"},"[[0, 4], [0, 10]]"),", making ",(0,a.kt)("inlineCode",{parentName:"p"},"range")," a direct substitute for an\narray literal."),(0,a.kt)("p",null,"The second is the ",(0,a.kt)("inlineCode",{parentName:"p"},"word")," function, which creates a range on a single line using\na position and a length. So ",(0,a.kt)("inlineCode",{parentName:"p"},"word(2, 4, 6)")," will make a selection on the third\nline, starting at the fifth character, and selecting a total of six characters."),(0,a.kt)("p",null,"Finally, you can use the ",(0,a.kt)("inlineCode",{parentName:"p"},"lines")," function to select whole lines of code."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {CodeBlock, lines} from '@motion-canvas/2d/lib/components/CodeBlock';\n\nconst codeRef = createRef();\nyield view.add(\n  <CodeBlock\n    ref={codeRef}\n    code={`\n      // first line\n      // second line\n      // third line`}\n  />,\n);\n\n// second line only\nyield * codeRef().selection(lines(1));\n// second and third line (line 1 to line 2)\nyield * codeRef().selection(lines(1, 2));\n")),(0,a.kt)("p",null,"To remove a selection, you must set the selected range from ",(0,a.kt)("inlineCode",{parentName:"p"},"[0, 0]")," to\n",(0,a.kt)("inlineCode",{parentName:"p"},"[Infinity, Infinity]")," to select all text. This is most easily performed by\nsetting the selection to ",(0,a.kt)("inlineCode",{parentName:"p"},"lines(0, Infinity)"),"."),(0,a.kt)("h3",{id:"animating-code"},"Animating code"),(0,a.kt)("p",null,"You may insert, remove, or edit the displayed code, any of which will animate\nthe code to its new state. All of these changes are performed with the ",(0,a.kt)("inlineCode",{parentName:"p"},"edit"),"\nmethod on a ",(0,a.kt)("inlineCode",{parentName:"p"},"CodeBlock")," instance."),(0,a.kt)("p",null,"To insert code, start by using ",(0,a.kt)("inlineCode",{parentName:"p"},"createRef")," to store your ",(0,a.kt)("inlineCode",{parentName:"p"},"CodeBlock")," instance\nfor future edits. Then call ",(0,a.kt)("inlineCode",{parentName:"p"},"edit")," with an embedded ",(0,a.kt)("inlineCode",{parentName:"p"},"insert")," call to add the new\ncode."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {CodeBlock, insert} from '@motion-canvas/2d/lib/components/CodeBlock';\nimport {createRef} from '@motion-canvas/core/lib/utils';\n\nconst codeRef = createRef<CodeBlock>();\n\nyield view.add(<CodeBlock ref={codeRef} code={`var myBool;`} />);\n\n// duration of 1.2 seconds\nyield * codeRef().edit(1.2)`var myBool${insert(' = true')};`;\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"var myBool;\n// will animate to\nvar myBool = true;\n")),(0,a.kt)("p",null,"Removing code is similar, only with the provided code being removed during the\nanimation."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {CodeBlock, remove} from '@motion-canvas/2d/lib/components/CodeBlock';\n\nyield view.add(<CodeBlock ref={codeRef} code={`var myBool = true;`} />

10);\n\nyield * codeRef().edit(1.2)`var myBool${remove(' = true')};`;\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"var myBool = true;\n// will animate to\nvar myBool;\n")),(0,a.kt)("p",null,"Finally, replacing code combines removal and insertion into one call."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(<CodeBlock ref={codeRef} code={`var myBool = true;`} />);\n\nyield * codeRef().edit(1.2)`var myBool = ${edit('true', 'false')};`;\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"var myBool = true;\n// will animate to\nvar myBool = false;\n")),(0,a.kt)("p",null,"Editing code will update your selection to highlight the changes. If you would\nlike to retain your selection through an animation, use ",(0,a.kt)("inlineCode",{parentName:"p"},"edit(duration, false)"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(<CodeBlock ref={codeRef} code={`var myBool;`} />);\n\n// note the second argument to edit\nyield * codeRef().edit(1.2, false)`var myBool${insert(' = true')};`;\n")),(0,a.kt)("p",null,"You may apply multiple edits to a code block over the course of a video, each\nmodifying the prior code to a new state."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(<CodeBlock ref={codeRef} code={`var myBool;`} />);\n\nyield * codeRef().edit(1.2)`var myBool${insert(' = true')};`;\nyield * waitFor(1);\nyield * codeRef().edit(1.2)`var myBool = ${edit('true', 'false')};`;\nyield * waitFor(1);\nyield * codeRef().edit(1.2)`var myBool${remove(' = false')};`;\n")),(0,a.kt)("p",null,"The proceeding code will animate through"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"var myBool;\nvar myBool = true;\nvar myBool = false;\nvar myBool;\n")),(0,a.kt)("p",null,"You can also apply multiple changes to a code block in one ",(0,a.kt)("inlineCode",{parentName:"p"},"edit"),", such that all\nchanges are applied simultaneously."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"yield view.add(<CodeBlock ref={codeRef} code={`var myBool;`} />);\n\nyield *\n  codeRef().edit(1.2)`${edit('var', 'const')} myBool${insert(' = true')};`;\n")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"var myBool;\n// will animate to\nconst myBool = true;\n")))}m.isMDXComponent=!0}}]);