Code block

Display formatted code snippets on your site.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Code blocks give you the power to showcase formatted code snippets in a wide range of programming languages.

Important: Code blocks do not run any code. If you’d like to add custom code to your site, check out our lesson on the embed element.

In this lesson, you’ll learn:

  1. How to add and edit a code block
  2. How to style a code block

How to add and edit a code block

To add a code block element to your site:

  1. Copy the code you’d like to display in the code block
  2. Open Add panel > Advanced
  3. Drag a code block to the canvas
  4. Paste your code into the code editor
  5. Click Save & close
Note: The code block element supports most programming languages, but is not inclusive of every language. For example, the code block does not support C++ or GraphQL. A complete list of supported languages is available in Element settings panel > Code block settings > Language.

To edit the code displayed within the code block, select the code block on the canvas, click the settings “gear” icon, and click Open code editor. You can also launch the code editor from Element settings panel > Code block settings.

Need to know: Code in a code block element cannot exceed 10,000 characters. If the code you want to display is longer, you can minify your code using a third-party tool or split it into multiple code block elements.

Code block settings

Once you add a code block to the canvas, you’ll find the following settings in Element settings panel > Code block settings:

  • Language — determines the highlighting syntax applied to the code in the element. The code block automatically recognizes the programming language of the code you paste in, but you can adjust the language as needed
  • Theme — supports light and dark theme
  • Show line numbers — determines whether line numbers appear next to each line of code

How to style a code block

By default, the code block takes up the full width of its parent element. You can style the code block in the Style panel just as you would other elements (e.g., set its size and spacing properties, etc.), but you can’t change its typography or background properties.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top