4.2 Using Language Filters

Hi, and welcome back to top speed html development with Jade. In this lesson you're going to learn about language filters in Jade. Now language filters let you incorporate different languages inside Jade itself. So you can write copy script, you can write stylus code, less code, and you can write mark down. All in line without needing to use any separate compilers for those languages. Now we're gonna start with a very basic example just using CoffeeScript in our little jQuery checker, instead of straight-up JavaScript. So we'll just delete our original code. And we'll also delete the dot, seeing as we're no longer using just straight up JavaScript. Now in order to use a language filter, all you need to do is add a colon and then the language that you are going to be filtering in. So in this case, we're using CoffeeScript, and to represent that we just use the word coffee. And now, we'll be all set to move onto the next line, tab indented. And we can add our CoffeeScript. You can see our original raw JavaScript that we went over in a previous video. So after we save and compile, you should see this code change a little bit into CoffeeScript flavored code. So it'll save that and compile. And there you can see that the code is written a little differently, according to the way that CoffeeScript compiles. However, when we go over to our site, you can see we still have the same functionality in place. So if I am to change our jQuery setting to false. Now you'll see, nope, no jQuery. So, that CoffeeScript has complied into JavaScript and it's all executing correctly. And CoffeeScript isn't the only language that you can filter through your Jade files, you can also use Markdown. So let's take a look at a quick example. So again we use our colon, to show that we wanna use a language filter. And we're gonna be using Markdown code, so we type markdown. We're now on to anything that you want to pass through your filter has to be tab indented inside that nesting level. And we're now going to replace our h1 tag that we have coming out here in our HTML with markdown. So, in Markdown to do a h1 tag, all you need is a single hash. And we'll save and compile. And you can see we still have our h1 tag coming through from our variable correctly. You'll also notice that when compiling you do get an ID automatically generated and added to the h1 tag. And if you're using a variable to pass information through here, you might get a bit of a funky looking ID that might not be what you want. So you may prefer, if you're using variables, to keep them outside of your Markdown filters. And just have them come through as regular Jade code. In which case you'll be able to control whether or not there's an ID there. So we'll just delete that for now. But you can include any type of Markdown code directly in line inside your Markdown filter and the whole thing we will compile correctly for you. So we'll save that. And they have all of the right HTML produced. This means that you don't have to go with writing up all of your actual text content via pages in Jade code if you don't want to. You can use Markdown and you can write it straight inside of your files. So we'll have a look at how that looks. And there's all our HTML that has come from our Markdown code, written directly inline. You can also use CSS preprocesses inline. As well. And when you're using Prepros to compile, it will support inline Stylus and inline lists. Now I'll show you a quick example of some inline Stylus. This is just a little box. With a class applied to it and a bit of text inside. And below that we've created a style element that will hold our inline CSS. And then inside that style element, we've used the colon to say that we are using a language filter. And then the word stylus to indicate that the following code is Stylus code and should be compiled using the Stylus compiler. And following that we have some Stylus code which will then be applied. To the Stylus box. And we'll save and compile that, and you'll see all this will produce CSS inline in the HTML file. Save, and there we have all of our compiled CSS. And that gives us our little Stylus box here. And you can do the same thing with less code. So I'll just paste that right in. Now we have a second box with a different class attached to it. And again, we have a style element. A colon to indicate we're using a filter, the word less to say the following code will be less code. And then some less to style our less box. We will save that. And again, that has been successfully compiled into CSS, which gives us this. Now in some compilers you can also use a Sass filter or a SCSS filter. With Prepros that's not supported but it can be done using different compilation methods. So that's four languages that you can use all within Jade. Now that's really, really helpful because if you're not using Jade and you did want to otherwise have all of these other languages compiled, you would need to use individual compilers for each one. You would need to have them handled with their own compilation methods. But by placing them inline in your Jade code, you only need to worry about one compilation process. In the next lesson, you're going to learn how to use straight HTML inline. Sometimes, you just want to be able to use the coding techniques that you're already familiar with, and sometimes it's just easier to use raw HTML. And you'll learn how up next.