Add Syntax Highlighting to your Webflow Site

in this video we're going to show you how to add syntax highlighting to your webflow sites let's dive in [Music] hi i'm kyle the creator of no code collab a site with tips tricks and tutorials for your next no code project if you haven't already please like this video subscribe to our channel and head over to our website where we have code snippets using syntax highlighting and other resources to help you with your no code builds so there are two parts to including syntax highlighting in your website the first is installing it on your website on your webflow site and then the second is using it i'm going to try to stick to the brass tacks on kind of the installation and how to get it set up there are sites that have documentation and all that but i'm not gonna get into content delivery networks and all those things i'm gonna show you exactly what you need to do to get it up and running on your site and then we're gonna look at how to actually use it so what we've got here is the no code collab website a tutorial page where we actually use syntax highlighting and the reason that we use it is because there are times when we don't want the browser to render code we want to display code to the readers and oftentimes if you were to just write code on your in your files the browser would render it but using syntax highlighting it kind of blocks that off a little bit and allows us to style it in these nice ways so that it's more legible and it doesn't get rendered so that's what we're going to create here is this this box so the first thing we're going to do is head over to prismjs.com prismjs.com is the plug-in it's it's a third-party tool that we're going to be using it is totally free you can see on the right-hand side we've got some circles that have different themes so first thing you're going to do is find a theme that you like if you like twilight you can kind of see some of the different colors that are associated with the theme maybe like tomorrow night or koi is a lighter theme so let's say we're going to go with uh we're going to go with this one this uh alkydia and that's the one we like okay so the first thing you need to do is choose a theme then if you scroll down there's going to be a place where it says cdn usage with cdns i've got these links in the no code collab website so you can go and check out these links there so find cdn and then there's a link here that says cdn js click that link and it's going to take you to a page that has all of the prism.js files javascript files css files this is where we're going to grab everything we're not going to use the download button at the top of the page because then we have to create a javascript file store it on a server somewhere and then call that call that file if we use the cdn we're just gonna we're gonna use the files that are out and available on the internet so the first thing we're gonna do is we're gonna copy prism the the minified prism js file so you can click that little code copy script tag then you're going to head over to your webflow project find the page where you want the code the syntax highlighting to be available to you in this case we're going to use it on the tutorial pages so i'm going to go to my tutorials template page i'm going to click on the settings and for the minified js i'm going to go to the before closing body tag i'll zoom in for you here and you can see i've already added them but all you're going to do is hit paste now there are some extra bits in this script that you've copied so you can get rid of everything after the integrity so you can delete that and so you should have just script source a link and then a closing script tag so we're good there that's now we've got our minified prism js file on our site you can stop here if you don't want to extend the functionality at all you don't need the the um copy to clipboard if you don't need anything fancy you don't you could stop here from a javascript standpoint the next thing you need though is we need to go back and get the styling we need to get the css so remember the one i liked was that okay i think i'm saying that right well i'm going to copy that link tag so i've copied that i'm going to head back to my webflow page i'm going to go up to the inside head tag and what i'm going to do there i've already copied it here but i'm going to just for paste again i don't need all of this extra stuff again so i'm going to take that and delete everything after integrity and now you can see that i've got this link to a style sheet page okay so now i've got my styles and i've got my minify.js now again i could stop here or you could stop here but what i actually have found because i'm using larger swaths of code and i want to show these script tags and i want to show more stuff that sometimes includes opening and closing tags it's a little more complex what i actually have found is that the plugin for the [Music] they've got these different plugins the plugin for the escaped it's called i'm gonna find it here unescaped markup the unescaped markup plug-in is vital because that allows me to kind of write a bunch of code and it will it will handle a bunch of stuff so if you're having trouble with some of your syntax highlighting because your some closing tags aren't showing up come and grab this unescaped markup copy the script tag head back over to webflow go back down to your before closing body and paste that that script there again i'm just going to get rid of this extra those extra bits now you can see i've got my unescaped markup okay now because i want to have this copy link or this copy button i need to have two additional plugins the first plugin is called toolbar so again i'm going to copy that script tag go back to webflow paste that in then after toolbar i'm going to load the look it's called copy let's see if i can search for that prism copy to clipboard i'm going to copy that there's a bunch of other plugins and if you go to the prism page and you click on plugins you can see a list of all of the plugins so go and check that out at your hearts to your heart's desire the idea is the same though you're going to come to your cdn you're going to copy the script tag and you're gonna paste it into your webflow site and in the end what's gonna end up happening is you're gonna have a few script tags now beware that if you add everything this is gonna this could slow down your site the other thing too this isn't totally best practice because ideally what would happen is you would combine all these files into one file and then you would only make one call to download your javascript because webflow doesn't serve as a great place to host your javascript files it's just kind of this is the the kind of the down and dirty this is the easier way to do it but just know that there are more efficient ways to do this if these scripts end up slowing down your site so now i've got all of my javascript files i've got my css file and now i have done part one of syntax highlighting this is now added to my site i'm going to save that and then i need to publish my site in order for that to take effect so step one check now let's say that you're in a situation where you want to actually add some syntax highlighting to a to a blog post or to a page well what you need to do is you need to add a custom code embed so i'm going to head over to my tutorials i'm going to look at here's a tutorial that has some code what you're going to do is in my rich text field i'm going to add a code block and in that code block i'm going to call out two things i'm going to write two things the first thing is pre and the next tag is code and then i'm going to do a because i was using the unescaped markup let me see if i can get this a little bigger for you because i was using the on escape markup i'm going to do a html comment this is just part of the unescape markup and then i'm going to close that comment close the code tag and close the pre-tag now anything i write in here oh there's one more thing i'm missing i actually need to go like this i need to say class equals language language dash markup end quote now inside of this custom code element the javascript library that we've loaded in is going to look at this now anything inside this anything in here it's going to do the syntax highlighting on so this is where you can kind of paste in your code you can do it if you're maybe you're in sublime text or you're somewhere else this is where you can paste in your code let me give you an example and show you something that i've done on where i've used kind of more real code and you will get a a better sense so i'm just going to close out of that so here is a here's the code snippet from earlier so what i've done is i've got my pre code class equals language dash markup and then i've finished it that way now what you'll notice actually though is if i get rid of this if i get rid of that comment that bracket exclamation dash dash my code is actually highlighted the syntax is highlighted because this is an html embed code editor so it actually looks nice what i actually like to do is i i write all my code in here or or in sublime text i write it i bring it in everything looks good i like this and then what i do is just at the very end once it's all set up and running i add in my my comment my html comment and then i close it out down here at the bottom i save it and now that will be that will have the the syntax highlighting if i come back over to my my tutorial the one i just did was input masks and you can see that what is happening is i've got all of my all of my code highlighted one other thing to note is by default since i added the plugins for the for this copy button i added the toolbar and then i added the copy button because in order to add the copy button you need the toolbar you can style this copy button so what i did is back on my styles page in webflow i went to my styles page and you can see i've added a button and if you use the the class copy to copy to clipboard button if you use the class copy to clipboard button and then style that up your button below your syntax highlighting will be styled however that button is styled so that's a nice little enhancement if you want to change that you can also if you're using any other plugins you should be able to right click inspect element find the class and then you can do that same method where you you add the style to that class on your styles page okay so one more thing the reason that i'm adding the html comment in my code so let me head over to a tutorial if you remember i used the unescaped markup plugin with prism js if you're not using that plugin you do not need this comment you can take this out and you can just leave your code kind of as is the problem is some of these things like the closing strip script tag some of them get still get rendered by webflow and by the browser so the only way that i have found to accurately display the syntax highlighting is to use that unescaped markup plugin if you are just using simple html or simple javascript or you don't need or css you don't have these closing script tags and other things you don't really need the unescaped markup plug-in you could just probably keep it kind of vanilla out of the box because i'm doing some more stuff i went through a lot of troubleshooting to figure out that this is this is kind of the the way that works best in webflow in order for all of the code to be displayed properly i hope you found this tutorial helpful and you're able to add some really nice syntax highlighting to your website thanks again for watching please like this video subscribe to our channel and be sure to go check out our website where we've got a lot more tutorials and other code snippets to help with your no code projects [Music] you

Channel: No Code Collab

Views: 88

Keywords: Custom code webflow, No Code, PrismJS, Prismjs tutorial, Syntax Highlighting, Syntax highlighting webflow, Webflow, Webflow tutorial, prismjs, syntax highlighter, syntax highlighting explanation, web development, webflow

Id: TLWA_TuVwx8

Length: 15min 15sec (915 seconds)

Published: Sat Oct 30 2021