mmckinnon/chirpy-starter
1
0
Fork 0
mirror of https://github.com/cotes2020/chirpy-starter.git synced 2025-04-19 19:03:27 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity
chirpy-starter/_site/posts/Admonitions-Documentation/index.html
ericlikedis 6409892add changes
2023-08-26 22:38:57 -05:00

4494 lines
81 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="en"
>
<!-- The Head -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta
name="viewport"
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
>
<!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.2" />
<meta property="og:title" content="Admonitions Documentation" />
<meta property="og:locale" content="en" />
<meta name="description" content="Note It appears a note in MarkDown is not possible currently. Reference: https://talk.commonmark.org/t/github-is-beta-testing-their-own-admonition-syntax-we-should-weigh-in/4173" />
<meta property="og:description" content="Note It appears a note in MarkDown is not possible currently. Reference: https://talk.commonmark.org/t/github-is-beta-testing-their-own-admonition-syntax-we-should-weigh-in/4173" />
<link rel="canonical" href="http://localhost:4000/posts/Admonitions-Documentation/" />
<meta property="og:url" content="http://localhost:4000/posts/Admonitions-Documentation/" />
<meta property="og:site_name" content="neo’s brain" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-08-23T10:33:39-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Admonitions Documentation" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2023-08-23T15:37:29-05:00","datePublished":"2023-08-23T10:33:39-05:00","description":"Note It appears a note in MarkDown is not possible currently. Reference: https://talk.commonmark.org/t/github-is-beta-testing-their-own-admonition-syntax-we-should-weigh-in/4173","headline":"Admonitions Documentation","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/Admonitions-Documentation/"},"url":"http://localhost:4000/posts/Admonitions-Documentation/"}</script>
<!-- End Jekyll SEO tag -->
<title>Admonitions Documentation | neo's brain
</title>
<!--
The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Generated by: https://realfavicongenerator.net/
-->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/img/favicons/site.webmanifest">
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="neo's brain">
<meta name="application-name" content="neo's brain">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="dns-prefetch" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="dns-prefetch" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://cdn.jsdelivr.net" >
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
<!-- GA -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css">
<!-- Manific Popup -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
<!-- JavaScript -->
<!-- Switch the mode between dark and light. -->
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() {
return 'mode';
}
static get MODE_ATTR() {
return 'data-mode';
}
static get DARK_MODE() {
return 'dark';
}
static get LIGHT_MODE() {
return 'light';
}
static get ID() {
return 'mode-toggle';
}
constructor() {
if (this.hasMode) {
if (this.isDarkMode) {
if (!this.isSysDarkPrefer) {
this.setDark();
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
}
}
}
let self = this;
/* always follow the system prefers */
this.sysDarkPrefers.addEventListener('change', () => {
if (self.hasMode) {
if (self.isDarkMode) {
if (!self.isSysDarkPrefer) {
self.setDark();
}
} else {
if (self.isSysDarkPrefer) {
self.setLight();
}
}
self.clearMode();
}
self.notify();
});
} /* constructor() */
get sysDarkPrefers() {
return window.matchMedia('(prefers-color-scheme: dark)');
}
get isSysDarkPrefer() {
return this.sysDarkPrefers.matches;
}
get isDarkMode() {
return this.mode === ModeToggle.DARK_MODE;
}
get isLightMode() {
return this.mode === ModeToggle.LIGHT_MODE;
}
get hasMode() {
return this.mode != null;
}
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
/* get the current mode on screen */
get modeStatus() {
if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
return ModeToggle.DARK_MODE;
} else {
return ModeToggle.LIGHT_MODE;
}
}
setDark() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
}
setLight() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
}
clearMode() {
document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
/* Notify another plugins that the theme mode has changed */
notify() {
window.postMessage(
{
direction: ModeToggle.ID,
message: this.modeStatus
},
'*'
);
}
flipMode() {
if (this.hasMode) {
if (this.isSysDarkPrefer) {
if (this.isLightMode) {
this.clearMode();
} else {
this.setLight();
}
} else {
if (this.isDarkMode) {
this.clearMode();
} else {
this.setDark();
}
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
} else {
this.setDark();
}
}
this.notify();
} /* flipMode() */
} /* ModeToggle */
const modeToggle = new ModeToggle();
</script>
<!-- A placeholder to allow defining custom metadata -->
</head>
<body>
<!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper">
<a href="/" id="avatar" class="rounded-circle">
</a>
<div class="site-title">
<a href="/">neo's brain</a>
</div>
<div class="site-subtitle fst-italic">just a bunch of technical write ups and notes.</div>
</div>
<!-- .profile-wrapper -->
<ul class="nav flex-column flex-grow-1 w-100 ps-0">
<!-- home -->
<li class="nav-item">
<a href="/" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>HOME</span>
</a>
</li>
<!-- the real tabs -->
<li class="nav-item">
<a href="/categories/" class="nav-link">
<i class="fa-fw fas fa-stream"></i>
<span>CATEGORIES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/tags/" class="nav-link">
<i class="fa-fw fas fa-tags"></i>
<span>TAGS</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/archives/" class="nav-link">
<i class="fa-fw fas fa-archive"></i>
<span>ARCHIVES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/about/" class="nav-link">
<i class="fa-fw fas fa-info-circle"></i>
<span>ABOUT</span>
</a>
</li>
<!-- .nav-item -->
</ul>
<!-- ul.nav.flex-column -->
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
<button class="mode-toggle btn" aria-label="Switch Mode">
<i class="fas fa-adjust"></i>
</button>
<span class="icon-border"></span>
<a
href="https://github.com/ericlikedis"
aria-label="github"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-github"></i>
</a>
<a
href="https://twitter.com/"
aria-label="twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-twitter"></i>
</a>
<a
href="javascript:location.href = 'mailto:' + ['ereymundo2013','gmail.com'].join('@')"
aria-label="email"
>
<i class="fas fa-envelope"></i>
</a>
<a
href="/feed.xml"
aria-label="rss"
>
<i class="fas fa-rss"></i>
</a>
</div>
<!-- .sidebar-bottom -->
</div>
<!-- #sidebar -->
<div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container px-xxl-5">
<!-- The Top Bar -->
<div id="topbar-wrapper">
<div
id="topbar"
class="container d-flex align-items-center justify-content-between h-100"
>
<span id="breadcrumb">
<span>
<a href="/">
Home
</a>
</span>
<span>Admonitions Documentation</span>
</span>
<!-- endof #breadcrumb -->
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
<div id="topbar-title">
Post
</div>
<i id="search-trigger" class="fas fa-search fa-fw"></i>
<span id="search-wrapper" class="align-items-center">
<i class="fas fa-search fa-fw"></i>
<input
class="form-control"
id="search-input"
type="search"
aria-label="search"
autocomplete="off"
placeholder="Search..."
>
</span>
<span id="search-cancel">Cancel</span>
</div>
</div>
<div class="row">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
<div class="post px-1 px-md-2">
<!-- Refactor the HTML structure -->
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
<!-- Change the icon of checkbox -->
<!-- images -->
<!-- CDN URL -->
<!-- Add image path -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- add class to exist <a> tag -->
<!-- combine -->
<!-- Add header for code snippets -->
<!-- Create heading anchors -->
<!-- return -->
<h1 data-toc-skip>Admonitions Documentation</h1>
<div class="post-meta text-muted">
<!-- published date -->
<span>
Posted
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class=""
data-ts="1692804819"
data-df="ll"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
Aug 23, 2023
</em>
</span>
<!-- lastmod date -->
<span>
Updated
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class=""
data-ts="1692823049"
data-df="ll"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
Aug 23, 2023
</em>
</span>
<div class="d-flex justify-content-between">
<!-- author(s) -->
<span>
By
<em>
<a href="https://github.com/username">Eric Reymundo</a>
</em>
</span>
<div>
<!-- read time -->
<!-- Calculate the post's reading time, and display the word count in tooltip -->
<!-- words per minute -->
<!-- return element -->
<span
class="readtime"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="2669 words"
>
<em>14 min</em> read</span>
</div>
</div> <!-- .d-flex -->
</div> <!-- .post-meta -->
<div class="post-content">
<blockquote>
<p><strong>Note</strong>
It appears a note in MarkDown is not possible currently.
Reference: https://talk.commonmark.org/t/github-is-beta-testing-their-own-admonition-syntax-we-should-weigh-in/4173</p>
</blockquote>
<p>GitHub Link: https://github.com/javalent/admonitions</p>
<h1 id="obsidian-admonition">Obsidian Admonition</h1>
<p>Adds admonition block-styled content to Obsidian.md, styled after <a href="https://squidfunk.github.io/mkdocs-material/reference/admonitions/">Material for MkDocs</a></p>
<h2 id="please-note"><span class="me-2">Please note!</span><a href="#please-note" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Obsidian 0.14 adds support for <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Callout boxes</a>!</p>
<p><strong>With this change, Admonitions will be transitioning to a plugin that enhances the core callout box feature.</strong></p>
<p>What does this mean, you might ask?</p>
<ol>
<li>All of your existing code block admonitions will continue to work, and will always work!</li>
<li>You can continue to use Admonitions to create custom types, and all of your custom types will just work as a callout, without you having to do anything!</li>
<li>If you have any Microsoft Document syntax admonitions, they will have to be converted to the new callout box syntax - there is a button in Admonition settings to auto-convert these for you.</li>
<li>You can use Admonitions to set default titles, default collapse states, or defaulting to not having a title.</li>
<li>Admonitions adds helpful editor suggestors for quickly entering your custom callout boxes.</li>
<li>Admonitions adds helpful commands for inserting callout boxes, including the ability to register commands for specific types.</li>
</ol>
<h2 id="usage"><span class="me-2">Usage</span><a href="#usage" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/all.gif"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/all.gif" alt="" class="lazyload" data-proofer-ignore></a></p>
<p>Place a code block with the admonition type:</p>
<pre><code class="language-ad-important">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
</code></pre>
<p>Becomes:</p>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/default.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/default.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<h2 id="options"><span class="me-2">Options</span><a href="#options" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>```ad-<type> # Admonition type. See below for a list of available types.
title: # Admonition title.
collapse: # Create a collapsible admonition.
icon: # Override the icon.
color: # Override the color.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.</type></p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="rouge-code"><pre>
Please note that as of **4.4.1**, the `title`, `collapse`, `icon` and `color` parameters must be at the _top_ of the block, in any order.
### Title
The admonition will render with the type of admonition by default. If you wish to customize the title, you can do so this way:
```ad-note
title: Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
</pre></td></tr></tbody></table></code></div></div>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/title.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/title.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<p>Custom titles are rendered as Markdown, so they support the full Obsidian Markdown syntax.</p>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/title-markdown.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/title-markdown.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/rendered-title-markdown.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/rendered-title-markdown.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<p>Leave the title field blank to only display the admonition.</p>
<pre><code class="language-ad-note">title:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
</code></pre>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/no-title.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/no-title.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<h3 id="collapsible"><span class="me-2">Collapsible</span><a href="#collapsible" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Use the <code class="language-plaintext highlighter-rouge">collapse</code> parameter to create a collapsible admonition.</p>
<p><code class="language-plaintext highlighter-rouge">collapse: open</code> will start the admonition opened on render, but allow collapse on click.</p>
<p>If a blank title is provided, the collapse parameter will not do anything.</p>
<p>Admonitions may be set to be collapsible by default in settings.</p>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/collapse.gif"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/collapse.gif" alt="" class="lazyload" data-proofer-ignore></a></p>
<h3 id="icon"><span class="me-2">Icon</span><a href="#icon" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>The admonition icon can be overridden using the <code class="language-plaintext highlighter-rouge">icon</code> parameter. <strong>The icon name entered must be the exact icon name from FontAwesome or RPGAwesome.</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="rouge-code"><pre>```ad-note
icon: triforce
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
```
</pre></td></tr></tbody></table></code></div></div>
<h3 id="color"><span class="me-2">Color</span><a href="#color" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>The admonition color can be overridden using the <code class="language-plaintext highlighter-rouge">color</code> parameter. <strong>The color entered must be an RGB triad.</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="rouge-code"><pre>```ad-note
color: 200, 200, 200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
```
</pre></td></tr></tbody></table></code></div></div>
<h3 id="no-content"><span class="me-2">No Content</span><a href="#no-content" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>An admonition with no content will render as just the title block.</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre></td><td class="rouge-code"><pre>```ad-note
```
</pre></td></tr></tbody></table></code></div></div>
<h2 id="nesting-admonitions"><span class="me-2">Nesting Admonitions</span><a href="#nesting-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Nesting admonitions may be done by increasing the number of backticks.</p>
<p>Example:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="rouge-code"><pre>`````ad-note
title: Nested Admonitions
collapse: open
Hello!
````ad-note
title: This admonition is nested.
This is a nested admonition!
```ad-warning
title: This admonition is closed.
collapse: close
```
````
This is in the original admonition.
`````
</pre></td></tr></tbody></table></code></div></div>
<h2 id="rendering-code-blocks-inside-admonitions"><span class="me-2">Rendering Code Blocks inside Admonitions</span><a href="#rendering-code-blocks-inside-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Code blocks may be nested inside admonitions using a method similar to <a href="https://github.com/javalent/admonitions#Nesting-Admonitions">Nesting Admonitions</a> above.</p>
<p>Additionally, for a single layer, the <code class="language-plaintext highlighter-rouge">~~~</code> markdown codeblock syntax may be used:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="rouge-code"><pre>````ad-info
```ad-bug
title: I'm Nested!
~~~javascript
throw new Error("Oops, I'm a bug.");
~~~
```
```javascript
console.log("Hello!");
```
````
</pre></td></tr></tbody></table></code></div></div>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/nested-code.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/nested-code.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<h2 id="admonition-types"><span class="me-2">Admonition Types</span><a href="#admonition-types" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>The following admonition types are currently supported:</p>
<p>Type</p>
<p>Aliases</p>
<p>note</p>
<p>note, seealso</p>
<p>abstract</p>
<p>abstract, summary, tldr</p>
<p>info</p>
<p>info, todo</p>
<p>tip</p>
<p>tip, hint, important</p>
<p>success</p>
<p>success, check, done</p>
<p>question</p>
<p>question, help, faq</p>
<p>warning</p>
<p>warning, caution, attention</p>
<p>failure</p>
<p>failure, fail, missing</p>
<p>danger</p>
<p>danger, error</p>
<p>bug</p>
<p>bug</p>
<p>example</p>
<p>example</p>
<p>quote</p>
<p>quote, cite</p>
<p>See <a href="https://squidfunk.github.io/mkdocs-material/reference/admonitions/">this</a> for a reference of what these admonitions look like.</p>
<p>The default admonitions are customizable by creating a user-defined admonition of the same name.</p>
<h2 id="custom-admonitions--callouts"><span class="me-2">Custom Admonitions &amp; Callouts</span><a href="#custom-admonitions--callouts" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Custom admonitions may be created in settings. Creating a custom admonition will also enable it to be used as an Obsidian callout.</p>
<p>Creating a new admonition requires three things: the type, the icon to use, and the color of the admonition.</p>
<p>Only one admonition of each type may exist at any given time; if another admonition of the same type is created, it will override the previously created one.</p>
<p>If a default admonition is overridden, it can be restored by deleting the user-defined admonition.</p>
<p>Please note that by default, the background color of the title is simply the color of the admonition at 10% opacity. CSS must be used to update this.</p>
<h3 id="images-as-icons"><span class="me-2">Images as Icons</span><a href="#images-as-icons" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Images can be uploaded to use as an admonition icon instead of an icon from a downloaded icon set.</p>
<p>These images will be resized to 24px x 24px to be stored in the plugin’s saved data.</p>
<p>To remove an image icon, simply choose an icon in the icon chooser text box.</p>
<h2 id="global-commands"><span class="me-2">Global Commands</span><a href="#global-commands" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Several commands are available for the plugin by default.</p>
<h3 id="collapse-and-open-all-admonitions-in-note"><span class="me-2">Collapse and Open All Admonitions In Note</span><a href="#collapse-and-open-all-admonitions-in-note" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>If these two commands are triggered with an open note, all collapsible admonitions will be collapsed or open respectively.</p>
<h3 id="insert-admonition"><span class="me-2">Insert Admonition</span><a href="#insert-admonition" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>This will open a modal where the admonition type, title and collapse behavior can be set, then the generated admonition code block will be inserted into the open editor.</p>
<h3 id="admonition-specific-commands"><span class="me-2">Admonition-specific commands</span><a href="#admonition-specific-commands" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Commands may be registered for each <a href="https://github.com/javalent/admonitions#custom-admonition-types">custom admonition</a> type to insert them into an open note by clicking the <code class="language-plaintext highlighter-rouge">Register Commands</code> button in <a href="https://github.com/javalent/admonitions#custom-admonition-types">Settings</a>.</p>
<p>3 commands will be registered: <code class="language-plaintext highlighter-rouge">Insert &lt;type&gt; Callout</code>, <code class="language-plaintext highlighter-rouge">Insert &lt;type&gt;</code>, and <code class="language-plaintext highlighter-rouge">Insert &lt;type&gt; with Title</code>.</p>
<h4 id="insert-callout"><span class="me-2">Insert Callout</span><a href="#insert-callout" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4>
<p>The selected type will be inserted as an Obsidian callout, and any selected text will be included with it.</p>
<h4 id="insert"><span class="me-2">Insert</span><a href="#insert" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4>
<p>The selected type will be inserted as a codeblock admonition, and any selected text will be included with it.</p>
<h4 id="insert-with-title"><span class="me-2">Insert with Title</span><a href="#insert-with-title" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4>
<p>The selected type will be inserted as a codeblock admonition, and any selected text will be included with it. The <code class="language-plaintext highlighter-rouge">title:</code> parameter will also be added and the cursor will be placed at that line.</p>
<h3 id="mermaid-graphs"><span class="me-2">Mermaid Graphs</span><a href="#mermaid-graphs" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Mermaid graphs are supported by Admonitions, but with some caveats:</p>
<ol>
<li>You cannot combine mermaid graphs and embeds/transclusions.</li>
<li>Mermaid graphs do not work in collapsed-by-default admonitions.</li>
</ol>
<h2 id="non-code-block-admonitions"><span class="me-2">Non-code block Admonitions</span><a href="#non-code-block-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<blockquote>
<p>❗ This syntax has been officially removed as of Admonitions 7.0.0.</p>
<p>Use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> syntax instead!</p>
</blockquote>
<p>As of version 6.0.0, there is a new setting: Enable Non-codeblock Admonitions.</p>
<p>This setting is highly experimental and may not work as expected, and there are a few caveats listed at the end of this section to keep in mind.</p>
<p>This setting allows for creating an admonition without wrapping it in a code block, which means that links and tags will sync into Obsidian’s cache. A non-codeblock admonition may be created using the following syntax:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre>
!!! ad-&lt;type&gt; Title goes here!
content
--- admonition
</pre></td></tr></tbody></table></code></div></div>
<p>This will create the appropriate admonition type, embed the content, and give it the supplied title.</p>
<h3 id="titles"><span class="me-2">Titles</span><a href="#titles" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Titles should be placed after the admonition block. Currently, markdown in titles is not supported.</p>
<p>An empty title can be created by either placing two spaces after the admonition type:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre>
!!! ad-&lt;type&gt;
content
--- admonition
</pre></td></tr></tbody></table></code></div></div>
<p>or by placing empty double quotes:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre>
!!! ad-&lt;type&gt; ""
content
--- admonition
</pre></td></tr></tbody></table></code></div></div>
<h3 id="collapsible-1"><span class="me-2">Collapsible</span><a href="#collapsible-1" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>A collapsible admonition may be created using the following syntax:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre>
??? ad-&lt;type&gt; Title goes here!
content
--- admonition
</pre></td></tr></tbody></table></code></div></div>
<p>A collapsible admonition may default to “open” by appending a +:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre>
???+ ad-&lt;type&gt; Title goes here!
content
--- admonition
</pre></td></tr></tbody></table></code></div></div>
<h3 id="caveats"><span class="me-2">Caveats</span><a href="#caveats" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<ol>
<li>Changes to the admonition after render require the cache to be cleared. The note must be closed and re-opened (and sometimes, a different note must be opened first).
<ol>
<li>This is <em>all</em> changes, including the admonition type, title, content, even whether or not a collapsible admonition is open or closed initially.</li>
</ol>
</li>
<li>Nested admonitions are not currently supported.</li>
</ol>
<p>If you experience any bugs using this setting, please create an issue and I will look into them.</p>
<h2 id="microsoft-document-syntax"><span class="me-2">Microsoft Document Syntax</span><a href="#microsoft-document-syntax" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<blockquote>
<p>❗ This syntax has been officially removed as of version <strong>8.0.0</strong>.</p>
<p>Use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> syntax instead!</p>
</blockquote>
<p>As of v6.8.0, an additional non-code block syntax can be used that is inspired by the <a href="https://docs.microsoft.com/en-us/contribute/markdown-reference">Microsoft Document Syntax</a> to render admonitions.</p>
<blockquote>
<p><strong>⚠️ Please note:</strong></p>
<p>Unlike the Microsoft Document Syntax, the type is not required to be upper case.</p>
<p>The plugin will use an exact-match first, then try to find a case-insensitive match.</p>
</blockquote>
<blockquote>
<p>[!quote]
This is an admonition!</p>
</blockquote>
<p><a href="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/msdocs.png"
class="img-link shimmer"
><img data-src="https://raw.githubusercontent.com/valentine195/obsidian-admonition/master/images/msdocs.png" alt="" class="lazyload" data-proofer-ignore></a></p>
<p>This syntax can also be used on indented code blocks:</p>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><i class="fas fa-code fa-fw small"></i></span>
<button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre></td><td class="rouge-code"><pre>[!quote]
This is an admonition!
</pre></td></tr></tbody></table></code></div></div>
<h3 id="title"><span class="me-2">Title</span><a href="#title" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>A title can be added to the MSDoc-style admonition by appending it after the type.</p>
<blockquote>
<p>[!quote: This is the title!]
This is an admonition!</p>
</blockquote>
<p>Like the code block syntax, providing an empty title will remove the title from the rendered admonition.</p>
<blockquote>
<p>[!quote:]
This admonition won’t have a title!</p>
</blockquote>
<h3 id="collapse"><span class="me-2">Collapse</span><a href="#collapse" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Collapse can be set by appending the following characters after the brackets:</p>
<p>Character</p>
<p>Collapse Type</p>
<p><code class="language-plaintext highlighter-rouge">+</code></p>
<p><code class="language-plaintext highlighter-rouge">open</code></p>
<p><code class="language-plaintext highlighter-rouge">-</code></p>
<p><code class="language-plaintext highlighter-rouge">closed</code></p>
<p><code class="language-plaintext highlighter-rouge">x</code></p>
<p><code class="language-plaintext highlighter-rouge">none</code></p>
<h2 id="publish"><span class="me-2">Publish</span><a href="#publish" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Obsidian plugins do not work on publish sites; however, version 6.4.0+ has an option to generate a JavaScript file that can be used on Publish sites with <strong>custom domains</strong>.</p>
<p><strong>Obsidian Publish only allows external JavaScript on publish sites with custom domains. If your Publish is ran through Obsidian, this will not work.</strong></p>
<p>Instructions:</p>
<ol>
<li>Go the Admonition settings tab and click the “Generate JS for Publish” button.</li>
<li>Save the JavaScript file.</li>
<li>Copy the contents of the JS file to your <code class="language-plaintext highlighter-rouge">publish.js</code> file.</li>
<li>Add the contents of the <code class="language-plaintext highlighter-rouge">assets/main.css</code> file to your <code class="language-plaintext highlighter-rouge">publish.css</code> file.</li>
</ol>
<p>Please note that I can give no guarantees of stability on your publish site. Other JavaScript you include may conflict with this file. If you run into an issue using it, please create an issue on this repository and I will try to help you.</p>
<h2 id="icon-packs"><span class="me-2">Icon Packs</span><a href="#icon-packs" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Additional icon packs can be downloaded in settings.</p>
<h3 id="adding-icon-packs"><span class="me-2">Adding Icon Packs</span><a href="#adding-icon-packs" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Want to add an existing icon pack? Make a pull request with the following:</p>
<ol>
<li>Add a new folder in the <a href="https://github.com/javalent/admonitions/blob/main/icons">icons</a> folder with the name of your icon set.</li>
<li>Create an <code class="language-plaintext highlighter-rouge">icons.json</code> file that has the icons defined as an Object. Please see the <a href="https://github.com/javalent/admonitions/blob/main/icons/octicons/icons.json">Octicons json</a> for reference.</li>
<li>Put your icon pack’s information in the two variables in the <a href="https://github.com/javalent/admonitions/blob/main/src/icons/packs.ts">Icon Packs</a> file.</li>
</ol>
<h1 id="settings">Settings</h1>
<h2 id="custom-admonition-types"><span class="me-2">Custom Admonition Types</span><a href="#custom-admonition-types" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p><a href="https://github.com/javalent/admonitions#custom-admonitions--callouts">Custom admonition</a> types can be created and managed in this section of the settings.</p>
<h3 id="export-custom-types-as-css"><span class="me-2">Export Custom Types as CSS</span><a href="#export-custom-types-as-css" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>This button will generate a CSS snippet that you can save and use for your custom callout types.</p>
<h2 id="importing-custom-admonitions"><span class="me-2">Importing Custom Admonitions</span><a href="#importing-custom-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Custom admonitions can be imported in settings from a JSON array of definitions.</p>
<p>At a <em>minimum</em>, you only need a valid admonition type:</p>
<p>[
{
“type”: “my-custom-type”
}
]</p>
<p>This will use the <code class="language-plaintext highlighter-rouge">pencil-alt</code> FontAwesome icon and a random color, and set all other properties as false.</p>
<p>However, you can specify an icon and color as well:</p>
<p>[
{
“type”: “my-custom-type”,
“icon”: “globe”,
“color”: “120,120,120”
}
]</p>
<p>If you want to specify an icon pack, you can do so like this:</p>
<p>[
{
“type”: “my-custom-type”,
“icon”: {
“name”: “globe”,
“type”: “font-awesome”
},
“color”: “120,120,120”
}
]</p>
<p>All of the possible fields are defined <a href="https://github.com/valentine195/obsidian-admonition/blob/2fb38ccc0b39ada8d3d0a4476e9ff3333c52c3ae/src/%40types/index.d.ts#L5">here</a>.</p>
<h2 id="admonition-settings"><span class="me-2">Admonition Settings</span><a href="#admonition-settings" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Settings specific to admonitions are managed in this section.</p>
<h3 id="add-drop-shadow"><span class="me-2">Add Drop Shadow</span><a href="#add-drop-shadow" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>A drop shadow will be added to admonitions by default.</p>
<p>If this setting is off, rendered admonitions will receive the <code class="language-plaintext highlighter-rouge">.no-drop</code> class.</p>
<h3 id="collapsible-by-default"><span class="me-2">Collapsible By Default</span><a href="#collapsible-by-default" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>All admonitions will be collapsible by default, unless <code class="language-plaintext highlighter-rouge">collapse: none</code> is set in the admonition parameters.</p>
<h3 id="default-collapse-type"><span class="me-2">Default Collapse Type</span><a href="#default-collapse-type" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<blockquote>
<p>⚠️ This setting is only available when Collapsible By Default is true.</p>
</blockquote>
<p>Set the default collapse type used when setting an admonition collapsible by default.</p>
<h3 id="add-copy-button"><span class="me-2">Add Copy Button</span><a href="#add-copy-button" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>A “Copy Content” button will be added to the top-right corner of the admonition &amp; callout content.</p>
<h3 id="parse-titles-as-markdown"><span class="me-2">Parse Titles as Markdown</span><a href="#parse-titles-as-markdown" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Turn this setting off to prevent admonition titles from being rendered as markdown.</p>
<h3 id="set-admonition-colors"><span class="me-2">Set Admonition Colors</span><a href="#set-admonition-colors" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Controls whether or not a rendered admonition will receive a color.</p>
<p>Turn this off to totally control color via CSS.</p>
<h3 id="hide-empty-admonitions"><span class="me-2">Hide Empty Admonitions</span><a href="#hide-empty-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Admonitions with no content are hidden by default.</p>
<blockquote>
<p>⚠️ Please note that this only works for Admonitions that have <em>no text content whatsoever</em>.</p>
</blockquote>
<h2 id="icon-packs-1"><span class="me-2">Icon Packs</span><a href="#icon-packs-1" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="use-font-awesome-icons"><span class="me-2">Use Font Awesome Icons</span><a href="#use-font-awesome-icons" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>The plugin comes pre-bundled with the entire <a href="https://fontawesome.com/search?m=free&amp;s=brands%2Cregular%2Csolid">Font Awesome Free</a> icon set. Turn this setting off to not include them in the icon picker.</p>
<p>Existing custom Admonitions that use Font Awesome icons will continue to work.</p>
<h3 id="additional-icon-packs"><span class="me-2">Additional Icon Packs</span><a href="#additional-icon-packs" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Additional icon packs can be downloaded to supplement the included Font Awesome Free icon set.</p>
<p><strong>Downloading an icon pack requires an internet connection.</strong></p>
<p>Current additional icon packs available are the <a href="https://primer.style/octicons/">Octicons</a> set and the <a href="https://nagoshiashumari.github.io/Rpg-Awesome/">RPG Awesome</a> set.</p>
<blockquote>
<p>📝 For backwards compability, if an Admonition was created prior to version <strong>7.0.0</strong> using an RPG Awesome icon, the pack will try to be downloaded.</p>
</blockquote>
<h2 id="additional-syntaxes"><span class="me-2">Additional Syntaxes</span><a href="#additional-syntaxes" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Obsidian 0.14 has introduced <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Callout boxes</a> to its core functionality using a similar syntax to the Microsoft Document callouts.</p>
<p>This has rendered the Microsoft Document syntax for Admonitions obsolete, but Admonitions can still be used to create and manage your custom callout types.</p>
<p>Your existing code block Admonitions will always work!</p>
<h3 id="enable-non-codeblock-admonitions"><span class="me-2">Enable Non-codeblock Admonitions</span><a href="#enable-non-codeblock-admonitions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<blockquote>
<p>❗ This setting has been removed as of version <strong>7.0.0</strong>.</p>
<p>It is recommended to use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> instead.</p>
</blockquote>
<p>Enabled use of <code class="language-plaintext highlighter-rouge">!!! ad-&lt;type&gt;</code> style admonitions. No longer supported, will be removed in a future version.</p>
<h3 id="allow-microsoft-document-syntax"><span class="me-2">Allow Microsoft Document Syntax</span><a href="#allow-microsoft-document-syntax" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<blockquote>
<p>❗ This syntax has been officially removed as of version <strong>8.0.0</strong>.</p>
<p>Use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> syntax instead!</p>
</blockquote>
<p>Enables use of the <a href="https://github.com/javalent/admonitions#microsoft-document-syntax">Microsoft Document Syntax</a> for blockquote admonitions.</p>
<h3 id="use-microsoft-document-syntax-for-indented-code-blocks"><span class="me-2">Use Microsoft Document Syntax for Indented Code Blocks</span><a href="#use-microsoft-document-syntax-for-indented-code-blocks" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<blockquote>
<p>❗ This syntax has been officially removed as of version <strong>8.0.0</strong>.</p>
<p>Use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> syntax instead!</p>
</blockquote>
<p>Enables use of the <a href="https://github.com/javalent/admonitions#microsoft-document-syntax">Microsoft Document Syntax</a> for indented code blocks.</p>
<h3 id="render-microsoft-document-syntax-in-live-preview"><span class="me-2">Render Microsoft Document Syntax in Live Preview</span><a href="#render-microsoft-document-syntax-in-live-preview" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<blockquote>
<p>❗ This syntax has been officially removed as of version <strong>8.0.0</strong>.</p>
<p>Use the <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Obsidian Callout box</a> syntax instead!</p>
</blockquote>
<p>Enables use of the <a href="https://github.com/javalent/admonitions#microsoft-document-syntax">Microsoft Document Syntax</a> in live preview.</p>
<p>This feature is still under development and you may experience rendering bugs.</p>
<h3 id="convert-msdoc-admonitions-to-callouts-v800"><span class="me-2">Convert MSDoc Admonitions to Callouts (<strong>v8.0.0+</strong>)</span><a href="#convert-msdoc-admonitions-to-callouts-v800" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>This button can be used to convert any existing Microsoft Document syntax Admonitions to the new <a href="https://help.obsidian.md/Editing+and+formatting/Callouts">Callout box</a> syntax.</p>
<h2 id="advanced-settings"><span class="me-2">Advanced Settings</span><a href="#advanced-settings" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="markdown-syntax-highlighting"><span class="me-2">Markdown Syntax Highlighting</span><a href="#markdown-syntax-highlighting" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Enable syntax highlighting when editing admonition code blocks.</p>
<h3 id="sync-links-to-metadata-cache"><span class="me-2">Sync Links to Metadata Cache</span><a href="#sync-links-to-metadata-cache" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>The plugin will attempt to syncronize links to the metadata cache to be displayed in graph view.</p>
<p>This setting is experimental. Links will only be synced when rendered in an admonition and they will not persist if you close and re-open Obsidian.</p>
<p>Please see <a href="https://github.com/valentine195/obsidian-admonition/issues/144">this issue</a> for more information.</p>
<p>If you require links to be fully synced, it is recommended to use the <a href="https://github.com/javalent/admonitions#microsoft-document-syntax">Microsoft Document Syntax</a>.</p>
<h3 id="generate-js-for-publish"><span class="me-2">Generate JS for Publish</span><a href="#generate-js-for-publish" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Use this setting to enable Admonitions on custom-domain Obsidian Publish websites.</p>
<p>See [Publish] for more information.</p>
<h1 id="todo">Todo</h1>
<p>No additional features are planned at this time. If there is a feature missing that you would like to see, please open an issue.</p>
<ul>
<li> Add the ability to collapse the admonition</li>
<li> Custom admonitions</li>
<li> Settings tab to customize icon and color of all admonitions</li>
<li> Ability to render markdown inside an admonition</li>
</ul>
<h1 id="installation">Installation</h1>
<h2 id="from-within-obsidian"><span class="me-2">From within Obsidian</span><a href="#from-within-obsidian" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>From Obsidian v0.9.8, you can activate this plugin within Obsidian by doing the following:</p>
<ul>
<li>Open Settings &gt; Third-party plugin</li>
<li>Make sure Safe mode is <strong>off</strong></li>
<li>Click Browse community plugins</li>
<li>Search for this plugin</li>
<li>Click Install</li>
<li>Once installed, close the community plugins window and activate the newly installed plugin</li>
</ul>
<h2 id="from-github"><span class="me-2">From GitHub</span><a href="#from-github" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<ul>
<li>Download the Latest Release from the Releases section of the GitHub Repository</li>
<li>Extract the plugin folder from the zip to your vault’s plugins folder: <code class="language-plaintext highlighter-rouge">&lt;vault&gt;/.obsidian/plugins/</code><br />
Note: On some machines the <code class="language-plaintext highlighter-rouge">.obsidian</code> folder may be hidden. On MacOS you should be able to press <code class="language-plaintext highlighter-rouge">Command+Shift+Dot</code> to show the folder in Finder.</li>
<li>Reload Obsidian</li>
<li>If prompted about Safe Mode, you can disable safe mode and enable the plugin. Otherwise head to Settings, third-party plugins, make sure safe mode is off and enable the plugin from there.</li>
</ul>
<h3 id="updates"><span class="me-2">Updates</span><a href="#updates" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>You can follow the same procedure to update the plugin</p>
<h1 id="warning">Warning</h1>
<p>This plugin comes with no guarantee of stability and bugs may delete data. Please ensure you have automated backups.</p>
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
<!-- tags -->
<div class="post-tags">
<i class="fa fa-tags fa-fw me-1"></i>
<a href="/tags/docs/"
class="post-tag no-text-decoration" >docs</a>
<a href="/tags/cheatsheets/"
class="post-tag no-text-decoration" >cheatsheets</a>
</div>
<div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
<div class="license-wrapper">
This post is licensed under
<a href="https://creativecommons.org/licenses/by/4.0/">
CC BY 4.0
</a>
by the author.
</div>
<!-- Post sharing snippet -->
<div class="share-wrapper">
<span class="share-label text-muted me-1">Share</span>
<span class="share-icons">
<a
href="https://twitter.com/intent/tweet?text=Admonitions%20Documentation%20-%20neo's%20brain&url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2FAdmonitions-Documentation%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Twitter"
target="_blank"
rel="noopener"
aria-label="Twitter"
>
<i class="fa-fw fab fa-twitter"></i>
</a>
<a
href="https://www.facebook.com/sharer/sharer.php?title=Admonitions%20Documentation%20-%20neo's%20brain&u=http%3A%2F%2Flocalhost%3A4000%2Fposts%2FAdmonitions-Documentation%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Facebook"
target="_blank"
rel="noopener"
aria-label="Facebook"
>
<i class="fa-fw fab fa-facebook-square"></i>
</a>
<a
href="https://t.me/share/url?url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2FAdmonitions-Documentation%2F&text=Admonitions%20Documentation%20-%20neo's%20brain"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Telegram"
target="_blank"
rel="noopener"
aria-label="Telegram"
>
<i class="fa-fw fab fa-telegram"></i>
</a>
<i
id="copy-link"
class="fa-fw fas fa-link small"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Copy link"
data-title-succeed="Link copied successfully!"
>
</i>
</span>
</div>
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail-wrapper -->
</div>
</div>
<!-- #core-wrapper -->
<!-- panel -->
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
<!-- Get the last 5 posts from lastmod list. -->
<div id="access-lastmod" class="post">
<div class="panel-heading">Recently Updated</div>
<ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
<li class="text-truncate lh-lg">
<a href="/posts/Mac-M1-Run-Diablo-4/">Mac M1 Run Diablo 4 - Links</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/text-and-typography/">Text and Typography</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/Flaws.cloud-AWS/">Flaws.cloud walkthrough</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/M1-Mac-How-to-switch-the-Terminal-between-x86_64-and-arm64/">M1 Mac - How to Switch the Terminal between x86_64 and arm64</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/Admonitions-Documentation/">Admonitions Documentation</a>
</li>
</ul>
</div>
<!-- #access-lastmod -->
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Trending Tags</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/cybersecurity/">cybersecurity</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo-4/">diablo 4</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docs/">docs</a>
<a class="post-tag btn btn-outline-primary" href="/tags/terminal/">terminal</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo/">diablo</a>
<a class="post-tag btn btn-outline-primary" href="/tags/m1/">M1</a>
<a class="post-tag btn btn-outline-primary" href="/tags/apple-silicon/">apple silicon</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cheatsheets/">cheatsheets</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cloud/">cloud</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gcih/">GCIH</a>
</div>
</div>
</div>
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
<div class="panel-heading ps-3 pt-2 mb-2">Contents</div>
<nav id="toc"></nav>
</div>
</div>
</div>
<!-- tail -->
<div class="row">
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
<!--
Recommend the other 3 posts according to the tags and categories of the current post,
if the number is not enough, use the other latest posts to supplement.
-->
<!-- The total size of related posts -->
<!-- An random integer that bigger than 0 -->
<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
<!-- Fill with the other newlest posts -->
<div id="related-posts" class="mb-2 mb-sm-4">
<h3 class="pt-2 mb-4 ms-1" data-toc-skip>
Further Reading
</h3>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
<div class="col">
<a href="/posts/Diablo-4-Helltide-Events/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692804963"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Diablo 4 HellTide Events</h4>
<div class="text-muted small">
<p>
Diablo 4 HellTide Events
When you guys hit World Tier 3, do helltide events everytime you can, they’re stupidly important because they’re the only source of Forgotten Souls and you need a lot of t...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/Diablo-4-Shadow-Rogue-Build/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692804968"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Diablo 4 - Shadow Rouge Build</h4>
<div class="text-muted small">
<p>
This is a beginner friendly build.
Skill Tree
https://d4builds.gg/builds/a175bae2-7adf-4155-a347-509d4efbb86c/
Skill Tree Guide
https://fextralife.com/diablo-4-shadow-rogue-build-twisting-blad...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/Flaws.cloud-AWS/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692822983"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Flaws.cloud walkthrough</h4>
<div class="text-muted small">
<p>
Flaws.cloud walkthrough
DayCyberWox Walkthrough: https://www.youtube.com/watch?v=fEjAryrzLSQ
Write up: https://daycyberwox.com/exploiting-aws-1-a-beginners-guide-flawscloud#heading-level1
1
2
3
4...
</p>
</div>
</div>
</a>
</div>
</div>
<!-- .card-deck -->
</div>
<!-- #related-posts -->
<!-- Navigation buttons at the bottom of the post. -->
<div class="post-navigation d-flex justify-content-between">
<a
href="/posts/text-and-typography/"
class="btn btn-outline-primary"
prompt="Older"
>
<p>Text and Typography</p>
</a>
<a
href="/posts/SANS-SEC-504-Resources/"
class="btn btn-outline-primary"
prompt="Newer"
>
<p>SANS SEC 504 - Resources</p>
</a>
</div>
<!-- The comments switcher -->
</div>
</div>
<!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-11 post-content">
<div id="search-hints">
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Trending Tags</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/cybersecurity/">cybersecurity</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo-4/">diablo 4</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docs/">docs</a>
<a class="post-tag btn btn-outline-primary" href="/tags/terminal/">terminal</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo/">diablo</a>
<a class="post-tag btn btn-outline-primary" href="/tags/m1/">M1</a>
<a class="post-tag btn btn-outline-primary" href="/tags/apple-silicon/">apple silicon</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cheatsheets/">cheatsheets</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cloud/">cloud</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gcih/">GCIH</a>
</div>
</div>
</div>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</div>
</div>
</div>
</div>
<!-- The Footer -->
<footer>
<div class="container px-lg-4">
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
<p>Using the <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> theme <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
</p>
<p>©
2023
<a href="https://github.com/username">Eric Reymundo</a>.
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author."
>Some rights reserved.</span>
</p>
</div>
</div>
</footer>
<div id="mask"></div>
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
<div
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="px-2 mb-3">A new version of content is available.</p>
<button type="button" class="btn btn-primary" aria-label="Update">
Update
</button>
</div>
</div>
<!-- JS selector for site. -->
<!-- commons -->
<!-- layout specified -->
<!-- image lazy-loading & popup & clipboard -->
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.7.0/dist/jquery.min.js,npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js,npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/lazysizes@5.3.2/lazysizes.min.js,npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.7/dayjs.min.js,npm/dayjs@1.11.7/locale/en.min.js,npm/dayjs@1.11.7/plugin/relativeTime.min.js,npm/dayjs@1.11.7/plugin/localizedFormat.min.js,npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<script defer src="/assets/js/dist/post.min.js"></script>
<!--
Jekyll Simple Search loader
See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->
<script>
/* Note: dependent library will be loaded in `js-selector.html` */
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/assets/js/data/search.json',
searchResultTemplate: '<div class="px-1 px-sm-2 px-lg-4 px-xl-0"> <a href="{url}">{title}</a> <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags} </div> <p>{snippet}</p></div>',
noResultsText: '<p class="mt-5"></p>',
templateMiddleware: function(prop, value, template) {
if (prop === 'categories') {
if (value === '') {
return `${value}`;
} else {
return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
}
}
if (prop === 'tags') {
if (value === '') {
return `${value}`;
} else {
return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
}
}
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink