RMarkdown Custom ID Selectors for Dynamic Headers and CSS

Key Takeaways

continuing on with our our markdown custom CSS video thing one of the cool things you can do with various other things is reference your headers with custom IDs so one thing I like to do in some of my are markdown documents is have hyperlinks to certain section headings especially if it's a very long document so one thing I might do is you know at the bottom of my document I could do like an a tag where the H ref is hash tag test back to top I think this is probably what's gonna work but I know I've done this before even if that's my syntax is incorrect for this but we'll see so one thing I also do have right here is now you see in an our mark 10 document the pound symbol is the comment because this is an in a CSS code chunk it will actually work as you intend and it will actually still function because the Hat the hash tag word is actually the ID selector for CSS but the way we actually give IDs to certain section headings like this I'm just gonna do for section headings I'm sure you can do this for other things like a custom divs yeah we can easily do that for custom divs like in here you can set ID equal to something because in the braces that's actually what's the CSS or the custom options so next to my h1 header here I have our mark down the way we assign a custom ID is through braces pound and then whatever your ID is so in this case test so what I have is that this is saying hey if you have the ID of test the color of your font is orange now I already tested this and it does not change the font color of the actual h1 header I have this one set for for red that's what will change the color for the h1 header what this is doing is this is changing the text of everything inside that h1 head and below it until it hits the next heading so our next h1 heading so let's see what this looks like and knit that so that changes all of the texts underneath this h1 header until the next h1 to orange because two columns right here is that h1 header now I have this little link here that is linked to just the ID selector hashtag test if I click it ah takes you back up to here so in this case you could actually have like say above or next to or something each of your headings a link back to the top I mean if you have it a floating table of contents like in the our markdown out or the HTML output that you can do like this you know that that works just as just as well but say you didn't want that say you just wanted this that's possible as well a lot of different ways you can play with this stuff you could also if you had it in like a book down document you could do this to any place in your book down document which is another use case I found for it is that if you have a link to your appendix if you have a link to another section or a specific reference point or figure you can actually link to it by doing ID selectors so in this case very very good use case of using custom IDs and when you're assigning these IDs to like an h1 header in our markdown its braces pound word and the same thing for the divs over here I think it might be the same or you just do ID equals the same sort of syntax that you normally would do for CSS but I'm not too familiar with this in that case like this is a little bit more confusing if you're gonna do some more custom options I would personally stick with just just write the straight HTML code with the the options in the div tag because it would just be simpler to read and less like obfuscated so in that case I would probably do that but in in in the example yeah custom ID selectors