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          # interactive mode
./extract-snippets.py -y       # auto-accept weak matches
./extract-snippets.py -n       # non-interactive, use defaults
./extract-snippets.py -ny      # fully automatic mode
./extract-snippets.py --validate  # check metadata.json consistency

CLI options:

• -h, --help - show usage with examples
• -y, --yes - auto-accept weak matches without prompting
• -n, --non-interactive - non-interactive mode, use defaults for all prompts (no stdin needed)
• --validate - cross-check metadata.json entries against actual files and exit
• -e, --env ENV_PATH - path to .env file (default: ./.env)

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.

Metadata is also consulted when an existing snippet is matched and updated - the description and subdirectory from metadata.json are used when regenerating the markdown file.

You can define descriptors before you ever run the script by assigning names to each snippet and writing their metadata manually.

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 - compares minified (comments + whitespace removed) content
2. Exact Index Key Match - matches by source name, file name, and filtered line range
3. Line Count + Proximity Match - same line count within 30 lines auto-update; beyond 30 prompts or skipped depending on flags (-y, -n)
4. Fallback and Prompting - no match found, interactive prompt for new entry

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