Introducing the code block element

Announcements Updates
1

Today we’re introducing the code block element, an element purpose built for adding code snippets to any page on your Webflow site.

Whether it’s “getting started” instructions for an enterprise API or a few lines of code you want to share with your community, you can use the code block element to give your site visitors the code they need.

The Webflow designer with the add panel open and the mouse hovering over the code block element.

Add code snippets to any page with the code block element.

Learn more about the code block element on Webflow University.

3

Can we do inline code blocks?

4

This initial launch is focused on the static block level element, but we’re not done yet. :grin:

5

Great work! :slight_smile:

Just throwing some additional ideas around:

  • Make it CMS-driven. Maybe even give us the ability to combine static and dynamic code (like we can do in the Embed Code element)
  • A “copy code” button that lets users copy the code with one click.
  • More options to style the element: For example padding and background color, which we cannot style at the moment.
1 Like
6

That’s a nice list of enhancements :smile:

7

Hi how do i add it to a blog post?

8

For now, the code block is just a static element.

9

Yes and that is a shame… It would really be a powerfull tool to use in collections. But for now i have fixed it with Prism.js.

It is a little bit the same with the new Localization feature that do not work if you are on ad E-commerce plan!?.. I think you guys reales the last couple of new features a little bit to fast, before they are fully developed and are 100% ready to release. :upside_down_face:

10

I don’t have a problem with webflow shipping betas (previously we saw a lot of stagnation). But what bugs me is that when reporting bugs, they ignore them…“We are aware of the issue - but currently there’s no fix”

11

I agree - would love to use this in blog posts, as we use tons of code snippets in our posts.

Right now we need to add them as HTML elements, but they can’t be previewed, which makes it difficult to review. I’d love a better way.