CodeBlock

The CodeBlock component is used to present syntax highlighted code. It canautomatically highlight many common languages. That code can then be modified inplace to present changes to the viewer. Modified code will animate from theprior code to the new code by removing old code, translating the remaining code,and inserting new code. You may also "select" code in order to call attention toimportant snippets.

Using the component

To display code, set the code and language property.

                            
                                import
                                
                                {
                                CodeBlock
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                
                                <
                                CodeBlock language
                                =
                                "c#"
                                 code
                                =
                                {
                                `
                                Console.WriteLine("Hello World!")
                                `
                                }
                                
                                /
                                >
                                ,
                                
                                )
                                ;

You can find a list of available languages in the repository—the library used for syntax highlighting. The default language is tsx , the language of Motion Canvas, which we will use for the rest of thisguide.

Note that unlike most components, you must yield any call to add whichincludes a CodeBlock . This prompts Motion Canvas to prepare the syntaxhighlighter.

Indentation

For convenience, the indentation of code will be automatically adjust wheneverthe code starts with a new line.

                            
                                import
                                
                                {
                                CodeBlock
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                
                                // note that the ` bracket is followed by a new line
                                
                                <
                                CodeBlock
                                
                                code
                                =
                                {
                                `
                                
                                      console.log('Hello World!')
                                
                                        // more indented
                                
                                      // less indented
                                `
                                }
                                
                                />
                                ,
                                
                                )
                                ;

                            
                                console
                                .
                                log
                                (
                                'Hello World!'
                                )
                                ;
                                
                                // more indented
                                
                                // less indented

The indentation is then set by the least indented code.

                            
                                import
                                
                                {
                                CodeBlock
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                
                                // note that the ` bracket is followed by a new line
                                
                                <
                                CodeBlock
                                
                                code
                                =
                                {
                                `
                                
                                      console.log('Hello World!')
                                
                                    // less indented
                                
                                      // more indented
                                `
                                }
                                
                                />
                                ,
                                
                                )
                                ;

                            
                                console
                                .
                                log
                                (
                                'Hello World!'
                                )
                                ;
                                
                                // less indented
                                
                                // more indented

Selection

Code may be "selected" to call attention to it. The default behavior is todesaturate any unselected text.

A selection can be made using the selection property when the CodeBlock isfirst created. Selections are specified using two [line, position] arrays,where line and position are zero indexed, and position is an insertposition between characters. So [[0, 5], [1, 2]] will select the sixthcharacter on the first line through to the second character on the second line.

The following code will select myBool out of the code snippet.

                            
                                yield
                                 view
                                .
                                add
                                (
                                
                                <
                                CodeBlock
                                
                                code
                                =
                                {
                                `
                                var myBool;
                                `
                                }
                                
                                selection
                                =
                                {
                                [
                                
                                [
                                0
                                ,
                                
                                4
                                ]
                                ,
                                
                                [
                                0
                                ,
                                
                                10
                                ]
                                ,
                                
                                ]
                                }
                                
                                />
                                ,
                                
                                )
                                ;

It is often better, however, to use one of the three provided utility functionsfor selection. Though they all return a two by two array of numbers, they can bemore descriptive than an array literal.

The first and most commonly used is the range function. range(0, 4, 0, 10) is equivalent to [[0, 4], [0, 10]] , making range a direct substitute for anarray literal.

The second is the word function, which creates a range on a single line usinga position and a length. So word(2, 4, 6) will make a selection on the thirdline, starting at the fifth character, and selecting a total of six characters.

Finally, you can use the lines function to select whole lines of code.

                            
                                import
                                
                                {
                                CodeBlock
                                ,
                                 lines
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                const
                                 codeRef 
                                =
                                
                                createRef
                                (
                                )
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                
                                      // first line
                                
                                      // second line
                                
                                      // third line
                                `
                                }
                                
                                />
                                ,
                                
                                )
                                ;
                                
                                // second line only
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                selection
                                (
                                lines
                                (
                                1
                                )
                                )
                                ;
                                
                                // second and third line (line 1 to line 2)
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                selection
                                (
                                lines
                                (
                                1
                                ,
                                
                                2
                                )
                                )
                                ;

To remove a selection, you must set the selected range from [0, 0] to [Infinity, Infinity] to select all text. This is most easily performed bysetting the selection to lines(0, Infinity) .

Animating code

You may insert, remove, or edit the displayed code, any of which will animatethe code to its new state. All of these changes are performed with the edit method on a CodeBlock instance.

To insert code, start by using createRef to store your CodeBlock instancefor future edits. Then call edit with an embedded insert call to add the newcode.

                            
                                import
                                
                                {
                                CodeBlock
                                ,
                                 insert
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                import
                                
                                {
                                createRef
                                }
                                
                                from
                                
                                '@motion-canvas/core/lib/utils'
                                ;
                                
                                const
                                 codeRef 
                                =
                                
                                createRef
                                <
                                CodeBlock
                                >
                                (
                                )
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                // duration of 1.2 seconds
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool
                                ${
                                insert
                                (
                                ' = true'
                                )
                                }
                                ;
                                `
                                ;

                            
                                var
                                 myBool
                                ;
                                
                                // will animate to
                                
                                var
                                 myBool 
                                =
                                
                                true
                                ;

Removing code is similar, only with the provided code being removed during theanimation.

                            
                                import
                                
                                {
                                CodeBlock
                                ,
                                 remove
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool = true;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool
                                ${
                                remove
                                (
                                ' = true'
                                )
                                }
                                ;
                                `
                                ;

                            
                                var
                                 myBool 
                                =
                                
                                true
                                ;
                                
                                // will animate to
                                
                                var
                                 myBool
                                ;

Finally, replacing code combines removal and insertion into one call.

                            
                              
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool = true;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool = 
                                ${
                                edit
                                (
                                'true'
                                ,
                                
                                'false'
                                )
                                }
                                ;
                                `
                                ;
                                

                              
                            
                          
                            
                          

                            
                                var
                                 myBool 
                                =
                                
                                true
                                ;
                                
                                // will animate to
                                
                                var
                                 myBool 
                                =
                                
                                false
                                ;

Editing code will update your selection to highlight the changes. If you wouldlike to retain your selection through an animation, use edit(duration, false) .

                            
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                // note the second argument to edit
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                ,
                                
                                false
                                )
                                `
                                var myBool
                                ${
                                insert
                                (
                                ' = true'
                                )
                                }
                                ;
                                `
                                ;

You may apply multiple edits to a code block over the course of a video, eachmodifying the prior code to a new state.

                            
                              
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool
                                ${
                                insert
                                (
                                ' = true'
                                )
                                }
                                ;
                                `
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                waitFor
                                (
                                1
                                )
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool = 
                                ${
                                edit
                                (
                                'true'
                                ,
                                
                                'false'
                                )
                                }
                                ;
                                `
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                waitFor
                                (
                                1
                                )
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                var myBool
                                ${
                                remove
                                (
                                ' = false'
                                )
                                }
                                ;
                                `
                                ;
                                

                              
                            
                          
                            
                          

The proceeding code will animate through

You can also apply multiple changes to a code block in one edit , such that allchanges are applied simultaneously.

                            
                              
                                yield
                                 view
                                .
                                add
                                (
                                <
                                CodeBlock
                                
                                ref
                                =
                                {
                                codeRef
                                }
                                
                                code
                                =
                                {
                                `
                                var myBool;
                                `
                                }
                                
                                />
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                

                              
                              
                                
                                codeRef
                                (
                                )
                                .
                                edit
                                (
                                1.2
                                )
                                `
                                ${
                                edit
                                (
                                'var'
                                ,
                                
                                'const'
                                )
                                }
                                 myBool
                                ${
                                insert
                                (
                                ' = true'
                                )
                                }
                                ;
                                `
                                ;
                                

                              
                            
                          
                            
                          

                            
                                var
                                 myBool
                                ;
                                
                                // will animate to
                                
                                const
                                 myBool 
                                =
                                
                                true
                                ;

CodeBlock

Using the component ​

Indentation ​

Selection ​

Animating code ​

Using the component

Indentation

Selection

Animating code