bladeacer's Obsidian Snippets Collection

This repository is a collection of CSS snippets for the note taking application Obsidian.

Why another snippet collection?

There are quite a few snippet collections by the Obsidian community. Here are some of the reasons I decided to make my own:

• I do not really know where to begin to contribute to all of them
• I wish to showcase some of the more niche snippets I found or made, especially those from my theme flexcyon.
• Utilities like the bundled snippet extraction script can be used in other snippet collections

Snippets in this repository

From flexcyon

View this directory for the snippets

• Accessibility
• ASCII Art in new tab
• Vim Mode Status
• Callouts
  • Callout color
  • Callout extended color
  • No Icon/Background
  • Horizontal/vertical alignment
  • Vertical alignment
  • Text transform
  • and many others...

Extracting your own snippets

Enclose your snippet(s) of interest like this

/* obsi-snip-coll start */
body {
    font-size: 1.2rem;
}
/* obsi-snip-coll end */

Make use of the extraction script.

Ensure you have Python installed (check with which python, install it on Windows)

You do not need a virtual environment for the script, it calls Python's standard library only.

Follow the supported .env formats to configure target sources:

• Single source
• Multiple sources

Currently only supports targeting individual CSS files. A PR is welcome for folder support.

cp .env.dev-2 .env
vim .env

Set permissions if you are on Linux.

chmod +x ./extract-snippets.py

Run the script.

./extract-snippets.py

Metadata completions

/* obsi-snip-coll start: font-size */
body {
    font-size: 1.2rem;
}
/* obsi-snip-coll end */

If the same source and name (in this case font-size) matches what is found in the metadata file it would load the descriptors for you. This means you should only need to enter descriptors once, or can edit the completion options manually here.

This also means you can define descriptors before you ever run the script if you assign each snippet with their names and input their name when prompted

How are my snippets checked?

The script never relies on line numbers alone, it follows this hierarchy to identify and manage snippets:

1. Minified CSS Content Match
2. Line Count Match with Proximity Check
3. Fallback and Prompting

Why I made the script

A standardised, theme and vault agnostic means of extracting CSS snippets into my CSS snippet collection. I find it useful for extracting and managing snippets from various sources.

Troubleshooting

Error message, crash when metadata after exiting and re-entering metadata for new snippets.

Remove snippets/index.json. When you run the script again, it will generate an updated version in its place.

Contributing

PRs, Issues, Bug Reports are welcome. I hope that the script and snippets would be useful to the community :D

Recommended snippets to install

• efemkay / Obsidian Modular CSS Layout
• HandaArchitect / obsidian-banner-snippet

Other snippet collections

Click to expand/collapse

• #appearance - Obsidian discord
• Obsidian CSS Quick Guide (forum) (mostly about using the inspector) -
• CSS Variables at Obsidian Dev Docs
• replete / obsidian-minimal-theme-css-snippets
• SlRvb's snippets collection | Guide
• zamsyt / obsidian-snippets
• ElsaTam / Obsidian-Stuff
• KuiyueRO / Obsidian-Miner
• sailKiteV / Obsidian-Snippets-and-Demos
• TfTHacker / DashboardPlusPlus
• eb2ai / My-Checklists-and-Icons
• xhuajin / obsidian-sidenote-callout

Credits

• r-u-s-h-i-k-e-s-h / Obsidian CSS Snippets
• The wonderful #appearance community on the Obsidian Members' Group Discord