Markdown Obsidian Alert & Math Theorem

English	中文

Support for Obsidian-style callouts in Markdown previews, including Jupyter Notebook previews.

Preview Examples

Check out test.md for comprehensive examples and usage patterns.

Features

🎨 Obsidian-Style Callouts

Render beautiful Obsidian-style admonition blocks with simple syntax:

• Basic: > [!KEYWORD]
• With custom title: > [!KEYWORD] Your Title Here

Supported keywords (case-insensitive):

• NOTE, ABSTRACT, SUMMARY, INFO, TODO
• TIP, HINT, IMPORTANT, SUCCESS, CHECK, DONE
• QUESTION, HELP, FAQ, WARNING, CAUTION, ATTENTION
• FAILURE, FAIL, MISSING, DANGER, ERROR, BUG
• EXAMPLE, QUOTE, CITE, PDF, BORDER

Built-in layout helpers:

• MULTI-COLUMN for callout-based column layouts
• *-BLANK variants such as NOTE-BLANK and WARNING-BLANK for decoration-free containers
• Metadata presets such as style-1 to style-4, col2 to col5, wide-2 to wide-5, and caption

🧮 Mathematical Theorem Environments

Professional typesetting for mathematical documents with automatic numbering and flexible customization:

Environment	Keyword
Theorem	THM
Definition	DEF
Lemma	LEM
Proposition	PRP
Corollary	COR
Claim	CLM
Assumption	ASM
Example	EXM
Exercise	EXR
Hypothesis	HYP
Remark	RMK
Axiom	AXM
Conjecture	CNJ

Theorem features:

• Automatic numbering: > [!THM] (Theorem 1, Theorem 2, ...)
• Unnumbered: > [!THM|*]
• Manual numbering: > [!THM|A] (Theorem A)

🔄 Collapsible Blocks

Create interactive, collapsible callouts:

• Expandable: > [!NOTE]+ or > [!NOTE]+ Your Title
• Collapsed: > [!NOTE]- or > [!NOTE]- Your Title

✨ Smart Defaults

• Unsupported keywords gracefully fall back to NOTE style
• Case-insensitive keyword recognition
• Seamless integration with existing Markdown workflows

Usage Examples

> [!NOTE]
> This is a simple note callout

> [!WARNING] Important Security Notice
> Remember to update your passwords regularly

> [!THM]
> Every finite integral domain is a field

> [!THM|*]
> Pythagorean Theorem

> [!THM|A]
> This theorem has custom numbering

> [!TIP]+ Click to expand
> This tip is hidden until you click on it

Installation

1. Install from VS Code Marketplace
2. Alternatively, you can also download the extension from the GitHub Releases page.

Customization

You can customize callout styles using CSS. Here are the steps:

Markdown previews and Jupyter Notebook Markdown previews now use separate CSS settings:

1. Open VS Code settings (Ctrl + ,) and search for markdown.styles;
2. If you also want the same styles in .ipynb, search for markdown-obsidian-alert.notebook.styles and add the CSS path there too；
3. Add the path to your custom CSS file, for example:

   {
     "markdown.styles": ["./.vscode/custom.css"],
     "markdown-obsidian-alert.notebook.styles": ["./.vscode/custom.css"]
   }

4. Define your callout styles in the CSS file, for example, for a border-blue style:

   div[data-callout="border-blue"].callout {
     background-color: transparent;
     border: 1px solid;
     border-color: blue;
   }
   div[data-callout="border-blue"].callout > .callout-title {
     border-bottom: 1px solid;
   }
   div[data-callout="border-blue"].callout > .callout-title > .callout-icon {
     display: none;
   }

This extension also ships additional default presets for style-1 to style-4, multi-column layouts, and *-blank|caption image blocks.

Theoretically, you can use Obsidian snippets to achieve more complex styles.

---

Transform your Markdown documents with beautiful, functional callouts and professional mathematical formatting!

Style References

• Obsidian Default Styles
• LaTeX-like Theorem & Equation Referencer for Obsidian
• Obsidian PDF++
• Obsidian Border
• Obsidian Modular CSS Layout