obsidian-sidenote-callout's Introduction

obsidian-sidenote-callout

Using the built-in callout syntax in Obsidian, it keeps notes clean and is extremely simple to use. Testing page is generaged by menzi11/BullshitGenerator(github.com)

Theme：Obsidian Nord

Theme: minimal

Feature

Achieve side note effects by rendering callouts with CSS.
It can be correctly renderred in both Live Preview mode and Reading View.
Adaptable to multiple themes.

Usage

Before we use it, download the sidenote-callout.css and add the css to your vault.

If you want the annotation to appear on the left side, you should phrase it like this.

> [!NOTE|aside-l] annotation
> annotation on the left side

If you want the annotation to appear on the right side, change aside-l to .

> [!NOTE|aside-r] annotation
> annotation on the right side

The folding syntax of callouts is also applicable.

> [!NOTE|aside-l]+ annotation
> Default-expanded annotations.

> [!NOTE|aside-r]- annotation
> Default-collapsed annotations.

Try different types of callouts.

> [!ERROR|aside-l] ERROR Style
> Other style is available too.(important, tip, cite and even your customized callout styles.)

Style Settings

You can customize the style of sidenotes using the Style Settings plugin.

For example:

Enable Callout Background
place the sidenote title at the top
Enable Hide Fold Icon

Theme：Obsidian Nord

Theme: minimal

Shortcomings

The screen can only be fully displayed if it is large enough, and it may not be fully displayed when it is split on a phone or computer.
Sidenote callout titles should not be too long if the callout-title is not set to top, cause it may cause deformation.
The support for exporting styles to PDF is in progress.(doing)
The position of sidenote callout can only be on the side, can not move up and down.(doing)