Obsidian Snippets

My personal Obsidian snippets.

Adding & Enabling Snippets

Learn to add and enable a snippet on Obsidian's Help Site.

[!IMPORTANT] For all of the below snippets, make sure to enable the relevant snippet file for the snippet to take effect.

CSS Classes

[!TIP] How to add a cssclass to a note?

1. First, add a property named cssclasses (this is a default one provided by Obsidian)
2. Add the class name detailed below to apply it to the note

Properties syntax at the top of the note

---
cssclasses:
  - cssclass-goes-here
---

CSS Class	Description	Snippet File
full-width	Negates the setting Readable line length for a note	note-full-line-width.css
bases-no-toolbar	Hides a base's toolbar, including those in code blocks1	bases-no-toolbar.css
callout-blend-mode-unset	Sets all callouts' blend mode in the note to normal2	callout-blend-mode-unset.css

Callouts

More info on callouts.

Types

Type	Description	Snippet File
[!chat]	Display chats with nested callouts, more info	callout-chat.css
[!grid]	Structure content inside this callout in a grid, more info	callout-grid.css
[!caption]	Caption images or other content, more info	callout-captions

Metadata

[!TIP] Metadata is added to a callout in the square brackets of the type identifier, after the type itself with a pipe (|):

> [!type|metadata another-metadata]

Metadata	Abbreviation	Description	Snippet File
hide-title		Hides the callout's title	callout-hide-title
hide-background	hide-bg	Hides the callout's background	callout-hide-background.css
border		Adds a border to the callout	callout-border.css
blend-unset		Sets the callout's blend mode to normal3	callout-blend-mode-unset.css

Bases

Alt

[!TIP] Alt text is added to an embedded base in the square brackets, after the file name itself with a pipe (|):

![[Games.base|alt another-alt]]

[!IMPORTANT] Alt text can only be added to bases that are not embedded through a code block directly. To apply the no-toolbar class to the full note, see CSS Classes.

Alt	Description	Snippet File
no-toolbar	Hides the base's toolbar3	bases-no-toolbar.css

Other

[!TIP] These snippets only need to be enabled, and take effect on the full vault.

Snippet File	Description
print-no-breaks-after-heading.css	Avoids putting a page break right after any heading or callout title when exporting to PDF or printing
table-alternating-colours.css	Alternates the colours of markdown tables
page-preview-show-title.css	Makes the title visible in the page previews
bases-list-unset-min-height.css	Unsets the minimum height imposed on only the list view of Bases
callout-embedded-images-remove-scrolling.css	Fixes a bug where internal images when embedded in a callout cause the callout to have a scrollbar, due to the image automatically getting a 3px padding on the right and bottom. Forum post about it can be found here.

Footnotes

1. Can be applied to individual embedded bases too, see Bases > Alt for more ↩

2. Can be applied to individual callouts too, see Callouts > Metadata for more ↩

3. Can be applied to the full note too, see CSS Classes for more ↩ ↩²