Use raw HTML and the Text Snippets plugin to build custom text styles in Obsidian beyond its built-in highlighting. Download snippet code from Patreon, set a hotkey for quick insertion, and enable a CSS file in your vault's snippets folder to apply the styles globally.
How's it going guys? Today I've got something really cool that I want to share with you. And first, let me introduce the problem of how this came up and how I discovered it. So, you know, in Obsidian, obviously you want to make it easy to take notes, but you also want to make it easy to read your notes so that you can, um, understand them in the best way possible. And so when you're making notes in Obsidian, sometimes you'll have certain parts of text that are going to be more important than other parts. So in this, uh, quick demo example over here, uh, let's say that this is important text that I want to emphasize. And so the general way that you can do this in Obsidian is you can use the highlight feature. And I mean, while it's, it's, it's effective, I feel like it's not as customizable. It's not really, um, that like, uh, that good. You know, if you wanted to maybe make it a different color, you're not able to do that. And you're kind of limited to the theme. So, um, for example, if I wanted to, I could also make it italics or I could make it bold. But again, it's still, it's not really that like overwhelmingly emphasized, you know? So there's actually a much better way that I've just recently discovered, and that is using HTML in Obsidian. So this is something completely new. I'd never really known that it was possible to do this before, but for example, if I take a piece of HTML, uh, like this, for example, right? And don't worry if you're not a coder, um, I'm going to explain how you can literally set this up where you won't even have to look at code. And have it working for you. So just in this example, you can see that I've got this piece of HTML and all this will do is it's actually gonna make the, it's gonna make the text, uh, with the background color. And so that's what it looks like right now. This is really powerful because if you can use HTML inside of Obsidian, you could literally style and build like a whole website in here if you really wanted to do that. Um, and I started playing around with this and I was actually able to create some different color blocks, like the ones that you see over here. And what I'm gonna do is show you how you can actually take my existing code, download it for free, and then set this up inside of your own vault so that you can use this for all of your different notes. All right, so, um, first thing that I wanna share with you is just the plugin. So if you don't wanna be coding, like I'm sure you wouldn't wanna create this manually every single time, there's actually an amazing plugin that I'm going to share with you. And what it allows you to do is to, for example, if I wanted to create one of these code blocks, I would just go like that. Let's say this is a test. And then you can see that it, it literally just like styles it exactly according to the styling. So the plugin that I'm referring to is a really cool plugin. It's called, um, Text Snippets. So, um, this is the name. If you go to the community panel over here and you just go to browse, you type in snippets, it's gonna show up over there. So just make sure that you have that installed. And then there's a couple of things that you're gonna wanna do. So, um, when you, um, like underneath this video, there's a link and you can go to my Patreon where I've actually got this hosted completely for free. You can, um, grab this text. And then you just want to make sure that you've pasted it in here. And this is going to give you access to all of the different styling blocks. I also mentioned the different names that you can use. Um, so yeah, I'll, I'll mention all of that when you download it. Um, now you're going to want to paste that in there. And then the next thing is depending on your setup, you also want to set the hotkey. So, um, usually it's defaulted on Tab. I've changed it to Space. And then inside of your hotkeys, you want to just type in Snippets, And then you see over here, uh, I've set it to Control or Command plus the spacebar. So basically what happens is if I, um, wanna type in, um, one of these, like if I say emphasis, uh, dark, I can just type that and then say test. And it's gonna show, um, exactly like that. So super quick. You don't have to look at any code once you've got this set up. Now, the next thing, um, to, complete this whole setup, once you've actually added the, the code over here, um, the last thing that you need to do, so make sure you got this. And then the last thing you need to do is go to your Appearance and you want to scroll down to where it says CSS Snippets. Now over here, um, you want to click on this Open Snippets Folder, and then it's going to open, um, this folder. Now you're going to download the file that's linked inside of my Patreon and just paste that file inside over here. And then from there, it's gonna work, um, just seamlessly inside of your vault. And you'll have access to all of these different, uh, code blocks that I've created. So yeah, I'm really excited for you to try this out. Let me know in the comments, uh, what you think of this and how you're using it. And I'm also gonna be making a video soon on the different plugins that I'm using in Obsidian. There's quite a lot. Um, but I feel that make your whole experience just so much better and make the, the software more powerful. So stay tuned for that video. Thanks for watching, and I'll see you in the next one.
