{"id":15017138,"url":"https://github.com/ebullient/markdown-it-obsidian-callouts","last_synced_at":"2025-04-12T11:41:02.202Z","repository":{"id":214819597,"uuid":"737283328","full_name":"ebullient/markdown-it-obsidian-callouts","owner":"ebullient","description":"markdown-it plugin for GitHub and Obsidian callouts.","archived":false,"fork":false,"pushed_at":"2025-03-31T19:01:49.000Z","size":223,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T13:08:25.922Z","etag":null,"topics":["markdown-it","markdown-it-plugin","obsidian","obsidian-md"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ebullient.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"buy_me_a_coffee":"ebullient"}},"created_at":"2023-12-30T13:22:05.000Z","updated_at":"2025-03-31T19:00:13.000Z","dependencies_parsed_at":"2024-01-29T19:28:48.456Z","dependency_job_id":"ac475cd8-dc6d-4844-800e-8e811118943b","html_url":"https://github.com/ebullient/markdown-it-obsidian-callouts","commit_stats":{"total_commits":84,"total_committers":5,"mean_commits":16.8,"dds":0.3928571428571429,"last_synced_commit":"01ece80965b3f69a30570a47f1576e71716d16a2"},"previous_names":["ebullient/markdown-it-obsidian-callouts"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebullient%2Fmarkdown-it-obsidian-callouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebullient%2Fmarkdown-it-obsidian-callouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebullient%2Fmarkdown-it-obsidian-callouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebullient%2Fmarkdown-it-obsidian-callouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ebullient","download_url":"https://codeload.github.com/ebullient/markdown-it-obsidian-callouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248563036,"owners_count":21125194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown-it","markdown-it-plugin","obsidian","obsidian-md"],"created_at":"2024-09-24T19:49:56.349Z","updated_at":"2025-04-12T11:41:02.174Z","avatar_url":"https://github.com/ebullient.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/ebullient"],"categories":[],"sub_categories":[],"readme":"# markdown-it-obsidian-callouts\n\nPlugin for markdown-it to support GitHub and Obsidian callouts, \nas well as codeblock admonitions supported by the [Admonition plugin](https://github.com/javalent/admonitions).\n\nIt uses Obsidian default icons and callout flavors out of the gate.\n\n## Usage\n\n```javascript\nconst markdownIt = require('markdown-it');\nconst mdItObsidianCallouts = require('markdown-it-obsidian-callouts');\n\nconst md = new MarkdownIt()\nmd.use(mdItObsidianCallouts);\n```\n\n## Callouts and Admonitions\n\nThe following four variations will produce the same html.\n\nCallout:\n\n```md\n\u003e [!note] title\n\u003e Hello World!\n\u003e \u003e [!warning] a warning\n\u003e \u003e This is a nested warning callout\n```\n\nA callout with nested code-block admonition:\n\n```md\n\u003e [!note] title\n\u003e Hello World!\n\u003e ~~~ad-warning\n\u003e title: a warning\n\u003e This is a nested warning callout\n\u003e ~~~\n```\n\nCode-block admonition with nested callout: \n\n```md\n~~~ad-note\ntitle: title\nHello World!\n\u003e [!warning] a warning\n\u003e This is a nested warning callout\n~~~\n```\n\nCode-block admonition with nested code-block admonition: \n\n```md\n~~~~ad-note\ntitle: title\nHello World!\n~~~ad-warning\ntitle: a warning\nThis is a nested warning callout\n~~~\n~~~~\n```\n\nThe above nested admonition will generate the following html (it will sadly be less tidy):\n\n```html\n\u003cdiv class=\"callout\" data-callout=\"note\"\u003e\n  \u003cdiv class=\"callout-title\"\u003e\n    \u003cdiv class=\"callout-title-icon\"\u003e\n      \u003csvg ... class=\"lucide lucide-pencil\"\u003e ... \u003c/svg\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"callout-title-inner\"\u003etitle\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"callout-content\"\u003e\n    \u003cp\u003eHello World!\u003c/p\u003e\n    \u003cdiv class=\"callout\" data-callout=\"warning\"\u003e\n      \u003cdiv class=\"callout-title\"\u003e\n        \u003cdiv class=\"callout-title-icon\"\u003e\n          \u003csvg ... class=\"lucide lucide-alert-triangle\"\u003e ... \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"callout-title-inner\"\u003ea warning\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"callout-content\"\u003e\n        \u003cp\u003eThis is a nested warning callout\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis emulates Obsidian callout behavior. The element structure amd CSS classes are the same, some mechanics are different.\n\n## Icons\n\nDefault icons are as used by obsidian, and come from [lucide.dev](https://lucide.dev/)\n\nVersion 0.268.0  \nISC License  \nCopyright (c) 2020, Lucide Contributors  \n\n## Add css\n\nIf you use it in other environments like vuepress/vitepress, you may need to add your own css, as this plugin only generates dom structures.\n\nYou 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.\n\n\u003e [!note]\n\u003e \n\u003e Why not set the default style to make it easier to use?\n\u003e \n\u003e 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\n\n## Similar plugins\n\n- https://github.com/alexjv89/markdown-it-obsidian - add suport for obsidian wikilinks\n- https://github.com/glitchassassin/markdown-it-obsidian-images - add support for obsidian wikilinks for images\n- https://github.com/antfu/markdown-it-github-alerts - support for github alerts as annotated blockquote\n- https://github.com/commenthol/markdown-it-admon - rST-style admonitions\n- https://github.com/docarys/markdown-it-admonition - Docarys admonitions\n- https://github.com/mdit-plugins/mdit-plugins - collection of plugins for markdown-it, including callout-style admonitions","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febullient%2Fmarkdown-it-obsidian-callouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febullient%2Fmarkdown-it-obsidian-callouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febullient%2Fmarkdown-it-obsidian-callouts/lists"}