Support Remixicon
:i{class="ri-poker-hearts-fill"}:i{class="ri-poker-clubs-fill"}
Support Button
:btn[Google]{href="https://www.google.com"}
:::btn{href="#"}:i{class="ri-share-box-line"} Open in new tab:::
Support Github Card
::github{repo="actionanand/ollama-chat"}
Support collapse
Basic collapse (default title):
:::collapseHello World!:::
Open
Hello World!
Collapse with custom title:
:::collapse[Custom Title Here]This is content inside a collapse with a custom title!:::
Custom Title Here
This is content inside a collapse with a custom title!
Another example with a longer title:
:::collapse[Click to expand detailed information]This collapse section has a descriptive title that explains what's inside.
You can put any content here:- Lists- Code blocks- Images- Any markdown content:::
Click to expand detailed information
This collapse section has a descriptive title that explains what’s inside.
You can put any content here:
- Lists
- Code blocks
- Images
- Any markdown content
Testing overlapping fix: This content should not overlap with the elements below when the collapse is expanded. The new CSS styling should provide proper spacing and container behavior.
// This code block should be properly containedfunction testFunction() { console.log("Testing collapse content"); return "No overlap should occur";}
- First item in a list
- Second item with more content to test spacing
- Third item to ensure proper layout
Using ‘details’ syntax (alternative):
:::details[Technical Details]The collapse feature also supports the `:::details` syntax as an alternative to `:::collapse`.:::
Technical Details
The collapse feature also supports the :::details
syntax as an alternative to :::collapse
.
Support collapse with Custom Title
🎯 Custom Title with Emoji
This collapse has a custom title with an emoji and should show a nice SVG arrow that rotates smoothly when expanded.
The arrow changes color based on the theme (light/dark mode) and has a subtle scale effect on hover.
📋 Technical Features Demo
Features of the new SVG arrow:
- Smooth rotation animation (90 degrees)
- Theme-aware colors (dark/light mode support)
- Hover effects with subtle scaling
- Cubic-bezier easing for professional feel
- No overlap issues with proper spacing
// Example code to test formattingfunction testCollapse() { console.log("SVG arrow animation working!"); return "Perfect spacing and animation";}
List items work perfectly:
- First item
- Second item with longer content
- Third item to test spacing
🎨 Visual Design Improvements
The new design includes:
- SVG-based arrow icon instead of Unicode character
- Flexbox layout for better alignment
- Theme-aware styling with proper contrast
- Smooth animations with easing functions
- Hover interactions for better UX
This blockquote should also be properly spaced within the collapse content.
Support admonitions/Callouts
:::tip[Customized Title]hello world:::
:::notenote:::
:::cautioncaution:::
:::dangerdanger:::31 collapsed lines
:::warningwarning:::
:::infoinfo:::
:::tip[New Tips]How is my new idea?:::
:::::info[Parent]
Parent content
::::danger[Child]
Child content
:::tip[Deep Child]
**AST**(Abstract Syntax Tree) in Admonitions
:::
::::
:::::
Custom Info Title
This is a new info admonition with custom title and blue styling.
Custom Warning Title
This is a warning admonition that should look like caution with orange styling.
Info
This is a standard info admonition without custom title.
Warning
This is a standard warning admonition without custom title.
Character Chats
:::duck**Did you know?** You can easily create custom character chats for your blog!:::

Did you know? You can easily create custom character chats for your blog!
Adding Your Own
To add your own character, first add an image files to the directory /public/admonitions
in your repo. Astro cannot automatically optimize image assets from markdown plugins, so make sure to compress the image to a web-friendly size (<100kb).
I recommend Google’s free Squoosh web app for creating super small webp files. The characters here have been resized to 300 pixels wide and exported to webp with 75% quality using Squoosh.
After you’ve added your image, update the exported constant characters
in consts.ts
with your newly added image file and restart the development server.
Character Conversations
When there are multiple character chats in a row, the order of the chat image and chat bubble reverses to give the chat more of a back-and-forth appearance.
:::owlThis is a cool feature!:::
:::unicornI agree!:::

This is a cool feature!

I agree!
You can specify the alignment (left
or right
) to override the default left, right, left, ...
ordering.
:::unicorn{align="right"}Over here, to the right!:::

Over here, to the right!
Support mermaid
A Mermaid diagram is a diagram and flowcharting tool that allows users to create visualizations using simple text and code. It is based on JavaScript and uses a Markdown-inspired syntax to dynamically create and modify diagrams. This approach of diagrams as code allows for easy version control and maintenance of visual documentation.
How to Use:
- start with ```mermaid
- end with ```
- set markdown frontmatter
mermaid: true
.
Mermaid Code:
classDiagramnote "From Duck till Zebra"Animal <|-- Ducknote for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"Animal <|-- FishAnimal <|-- ZebraAnimal : +int ageAnimal : +String genderAnimal: +isMammal()Animal: +mate()class Duck{+String beakColor+swim()+quack()}8 collapsed lines
class Fish{-int sizeInFeet-canEat()}class Zebra{+bool is_wild+run()}
Result:
classDiagram note "From Duck till Zebra" Animal <|-- Duck note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
SupportSupport mathjax (LaTeX/KaTeX)
- set markdown frontmatter
mathjax: true
.
You can also display inline math via remark-math and rehype-katex. Check out the KaTeX docs to learn about the syntax.
Block Mode
---mathjax: true---hello!$$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$hello!
hello! $$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$ hello!
---mathjax: true---$$a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg)$$
$$ a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg) $$
Inline Mode
---mathjax: true---hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!
hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!
---mathjax: true---Make those equations pretty! $ \frac{a}{b} \cdot b = a $
Make those equations pretty! $ \frac{a}{b} \cdot b = a $
Integration with Expressive Code
See the Expressive Code Docs for more information on available features like wrapping text, line highlighting, diffs, etc. Expressive Code has several advanced features that go beyond the basic syntax highlighting offered by Prism, positioning it as a more modern and powerful tool for developers and technical writers. While Prism is known for being lightweight and simple to use, Expressive Code builds on this foundation with rich annotations and UI elements.
function demo() { console.log('this line is marked as deleted') // This line and the next one are marked as inserted console.log('this is the second inserted line')
return 'this line uses the neutral default marker type'}
Code folding is supported by default
var myArr = [1, 2]console.log(myArr)
var myObj = {a: 1, b: 2}
for (let key of myArr) { console.log(key)}
var it = myArr[Symbol.iterator]()it.next() // {value: 1, done: false}
// VM704:12 Uncaught TypeError: myObj is not iterablefor (let key of myObj) { console.log(key)1 collapsed line
}