RMarkdown Customized Styles with CSS and HTML Output

Key Takeaways

html/css in our markdown so because we can send an are marking on document to HTML and we can compile it through panda to go to HTML and our markdown our studio a lot of this is heavily integrated with front-end web technology our studio itself is based on the front-end web stack which is why if you use our studio online it's the exact same interface and it's almost identical it's a very comfortable environment because it's the same anywhere our markdown because it's running through pan doc and all the work that you a and the art studio team have put into our markdown means that we can do a lot of crazy cool flexible stuff with the front-end web stack with our markdown one of those things is changing your our markdown stuff your yo your different text elements headers lines what anything with custom CSS now with that there's a yamo option to have a external CSS file read into and affecting your HTML output but we can also do this with a inline code chunk or a code chunk of CSS inside the our marchand document itself and keep it all inside now a few others have a very few quick one-off things maybe that's the greatest idea if you have a large CSS file a large custom style or you've developed an a like internal company style you might want to do an externally reference CSS file for this example I'm just doing you know a code chunk inside the document but if you it would just be like a first-level CSS colon and then the file path to your CSS file and that should work just fine now what I'm gonna do is because each of these headers done with the pound signed in markdown and an our markdown this is basically an h1 header two of them H two all the way to 6 we have six header elements and that is the HTML h1 h2 all the way through six six what I want to do is by default if I comment these out right here just knit the document the output will show you that by default our headers are just black text this is an h1 this is an h1 I think is it is it now including plastids in h 2 so we have h 1 and then we have h 2 by default black text but if we use CSS over here H 1 red H 2 green if I knit this now it will change the text of these because this is an h1 so when this compiles to HTML the it actually gets broken down into HTML tags with inline and externally referenced CSS and JavaScript all these things are included into these files so if you open this HTML file you're just gonna see large amounts of JavaScript between script tags CSS between linked stylesheet to I remember but all this stuff means that you can have a bunch of things externally referenced with your are markdown document and then it will incorporate it into your HTML output and therefore affect it and this works with JavaScript too so if you had something with jQuery I've done a few things where you can toggle certain things and use some of the jQuery functionality by referencing that in your our markdown document but some of the coolest things that I've done before is like we've actually taken these h1 headers and then added a background color and then made the edges rounded with border radius and made it effect a very soft pastel corporate color for a report we were doing at my office for chronic kidney disease analysis so you can do a lot of custom stuff anything you can do with CSS you can do a lot of it in our markdown because it's going to a HTML file so play around with this see what you can create and what sort of cool custom things you can make and yeah that's all I have