Script Section

Display formatted code snippets on your site.

Script sections empower you to exhibit formatted script snippets in a broad array of programming languages.

Essential: Script sections do not execute any scripts. If you wish to include personalized script on your platform, review our tutorial on the insert element.

Throughout this tutorial, you’ll discover:

  1. Guidelines on incorporating and adjusting a script section
  2. Strategies for designing a script section

Demonstration of adding and editing a script section

To introduce a script section component to your platform:

  1. Replicate the script you intend to exhibit in the script section
  2. Unveil Insert panel > Complex
  3. Move a script section to the display area, a rich text component, or the rich text field within the CMS
  4. Insert your script into the script editor
  5. Tap Save & exit
Notification: The script section component backs most programming languages; however, it does not envelop every language. A comprehensive list of supported languages is accessible in the Element settings panel > Script section settings > Language.

To modify the script exhibited within the script section, pick the script section on the display area, hit the settings “gear” icon, and choose Access script editor. You can also initialize the script editor from Element settings panel > Script section settings.

Necessity to understand: Scripts in a script section component must not surpass 10,000 characters. If the script you wish to exhibit is lengthier, you can compress your script employing an external tool or distribute it into multiple script section components.

Script section settings

After affixing a script section to the display area, you’ll uncover the ensuing settings in Element settings panel > Script section settings:

  • Language — dictates the highlighting syntax implemented to the script in the element. The script section automatically discerns the programming language of the script you paste in, but you can regulate the language as necessary
  • Theme — sustains light and dark theme
  • Show line numbers — decides whether line numbers are exhibited adjacent to each line of script

Techniques for designing a script section

As a default, the script section occupies the complete width of its parent element. You can customize the script section in the Design panel similarly to other elements (e.g., set its dimensions and spacing attributes, etc.), but you cannot modify its typography or backdrop attributes.

Ewan Mak
Latest posts by Ewan Mak (see all)