CMS

Framer Update: Code Blocks & Inline Code

Hunter

5:58

8.8K views

Jul 13, 2023

About this lesson

We’re excited to introduce Code Blocks & Inline Code, unlocking the ability to document and present your code in Framer. Get started in the CMS via the Formatted Text Toolbar, showcase your code on the Canvas by finding the Code Block component in the Insert Panel, or type a backtick anywhere for Inline Code. Remix our docs template here: https://standard.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00hey y'all it's hunter in this video I'll 0:02show you how you can use the new code 0:04blocks and inline code features in 0:06framer 0:07you can use this to make API 0:09documentation alongside your current 0:10framer site maybe a password protected 0:12docs for your team or just some cool 0:15blog posts about code 0:17let's start by taking a look at the 0:18example site we have here 0:20this site is filled with example content 0:22to show different options for how you 0:25could build your documentation site 0:27if you want to follow along in framer or 0:29you just want to start playing around 0:30for yourself you can find the link to 0:32this template in the description 0:33now what are these features you've 0:36probably seen this around the web before 0:37but inline code is used for calling out 0:40a piece of code within a block of text 0:42and a code block looks more like what 0:44you'd expect in a text editor for coding 0:46with syntax highlighting and multi-line 0:49support 0:51let's open the CMS and I'll show you how 0:52you can add code to your CMS content 0:56if we open up one of our CMS items we'll 0:58see there's two new buttons in the rich 1:00text toolbar 1:02one for inline code and one for code 1:04blocks 1:05let's start using inline code by calling 1:07out the framer Library here which is 1:09actually a name that we would use in 1:11code so if we select it and click the 1:14inline code button we can also use the 1:17shortcut command shift C on Mac OS or 1:20Ctrl shift C on Windows 1:23it now becomes inline code this will 1:25make it monospace in the editor and add 1:27a slight background so you know you 1:28formatted this text 1:30in this example content we also want to 1:32show what an example component looks 1:34like so we'll use a code block for this 1:36to do that let's create a new line and 1:39we'll click the code block button in the 1:41toolbar 1:43this instantly inserts a code block we 1:46can go ahead and just type whatever code 1:47we want right in here 1:49and it looks exactly how we'd expect the 1:52code to look 1:53we can change the language if we need 1:55but in this case we'll stick to jsx 2:00our code blocks have great inline 2:01editing with auto bracket completion and 2:04auto indentation but if you have your 2:06code on hand already you can just paste 2:08it right in and everything will look how 2:09you expect with syntax highlighting 2:12I'll paste in some code that I have 2:13ready 2:15alright that's looking good now that 2:17we've seen the editing experience let's 2:19see what it looks like on our page 2:20design 2:21if we go to our docs pages 2:25there we go you can see that our inline 2:27code and our code blocks are showing up 2:29on our page 2:30now that we've added our formatted code 2:32in our content let's take a look at how 2:34to style this we can find everything we 2:36need in the assets panel under the 2:38Styles section 2:41both inline code and code blocks are 2:43fully customizable to fit whatever your 2:45site looks like 2:47with the inline code we're able to 2:48change many different options like font 2:50border radius or border 2:53all these controls are designed to be 2:55relative to the font size of the 2:57surrounding text this allows you to use 2:59the size control for instance to set the 3:02exact percentage that will make your 3:04letter height align with the surrounding 3:05text the padding values for the 3:08background sizing are also relative to 3:10allow you to use the same inline code 3:12style for your headings and your body 3:14copy to keep things consistent 3:17in the Styles section under the CMS 3:19category we'll also find the code block 3:21Styles in here we can customize 3:23everything from the font to the theme to 3:26even overriding the background color and 3:28setting the radius and the padding 3:31and for maximum polish theming is built 3:33right in you can select which syntax 3:35theme you'd like to use on light mode 3:37and which theme you'd like to use on 3:39dark mode 3:40in this case I'll use the framer light 3:41theme and the framer Dark theme but I'll 3:44override the background color to fit my 3:46design a bit better 3:50nice that's looking much better 3:52the benefit of having the styling for 3:54these in the Styles panel is that I only 3:56have to set them up once if I'm writing 3:59more content or developer on my team 4:01wants to come write some content all 4:02they have to worry about is the content 4:04and everything will use the styles that 4:06are already set on the rich text layer 4:09I'll add some more example content to 4:10our page using the CMS overlay 4:13and you can see that all our content 4:15keeps the same style and as a quick tip 4:17while I'm doing this any code block 4:19content that you copy and paste within 4:21the rich text area will retain the 4:24language that you copied it from so this 4:26pasted block also stays as jsx 4:29the styles for code blocks and inline 4:31code work just like textiles so you can 4:33find them assigned on your Rich Text 4:35content in the layers panel you can also 4:37create multiple of each of these tiles 4:39if you have a bigger site that needs 4:40different styles for different text 4:42layers in this case let's say we want to 4:44make some changes to our Styles so let's 4:46hop back into the assets panel and these 4:48Styles will apply to each instance of 4:50inline code or every code block within 4:52this text layer content whether there's 4:54three code blocks or 300 allowing you to 4:58scale with your content 5:00and because framer is a freeform tool 5:02we've also added code blocks to the 5:04insert menu allowing you to insert them 5:06on any page regardless if you're using 5:08the CMS or not this is great for 5:10creating fully custom landing pages or 5:13home pages for your documentation that 5:15need to call out pieces of code 5:17if we drop it in here we can see we have 5:19some example code built in and all the 5:22exact same themes that we can use in the 5:24CMS allowing us to sync The Styling 5:26across our entire website and keep 5:28things super consistent 5:29it even supports fixed and auto sizing 5:32just like any other layer to make it fit 5:34to whatever design you may have in mind 5:36and that's it for code blocks and inline 5:38code and we can't wait to see what you 5:40build with this thank you for watching 5:42and I will see you next time

TeachesCMS Fields

Also coversComponents Keyboard Shortcuts Links Sizing Spacing Templates Themes Typography

Watch on YouTube ↗

‹ Framer Update: Multi-Stop and Conic Gradients

Navigations: Mobile Menus 2 ›