obsidian callouts

Author: breezy-codes

content/blog-posts/2023-11-04-creating-form-spam.md

@@ -19,6 +19,7 @@ At the outset, I wasn't entirely sure how to approach this task. I had just comp
 ## The Code
 
 Below is the Python code used to automate the form spamming process:
+
 ```py
 import requests
 from faker import Faker

content/blog-posts/2024-04-03-picking-cybersecurity.md

@@ -14,7 +14,7 @@ Then came 2022, a year I've since coined "The Year of Data Breaches." Witnessing
 
 ## The Eureka Moment:
 
-I've always had a knack for spotting patterns—connecting dots over breakfast cereal is my kind of jam. My curiosity peaked when I saw a news segment about these breaches. Despite the sea of incomprehensible numbers on the screen which were definitely just for show, something clicked. "How cool is this?" I thought. The only catch? My self-proclaimed ineptitude at math, thanks to my high school days (but that's a story for another blog post).
+I've always had a knack for spotting patterns, connecting dots over breakfast cereal is my kind of jam. My curiosity peaked when I saw a news segment about these breaches. Despite the sea of incomprehensible numbers on the screen which were definitely just for show, something clicked. "How cool is this?" I thought. The only catch? My self-proclaimed ineptitude at math, thanks to my high school days (but that's a story for another blog post).
 
 Driven by curiosity, I dove headfirst into researching data breaches. Questions like "Why isn't our data more secure?" and "How do hackers easily snatch our information?" consumed me. This obsession, possibly fueled by my ADHD, led me to explore degrees in cybersecurity.
 
@@ -24,4 +24,4 @@ Fast forward to March 2023, and there I was, embarking on my cybersecurity degre
 
 ## The Takeaway:
 
-If you've made it this far, here's my nugget of wisdom: When you stumble upon something that ignites your curiosity—no matter how unexpected—chase it. The path may not lead where you initially thought, but the journey? It's guaranteed to take you to places beyond your wildest dreams.
+If you've made it this far, here's my nugget of wisdom: When you stumble upon something that ignites your curiosity, no matter how unexpected, chase it. The path may not lead where you initially thought, but the journey? It's guaranteed to take you to places beyond your wildest dreams.

content/blog-posts/2024-04-08-sucked-at-maths-in-school.md

@@ -1,8 +1,8 @@
-# I sucked at maths in highschool!
+# I sucked at maths in highschool
 
 Imagine thinking you're not cut out for academic success because high school was a battleground where victory seemed impossible. Now, fast forward a few years, and picture yourself receiving accolades for your mathematical success in university. Sounds like a dream? Well, it became my reality. From barely scraping by in high school to having my mathematical reports published in the Deakin Maths Yearbook – twice in a single year – my journey is a demonstration of the fact that past struggles don't define your future potential. This isn't just my story; it's a beacon of hope for anyone who's ever felt defeated by their academic journey. If you've ever doubted your capabilities or felt overwhelmed by educational hurdles, this story is especially for you.
 
-## Oh High school….
+## Oh High school…
 
 Yep, as the title hints, I was far from a math wizard in high school. To be honest, I wasn't exactly acing any of my subjects. But here's the kicker – it really doesn't matter. Not in the grand scheme of things. My high school years were a blend of minimal effort and maximum daydreaming, partly due to un-diagnosed ADHD—a challenge I only faced head-on in adulthood. I was that student who passed, yes, but just barely, doing the absolute minimum to get by.
 
@@ -25,4 +25,3 @@ Interestingly, my work on quantum cryptography played a significant role in buil
 ## So! Embrace the Journey
 
 If there's anything my journey has taught me, it's that past academic struggles are not a life sentence. They're merely stepping stones to greater successes. Whether you're battling ADHD, facing academic hurdles, or simply doubting your capabilities, remember this: with the right strategies, support, and mindset, transformation is not just possible; it's inevitable. Your story isn't over; it's just waiting for its next chapter to be written. Share your journey, seek support when needed, and never stop exploring your passions.
-

content/blog-posts/2025-01-17-using-figlet-and-lolcat.md

@@ -14,7 +14,7 @@ Figlet is a tool for generating ASCII art from text. Use the appropriate command
 sudo pacman -S figlet
 ```
 
-Then do - 
+Then do -
 
 ```bash
 yay -S figlet-fonts
@@ -34,67 +34,82 @@ sudo apt install figlet figlet-data
 Lolcat adds vibrant rainbow colours to your terminal output, making your Figlet creations even more eye-catching.
 
 ### **For Arch-based Systems:**
+
 ```bash
 sudo pacman -S lolcat
 ```
 
 ### **For Ubuntu-based Systems:**
+
 ```bash
 sudo apt install lolcat
 ```
 
 ---
 
 ## **Step 4: Verify the Installation**
+
 Ensure everything is set up correctly:
 
 1. **List Available Fonts:**
+
    ```bash
    figlist
    ```
+
    This command will display all of the available figlet font files on your system.
 
 2. **Output all fonts to a txt file:**
 
     To preview all of the available fonts, you can output them to a text file by running the following commands:
+
    ```bash
    cd ~/Desktop
    showfigfonts > figlet_fonts.txt
    ```
+
    This command will save the list of available figlet fonts to a text file named `figlet_fonts.txt`.
    Outputting to a txt file is a handy way to be able to preview **all** of the fonts available to you as there is a lot of them and your terminal may not be able to display them all at once.
    I've also added the output as a page if you'd like to view it [all figlet fonts](content/blog-posts/2025-01-17-using-figlet-and-lolcat.md)
 
 3. **Test Figlet Output:**
-   
+
    Run the following to test Figlet:
+
    ```bash
    figlet -f slant "Success"
    ```
 
 4. **Combine Figlet with Lolcat:**
-   
+
    Add some colour to your output:
+
    ```bash
    figlet -f slant "Success" | lolcat
    ```
+
    You should see a colourful ASCII-styled message in your terminal.
 
     ![alt text](../../img/blogs/figlet/figlet1.png)
+
 ---
 
 ## **Example Usage**
+
 Here are some examples to try:
 
 1. **Custom Welcome Message:**
+
    ```bash
    figlet -f big "Welcome" | lolcat
    ```
 
    ![alt text](../../img/blogs/figlet/figlet2.png)
 
 2. **Dynamic Output:**
+
    Combine Figlet and Lolcat with other commands:
+
    ```bash
    echo "Hello, $(whoami)!" | figlet | lolcat
    ```
@@ -106,9 +121,11 @@ Here are some examples to try:
 Now that you have Figlet working, let’s enhance it with Lolcat’s colourful output.
 
 1. **Basic Test**:  
+
    ```bash
    figlet -f ansi_shadow "HI BREEZY" | lolcat
    ```
+
    This will display a vibrant, rainbow-colored message.
 
    ![alt text](../../img/blogs/figlet/figlet4.png)
@@ -119,28 +136,35 @@ Now that you have Figlet working, let’s enhance it with Lolcat’s colourful o
    - **`-a` (Animation)**:  
      Enables animated colouring that cycles through colours over time.  
      Example:  
+
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat -a
      ```
+
      ![*(Video: First Animation)*](../../img/blogs/figlet/figlet5.gif)
 
    - **`-d` (Delay)**:  
      Sets the delay in milliseconds for animated frames when `-a` is enabled.  
      Example:  
+
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat -a -d 5
      ```
+
     ![*(Video: Delayed Animation)*](../../img/blogs/figlet/figlet6.gif)
 
    - **`-F` (Frequency)**:  
      Adjusts the rainbow frequency. Lower values create smoother gradients.  
-     Examples:  
+     Examples:
+  
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat -F 0.3
      ```
+
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat -F 0.5
      ```
+
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat -F 0.7
      ```
@@ -150,21 +174,28 @@ Now that you have Figlet working, let’s enhance it with Lolcat’s colourful o
    - **Without Options**:  
      By default, `lolcat` applies a static rainbow gradient.  
      Example:  
+
      ```bash
      figlet -f ansi_shadow "HI BREEZY" | lolcat
      ```
+
      ![*(Image: Static Gradient)*](../../img/blogs/figlet/figlet8.png)
 
 3. **Creative Uses**:  
    - **Rainbow String**:  
+
      ```bash
      echo "Hello, Breezy!" | lolcat
      ```
+
    - **Animate Directory Listing**:  
+
      ```bash
      ls -la | lolcat -a -d 10
      ```
+
    - **Rainbow File Output**:  
+
      ```bash
      cat yourfile.txt | lolcat -a -d 3
      ```
@@ -181,6 +212,7 @@ Decide on the text you'd like to display, whether to use Lolcat, and which fonts
 2. Add the following line at the very beginning to display your message every time you open the terminal:
 
    (can change the message, font and lolcat options to whatever you'd like)
+
    ```bash
    figlet -f ansi_shadow "HI BREEZY" | lolcat -F 0.3
    ```
@@ -189,7 +221,7 @@ Decide on the text you'd like to display, whether to use Lolcat, and which fonts
 
 Here’s an example of how it looks when I first open my terminal:
 ![alt text](../../img/blogs/figlet/figlet9.png)
-
+ 
 ---
 
 ### **Using Figlet with Custom Colours**
@@ -198,6 +230,7 @@ For a more personalised touch, you can use ANSI colour codes to apply specific c
 
 1. **Run the Following Script**:  
    This script uses a set of predefined ANSI colours to apply vibrant hues to Figlet text, cycling through them line by line:
+
    ```bash
     # Define colors
     colors=(

content/blog-posts/2025-06-17-making-callouts-obsidian.md

@@ -0,0 +1,127 @@
+# How to make Custom Callouts in Obsidian
+
+After spending some time experimenting with different ways to style my notes, I realized I wanted custom callouts in Obsidian, but without adding yet another plugin. I’m trying to keep my setup lean and avoid relying on too many plugins for core features. This guide is the result of my process figuring out how to create my own custom callouts using just CSS, so you can do the same!
+
+Callouts are a powerful way to visually style notes in [Obsidian](https://obsidian.md), especially when organising research, study notes, to-do lists, or even documenting your projects. While Obsidian comes with built-in callout styles like `> [!note]`, you can easily create your own custom callouts with a bit of CSS.
+
+This post will walk you through how to make your own **custom callout blocks** in Obsidian.
+
+---
+
+## Step 1: Enable Custom CSS Snippets
+
+Before we begin, make sure you’ve enabled CSS snippets in Obsidian:
+
+1. Open **Settings** → **Appearance**
+2. Scroll down to **CSS snippets**
+3. Click **Open snippets folder**
+4. Create a new `.css` file, for example: `custom-callouts.css`
+5. Back in Obsidian, toggle your new snippet **on**
+
+---
+
+## Step 2: Define a Custom Callout Block in the css file
+
+Here’s an example of a custom callout called `figure` with a pink theme and a pencil icon:
+
+```css
+/* === FIGURE === */
+.callout[data-callout="figure"] {
+    --callout-color: 255, 121, 198;
+    --callout-icon: lucide-pencil;
+    background-color: rgba(255, 121, 198, 0.2);
+}
+```
+
+To use this in your note, write:
+
+```markdown
+> [!figure]
+> This is a **figure** callout. Great for highlighting diagrams or illustrations.
+```
+
+This is how it looks in Obsidian:
+
+![alt text](../../img/blogs/obidian_callouts/fig1.png)
+
+And voilà, Obsidian will render it with your defined styles.
+
+---
+
+## Customise Labels, Icons & Colors
+
+You can define any name for your callout, it can be `[!theorem]`, `[!tip]`, `[!poetry]`, or whatever suits your workflow. Each one can be styled uniquely by modifying:
+
+* `--callout-color`: the RGB value of your theme
+* `--callout-icon`: choose any [Lucide Icon](https://lucide.dev/) (used by Obsidian)
+
+Here's another example using a theorem block:
+
+```css
+/* === THEOREM === */
+.callout[data-callout="theorem"] {
+    --callout-color: 189, 147, 249;
+    --callout-icon: lucide-square-sigma;
+    background-color: rgba(189, 147, 249, 0.2);
+}
+```
+
+Use it in your note like this:
+
+```markdown
+> [!theorem]
+> **Theorem (Pythagoras)**  
+> In a right-angled triangle:  
+> $a^2 + b^2 = c^2$
+```
+
+This will render as:
+
+![alt text](../../img/blogs/obidian_callouts/fig2.png)
+
+Most of the ones I've made have been for equations, theorems, figures or other mathematical content, but you can create any type of callout you need. I even made some "warning" ones:
+
+```css
+/* === ATTENTION, CAUTION, WARNING === */
+.callout[data-callout="attention"],
+.callout[data-callout="caution"],
+.callout[data-callout="warning"] {
+    --callout-color: 241, 250, 140;
+    --callout-icon: lucide-alert-triangle;
+    background-color: rgba(241, 250, 140, 0.2);
+}
+```
+
+Use them like this:
+
+```markdown
+
+> [!attention]
+> Attention! This area is under construction.
+
+> [!caution]
+> Caution: The process may overwrite existing data.
+
+> [!warning]
+> Warning: Unsaved changes will be lost.
+```
+
+This will render as:
+
+![alt text](../../img/blogs/obidian_callouts/fig3.png)
+
+---
+
+## Useful Links
+
+* [📘 Obsidian Callouts Documentation](https://help.obsidian.md/Editing+and+formatting/Callouts)
+* [🎨 Lucide Icon Library](https://lucide.dev/)
+
+---
+
+## 🧪 Final Tips
+
+* You can define as many custom callouts as you like, one for each purpose.
+* Keep your styles readable by using soft background `rgba` values.
+* Consider matching your callouts to your Obsidian theme for a cohesive look.
+* You can even use transparent or darkened backgrounds to create layered effects.