Editing Code blocks in Canopy

Identify the code block you want to modify on your page. Canopy uses visual indicators like highlighted areas or bounding boxes to show editable elements.

Alternatively, you can also employ one of the following methods to locate your editable items.

• Click the Toggle Guides button to visually highlight all editable regions on the page.
• Utilize the Component Tree to navigate and identify the specific text element within the page structure.

Simply click on the code block you want to edit.

Once selected, a sidebar will appear on the right side of the interface. This sidebar will display the editing options for the chosen code block element.

Language: Select the appropriate language that corresponds to your code snippet.

Code: Paste or type your code snippet here.

Simply modify the content directly within the sidebar. The changes will be reflected in real-time on the actual page, allowing you to preview your edits as you go. When you're happy with the changes click on Update to save the changes.