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 ↩ ↩²