Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ebullient/markdown-it-obsidian-callouts
markdown-it plugin for GitHub and Obsidian callouts.
https://github.com/ebullient/markdown-it-obsidian-callouts
markdown-it markdown-it-plugin obsidian obsidian-md
Last synced: 3 months ago
JSON representation
markdown-it plugin for GitHub and Obsidian callouts.
- Host: GitHub
- URL: https://github.com/ebullient/markdown-it-obsidian-callouts
- Owner: ebullient
- License: apache-2.0
- Created: 2023-12-30T13:22:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-11T13:40:39.000Z (3 months ago)
- Last Synced: 2024-10-12T06:27:27.925Z (3 months ago)
- Topics: markdown-it, markdown-it-plugin, obsidian, obsidian-md
- Language: TypeScript
- Homepage:
- Size: 131 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-obsidian-callouts
Plugin for markdown-it to support GitHub and Obsidian callouts,
as well as codeblock admonitions supported by the [Admonition plugin](https://github.com/javalent/admonitions).
It uses Obsidian default icons and callout flavors out of the gate.
## Usage
```javascript
const markdownIt = require('markdown-it');
const mdItObsidianCallouts = require('markdown-it-obsidian-callouts');
const md = new MarkdownIt()
md.use(mdItObsidianCallouts);
```
## Callouts and Admonitions
The following four variations will produce the same html.
Callout:
```md
> [!note] title
> Hello World!
> > [!warning] a warning
> > This is a nested warning callout
```
A callout with nested code-block admonition:
```md
> [!note] title
> Hello World!
> ~~~ad-warning
> title: a warning
> This is a nested warning callout
> ~~~
```
Code-block admonition with nested callout:
```md
~~~ad-note
title: title
Hello World!
> [!warning] a warning
> This is a nested warning callout
~~~
```
Code-block admonition with nested code-block admonition:
```md
~~~~ad-note
title: title
Hello World!
~~~ad-warning
title: a warning
This is a nested warning callout
~~~
~~~~
```
The above nested admonition will generate the following html (it will sadly be less tidy):
```html
title
Hello World!
a warning
This is a nested warning callout
```
This emulates Obsidian callout behavior. The element structure amd CSS classes are the same, some mechanics are different.
## Icons
Default icons are as used by obsidian, and come from [lucide.dev](https://lucide.dev/)
Version 0.268.0
ISC License
Copyright (c) 2020, Lucide Contributors
## Add css
If you use it in other environments like vuepress/vitepress, you may need to add your own css, as this plugin only generates dom structures.
You can use the [index.css](./style/index.css), The css content is exactly the same as the style of the callout in obsidian (I screened, copied, pasted and modified it from ob). And I adapted the shading mode for vuepress and vitepress.
> [!note]
>
> Why not set the default style to make it easier to use?
>
> If you want to default the style in markdown-it, you can only set it on the dom style through property Settings, which can make custom changes difficult
## Similar plugins
- https://github.com/alexjv89/markdown-it-obsidian - add suport for obsidian wikilinks
- https://github.com/glitchassassin/markdown-it-obsidian-images - add support for obsidian wikilinks for images
- https://github.com/antfu/markdown-it-github-alerts - support for github alerts as annotated blockquote
- https://github.com/commenthol/markdown-it-admon - rST-style admonitions
- https://github.com/docarys/markdown-it-admonition - Docarys admonitions
- https://github.com/mdit-plugins/mdit-plugins - collection of plugins for markdown-it, including callout-style admonitions