Add Copy-able Code Blocks to Webflow CMS

2022-01-25
, most recent update.

Uses [highlight.js](https://highlightjs.org/)

where you can get [latest version](https://highlightjs.org/download/)

You can clone it for Webflow [here](https://webflow.com/website/Cloneable-Code-Snippets-Copy-Box-Embed)

## Add the following code the respective webpage.

### Add higlight.js to Head tag

## Add the styles for Code Blocks snippet to Head tag

### Add code to before closing Body tag

### On page or Rich Text element add HTML Embed

### To notice

- Works with CMS Richt text, too.

- Choose how code should be dispaled

- HTML must be escaped. Since I write in markdown using VS Code I use an extension to do that with just a command.

Download Markdown
Read next in DOCU

Add Copy-able Code Blocks to Webflow CMS

Uses highlight.js and custom code to add code blocks where you can copy the code to rich text element of Webflow CMS

Read next in DOCU

Calculate Read Time from Webflow CMS

Calculated a read time from Webflow CMS and add to your blog template.

Read next in DOCU

Dynamic Social Media Share Buttons for Webflow CMS Blogposts

Add a Twitter button and a share on LinkedIn to your blogposts with sharing content generated from Webflow CMS

Read next in DOCU

Dynamically Generated ToC with Webflow CMS

Generating ToC’s based on h2 and h3 headings of a rich text CMS element with active states in a sticky Table of Contents

Hej. I am on Twitter, too.

Connect with me on Twitter and LinkedIn.