[{"data":1,"prerenderedAt":87},["Reactive",2],{"blog-post-markdown-admonitions-callouts-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":58,"related":60},"markdown-admonitions-callouts-complete-guide","Markdown Admonitions and Callouts: Complete Guide for Enhanced Documentation","Master admonitions, callouts, and alert boxes in Markdown for creating engaging documentation with warnings, tips, notes, and information blocks across different platforms.","Admonitions and callouts are essential components of modern technical documentation, transforming plain text into visually engaging, structured content that guides readers through complex…","2025-08-25","Tutorial","Matthew Rathbone","markdown admonitions, markdown callouts, markdown alerts, markdown warning boxes, markdown note boxes, documentation blocks, markdown tips",14,"\u003Cp>Admonitions and callouts are essential components of modern technical documentation, transforming plain text into visually engaging, structured content that guides readers through complex information. While basic Markdown provides simple formatting, admonitions enable you to create highlighted boxes for warnings, tips, notes, and important information that dramatically improve documentation usability and reader comprehension.\u003C/p>\n\u003Ch2 id=\"why-use-admonitions-and-callouts\">Why Use Admonitions and Callouts?\u003C/h2>\n\u003Cp>Admonitions provide significant benefits for professional documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Break up text walls with eye-catching highlighted sections\u003C/li>\n\u003Cli>\u003Cstrong>Information Classification\u003C/strong>: Clearly categorize different types of information (warnings, tips, notes)\u003C/li>\n\u003Cli>\u003Cstrong>Reader Attention\u003C/strong>: Draw focus to critical information that readers might otherwise miss\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Create polished, modern documentation that looks professionally designed\u003C/li>\n\u003Cli>\u003Cstrong>Improved Comprehension\u003C/strong>: Help readers process information more effectively through visual cues\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"basic-admonition-concepts\">Basic Admonition Concepts\u003C/h2>\n\u003Cp>Admonitions are specialized content blocks that highlight specific types of information. Common types include:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Note\u003C/strong>: General information or additional context\u003C/li>\n\u003Cli>\u003Cstrong>Tip\u003C/strong>: Helpful suggestions or best practices\u003C/li>\n\u003Cli>\u003Cstrong>Warning\u003C/strong>: Important cautions or potential pitfalls  \u003C/li>\n\u003Cli>\u003Cstrong>Danger\u003C/strong>: Critical safety information or destructive actions\u003C/li>\n\u003Cli>\u003Cstrong>Info\u003C/strong>: Supplementary details or explanations\u003C/li>\n\u003Cli>\u003Cstrong>Success\u003C/strong>: Positive outcomes or completed actions\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"platform-specific-implementations\">Platform-Specific Implementations\u003C/h2>\n\u003Ch3 id=\"github-alerts-native-support\">GitHub Alerts (Native Support)\u003C/h3>\n\u003Cp>GitHub now supports native alert syntax using blockquotes with special keywords:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> [!NOTE]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Useful information that users should know, even when skimming content.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!TIP]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Helpful advice for doing things better or more easily.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!IMPORTANT]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Key information users need to know to achieve their goal.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!WARNING]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Urgent info that needs immediate user attention to avoid problems.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!CAUTION]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Advises about risks or negative outcomes of certain actions.\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"enhanced-github-alerts\">Enhanced GitHub Alerts\u003C/h3>\n\u003Cp>GitHub alerts support rich content including links, code, and formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> [!WARNING]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Database Migration Alert**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> This migration is destructive and cannot be reversed. Please:\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> 1. \u003Cspan class=\"hljs-strong\">**Backup your database**\u003C/span> before proceeding\u003C/span>\n\u003Cspan class=\"hljs-quote\">> 2. Test in a staging environment first\u003C/span>\n\u003Cspan class=\"hljs-quote\">> 3. Schedule downtime during low-traffic periods\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> ```bash\u003C/span>\n\u003Cspan class=\"hljs-quote\">> # Create backup before migration\u003C/span>\n\u003Cspan class=\"hljs-quote\">> pg\u003Cspan class=\"hljs-emphasis\">_dump production_\u003C/span>db > backup\u003Cspan class=\"hljs-emphasis\">_$(date +%Y%m%d).sql\n> ```\n> \n> For rollback procedures, see the [\u003Cspan class=\"hljs-string\">Database Recovery Guide\u003C/span>](\u003Cspan class=\"hljs-link\">docs/recovery.md\u003C/span>).\n\n> [!TIP]\n> \u003Cspan class=\"hljs-strong\">**Performance Optimization**\u003C/span>\n> \n> For better query performance, consider adding these indexes:\n> \n> ```sql\n> CREATE INDEX idx_\u003C/span>user\u003Cspan class=\"hljs-emphasis\">_email ON users(email);\n> CREATE INDEX idx_\u003C/span>order\u003Cspan class=\"hljs-emphasis\">_status ON orders(status, created_\u003C/span>date);\u003C/span>\n\u003Cspan class=\"hljs-quote\">> ```\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> Monitor query performance using `EXPLAIN ANALYZE` before and after implementation.\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-admonitions\">GitLab Admonitions\u003C/h3>\n\u003Cp>GitLab supports similar alert syntax with additional customization:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> [!NOTE]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**GitLab CI/CD Pipeline Configuration**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> This configuration requires GitLab Runner version 14.0 or higher.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Update your runners before deploying this pipeline.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!WARNING]  \u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Production Deployment**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> This job deploys directly to production. Ensure:\u003C/span>\n\u003Cspan class=\"hljs-quote\">> - [ ] All tests pass\u003C/span>\n\u003Cspan class=\"hljs-quote\">> - [ ] Code review is complete  \u003C/span>\n\u003Cspan class=\"hljs-quote\">> - [ ] Deployment checklist is verified\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!CAUTION]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**API Rate Limits**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> The GitLab API has strict rate limits:\u003C/span>\n\u003Cspan class=\"hljs-quote\">> - \u003Cspan class=\"hljs-strong\">**Free tier**\u003C/span>: 300 requests per minute\u003C/span>\n\u003Cspan class=\"hljs-quote\">> - \u003Cspan class=\"hljs-strong\">**Premium**\u003C/span>: 2,000 requests per minute\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> Implement exponential backoff in your integration scripts.\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mkdocs-material-admonitions\">MkDocs Material Admonitions\u003C/h3>\n\u003Cp>MkDocs Material provides the most comprehensive admonition system:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">!!! note "Configuration Requirements"\n\u003Cspan class=\"hljs-code\">    This feature requires Python 3.8+ and the following dependencies:\n    \n    ```requirements.txt\n    mkdocs-material>=8.0.0\n    pymdown-extensions>=9.0.0\n    ```\n\u003C/span>\n!!! tip "Pro Tip: Collapsible Admonitions"\n\u003Cspan class=\"hljs-code\">    Use `???` instead of `!!!` to make admonitions collapsible by default:\n    \n    ??? info "Click to expand advanced configuration"\n        ```yaml\n        theme:\n          name: material\n          features:\n            - content.code.annotate\n            - content.tabs.link\n        ```\n\u003C/span>\n!!! warning "Breaking Changes in v9.0"\n\u003Cspan class=\"hljs-code\">    Version 9.0 introduces breaking changes:\n    \n    - Legacy theme configurations no longer supported\n    - Custom CSS classes have been renamed\n    - JavaScript plugins require initialization updates\n    \n    See the [migration guide](migration.md) for detailed upgrade instructions.\n\u003C/span>\n!!! danger "Security Warning"\n\u003Cspan class=\"hljs-code\">    **Never commit API keys or secrets to version control.**\n    \n    Use environment variables or secure vault systems:\n    \n    ```python\n    import os\n    \n    API_KEY = os.getenv('API_KEY')\n    if not API_KEY:\n        raise ValueError("API_KEY environment variable required")\n    ```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"docusaurus-and-myst-style-containers\">Docusaurus and MyST-Style Containers\u003C/h3>\n\u003Cp>Docusaurus (and MyST Markdown, used by some Sphinx/Jupyter Book sites) use triple-colon fenced directives rather than blockquotes or indentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">:::note\nThis is a basic note. Docusaurus renders it as a colored, icon-labeled box automatically — no extension or configuration needed in an MDX-powered site.\n:::\n\n:::tip Performance Optimization\nUse the \u003Cspan class=\"hljs-code\">`--parallel`\u003C/span> flag to run tests concurrently:\n\n\u003Cspan class=\"hljs-code\">```bash\nnpm test -- --parallel --max-workers=4\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This can reduce test suite runtime by 60-80% on multi-core systems.\u003Cbr>:::\u003C/p>\n\u003Cp>:::danger\u003Cbr>This operation is destructive and cannot be undone. Always confirm you have a current backup before proceeding.\u003Cbr>:::\u003C/p>\n\u003Cpre>\u003Ccode>\nDocusaurus supports five built-in types (`note`, `tip`, `info`, `warning`, `danger`), plus an optional title after the type on the same line. Because the syntax is a fenced block rather than a blockquote, arbitrary nested Markdown — including its own fenced code blocks — nests inside it without the line-by-line `>` prefixing that GitHub-style alerts require. Outside an MDX/MyST pipeline, a `:::note` block has no special meaning at all and renders as literal text.\n\n### Hugo Shortcode Containers\n\nHugo has no built-in admonition syntax, but themes commonly ship an `alert` or `box` shortcode that fills the same role:\n\n\n```markdown\n{{< alert "warning" >}}\n**Production Deployment Checklist**\n\nBefore deploying to production, ensure environment variables are configured, SSL certificates are valid, and backup procedures are in place.\n{{< /alert >}}\n\u003C/code>\u003C/pre>\u003Cp>Since this is theme-specific Go-template shortcode syntax rather than a Markdown or MDX convention, it only works with the specific theme that defines the shortcode — check your theme's documentation for the exact shortcode name and supported types before relying on it.\u003C/p>\n\u003Ch3 id=\"sphinx-and-restructuredtext\">Sphinx and reStructuredText\u003C/h3>\n\u003Cp>Sphinx documentation uses directive-based admonitions:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-rst\">.. note::\n   This is a basic note admonition with simple text content.\n\n.. warning::\n   **Database Connection Warning**\n   \n   Ensure database connections are properly closed to avoid connection pool exhaustion:\n   \n   .. code-block:: python\n   \n      try:\n          conn = get_database_connection()\n          # Perform database operations\n      finally:\n          conn.close()\n\n.. tip::\n   For better performance, consider implementing connection pooling:\n   \n   - Use SQLAlchemy's connection pooling\n   - Configure appropriate pool size for your application load\n   - Monitor connection usage in production\n\n.. danger::\n   **Data Loss Warning**\n   \n   The following operations are destructive and cannot be undone:\n   \n   - ``DROP TABLE`` commands\n   - ``TRUNCATE`` operations  \n   - ``DELETE FROM table`` without WHERE clause\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-callouts\">Obsidian Callouts\u003C/h3>\n\u003Cp>Obsidian provides a flexible callout system for note-taking:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> [!note] Project Setup\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Follow these steps to set up the development environment:\u003C/span>\n\u003Cspan class=\"hljs-quote\">> 1. Clone the repository\u003C/span>\n\u003Cspan class=\"hljs-quote\">> 2. Install dependencies with `npm install`\u003C/span>\n\u003Cspan class=\"hljs-quote\">> 3. Configure environment variables\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!tip]- Collapsible Tip\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Use the minus sign to make callouts collapsible by default.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> This content is hidden until the user expands it.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!warning] Version Compatibility\u003C/span>\n\u003Cspan class=\"hljs-quote\">> This plugin requires Obsidian 0.15.0 or higher.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Older versions may experience compatibility issues.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!quote] Research Citation\u003C/span>\n\u003Cspan class=\"hljs-quote\">> "Effective documentation significantly improves software adoption rates \u003C/span>\n\u003Cspan class=\"hljs-quote\">> and reduces support burden." - Technical Writing Research, 2024\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"notion-callout-blocks\">Notion Callout Blocks\u003C/h3>\n\u003Cp>Notion uses a visual callout system that can be represented in Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">💡 \u003Cspan class=\"hljs-strong\">**Tip: Keyboard Shortcuts**\u003C/span>\nLearn these essential shortcuts to boost productivity:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`Ctrl+K`\u003C/span> (Cmd+K): Quick search and navigation  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`Ctrl+/`\u003C/span> (Cmd+/): Open command palette\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`Ctrl+Shift+N`\u003C/span> (Cmd+Shift+N): Create new page\n\n⚠️ \u003Cspan class=\"hljs-strong\">**Warning: API Rate Limits**\u003C/span>\nNotion API has the following rate limits:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> 3 requests per second per integration\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Burst capacity up to 3 requests\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Exceeding limits returns HTTP 429 status\n\n🔥 \u003Cspan class=\"hljs-strong\">**Important: Database Relations**\u003C/span>\nWhen creating database relations:\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> Ensure proper permissions on both databases\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> Test relationships with sample data first\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> Document relationship logic for team members\n\u003C/code>\u003C/pre>\u003Ch2 id=\"html-based-admonitions-for-universal-compatibility\">HTML-Based Admonitions for Universal Compatibility\u003C/h2>\n\u003Cp>When platform-specific admonitions aren't supported, use HTML for universal compatibility:\u003C/p>\n\u003Ch3 id=\"basic-html-admonitions\">Basic HTML Admonitions\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition note"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>Note\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This is a basic note admonition using HTML markup for maximum compatibility across all Markdown processors.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition warning"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>⚠️ Warning\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Backup Required\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Always create a backup before performing database migrations. This operation cannot be undone.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>pg_dump mydb > backup_$(date +%Y%m%d).sql\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition tip"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>💡 Pro Tip\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Use environment-specific configuration files to manage different deployment environments:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>config.development.js\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>config.staging.js\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>config.production.js\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"enhanced-html-admonitions-with-rich-content\">Enhanced HTML Admonitions with Rich Content\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition danger"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>🚨 Security Alert\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Critical Vulnerability Detected\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>A security vulnerability has been identified in the authentication module. \n    Immediate action is required:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Update immediately\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> to version 2.1.3 or higher\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Rotate API keys\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> and force user re-authentication\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Review access logs\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> for suspicious activity\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Affected Versions\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>v2.0.0 - v2.1.2 (High Risk)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>v1.8.0 - v1.9.5 (Medium Risk)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>For detailed mitigation steps, see the \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"security-advisory.md"\u003C/span>>\u003C/span>Security Advisory\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition success"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>✅ Success\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Migration Completed Successfully\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>The database migration has been completed without errors. Summary:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Tables Updated\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>12\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Records Migrated\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1,247,583\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Duration\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>4 minutes 23 seconds\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Rollback Available\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Yes (24 hours)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Next step:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span> Update application configuration to use new schema.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-css-styling\">Advanced CSS Styling\u003C/h2>\n\u003Ch3 id=\"professional-admonition-styling\">Professional Admonition Styling\u003C/h3>\n\u003Cp>Create polished admonitions with custom CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Base admonition styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: contain;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Note styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.note\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#17a2b8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e1f5fe\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.note\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#0277bd\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tip styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tip\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f8e9\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tip\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2e7d32\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Warning styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fffbf0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#f57c00\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Danger styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.danger\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffebee\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.danger\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#c62828\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Success styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e8f5e8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.success\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1b5e20\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Interactive hover effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: default;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.15\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">1px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> -\u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"modern-gradient-styling\">Modern Gradient Styling\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Modern admonition design with gradients */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">25px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.note\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#f8f9ff\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tip\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#f1f8e9\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#f8fff8\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#fff8e1\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#fffef7\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.danger\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#ffebee\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#fff5f5\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">35px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.note\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"ℹ️"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tip\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"💡"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"⚠️"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-modern\u003C/span>\u003Cspan class=\"hljs-selector-class\">.danger\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"🚨"\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"javascript-enhancement-for-interactive-admonitions\">JavaScript Enhancement for Interactive Admonitions\u003C/h2>\n\u003Ch3 id=\"collapsible-admonitions\">Collapsible Admonitions\u003C/h3>\n\u003Cp>Add interactive functionality with JavaScript:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Make all admonitions collapsible\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> admonitions = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.admonition'\u003C/span>);\n    \n    admonitions.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">admonition\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = admonition.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.admonition-title'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = admonition.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.admonition-content'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (title && content) {\n            \u003Cspan class=\"hljs-comment\">// Add collapse indicator\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'collapse-indicator'\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'▼'\u003C/span>;\n            title.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n            \n            \u003Cspan class=\"hljs-comment\">// Make title clickable\u003C/span>\n            title.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n            title.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isCollapsed = content.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> === \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                \n                content.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = isCollapsed ? \u003Cspan class=\"hljs-string\">'block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = isCollapsed ? \u003Cspan class=\"hljs-string\">'▼'\u003C/span> : \u003Cspan class=\"hljs-string\">'▶'\u003C/span>;\n                indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = isCollapsed ? \u003Cspan class=\"hljs-string\">'none'\u003C/span> : \u003Cspan class=\"hljs-string\">'rotate(-90deg)'\u003C/span>;\n            });\n        }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Add smooth transitions\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n    style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\n        .admonition-content {\n            transition: all 0.3s ease;\n            overflow: hidden;\n        }\n        \n        .collapse-indicator {\n            float: right;\n            transition: transform 0.3s ease;\n            font-size: 0.8em;\n        }\n    `\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dismiss-functionality\">Dismiss Functionality\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">addDismissableAdmonitions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> dismissableAdmonitions = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.admonition[data-dismissable="true"]'\u003C/span>);\n    \n    dismissableAdmonitions.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">admonition\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Create dismiss button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dismissBtn = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        dismissBtn.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'×'\u003C/span>;\n        dismissBtn.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'admonition-dismiss'\u003C/span>;\n        dismissBtn.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            top: 10px;\n            right: 15px;\n            background: none;\n            border: none;\n            font-size: 20px;\n            cursor: pointer;\n            opacity: 0.6;\n            transition: opacity 0.2s;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Position admonition relatively\u003C/span>\n        admonition.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n        admonition.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(dismissBtn);\n        \n        \u003Cspan class=\"hljs-comment\">// Add hover effect\u003C/span>\n        dismissBtn.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseenter'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            dismissBtn.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n        });\n        \n        dismissBtn.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseleave'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            dismissBtn.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0.6'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add dismiss functionality\u003C/span>\n        dismissBtn.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            admonition.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transition\u003C/span> = \u003Cspan class=\"hljs-string\">'all 0.3s ease'\u003C/span>;\n            admonition.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n            admonition.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">'translateY(-10px)'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                admonition.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        });\n    });\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize dismissable admonitions\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, addDismissableAdmonitions);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"practical-applications\">Practical Applications\u003C/h2>\n\u003Ch3 id=\"api-documentation\">API Documentation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> [!IMPORTANT]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Authentication Required**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> All API endpoints require authentication via Bearer token in the Authorization header.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!WARNING]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Rate Limiting**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> API requests are limited to 1000 per hour per API key. Exceeding this limit will result in HTTP 429 responses.\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> [!TIP]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Best Practices**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> - Use pagination for large datasets\u003C/span>\n\u003Cspan class=\"hljs-quote\">> - Implement exponential backoff for failed requests  \u003C/span>\n\u003Cspan class=\"hljs-quote\">> - Cache responses when possible to reduce API calls\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Software Installation Guides\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```markdown\n> [!NOTE]\n> **System Requirements**\n> \n> - Node.js 16.0 or higher\n> - npm 8.0 or higher  \n> - 2GB available memory\n\n> [!DANGER]\n> **Data Migration Warning**\n> \n> This upgrade includes database schema changes that are **irreversible**.\n> \n> **Required steps before upgrading:**\n> 1. Create a full backup of your database\n> 2. Test the migration in a staging environment\n> 3. Plan for potential downtime (estimated 15-30 minutes)\n\n> [!SUCCESS]\n> **Installation Complete**\n> \n> The application has been successfully installed. Access it at http://localhost:3000\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"troubleshooting-documentation\">Troubleshooting Documentation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition warning"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>⚠️ Common Issue: Port Already in Use\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Problem:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> Application fails to start with "EADDRINUSE" error\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Solution:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Find the process using the port:\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>lsof -i :3000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Kill the process:\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>kill -9 \u003Cspan class=\"hljs-symbol\"><\u003C/span>PID\u003Cspan class=\"hljs-symbol\">>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>Or use a different port:\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>PORT=3001 npm start\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition tip"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>💡 Pro Tip: Avoid Port Conflicts\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Configure different default ports for different environments:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Development:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> 3000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Testing:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> 3001\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Staging:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> 3002\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Use environment variables in your configuration:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>const PORT = process.env.PORT || 3000;\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-considerations\">Accessibility Considerations\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible admonition markup -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition warning"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"warning-title"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"warning-title"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>⚠️\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    Security Warning\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This action cannot be undone and may result in data loss.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Collapsible admonition with proper ARIA attributes -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition tip"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"region"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"tip-title"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"tip-title"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n      \u003Cspan class=\"hljs-attr\">aria-expanded\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-controls\u003C/span>=\u003Cspan class=\"hljs-string\">"tip-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>💡\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    Performance Tip\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"collapse-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>▼\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"tip-content"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Use caching to improve application performance.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation\">Keyboard Navigation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Keyboard focus styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition-dismiss\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.collapse-indicator\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.admonition-dismiss\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"custom-admonition-types\">Custom Admonition Types\u003C/h2>\n\u003Ch3 id=\"creating-domain-specific-admonitions\">Creating Domain-Specific Admonitions\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Software Development Admonitions -->\n\u003Cspan class=\"hljs-quote\">> [!BUG]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Known Bug: Memory Leak in v2.1.0**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> A memory leak has been identified in the data processing module.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Workaround: Restart the service every 24 hours until v2.1.1 is released.\u003C/span>\n\n<!-- Educational Content Admonitions -->\n\u003Cspan class=\"hljs-quote\">> [!EXERCISE]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Practice Exercise**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> Try implementing the authentication middleware using the patterns discussed above.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Solution available in the `solutions/` directory.\u003C/span>\n\n<!-- Business Documentation Admonitions -->\n\u003Cspan class=\"hljs-quote\">> [!POLICY]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Company Policy**\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-quote\">> \n> All code changes require peer review before merging to the main branch.\u003C/span>\n\u003Cspan class=\"hljs-quote\">> See the [\u003Cspan class=\"hljs-string\">Code Review Guidelines\u003C/span>](\u003Cspan class=\"hljs-link\">code-review.md\u003C/span>) for detailed requirements.\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"styling-custom-types\">Styling Custom Types\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Custom admonition types */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.bug\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e91e63\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fce4ec\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.bug\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ad1457\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.bug\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"🐛"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.exercise\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#9c27b0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f3e5f5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.exercise\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#7b1fa2\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.exercise\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"📝"\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.policy\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#607d8b\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#eceff1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.policy\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#455a64\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>\u003Cspan class=\"hljs-selector-class\">.policy\u003C/span> \u003Cspan class=\"hljs-selector-class\">.admonition-title\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"📋"\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Admonitions work excellently alongside other advanced Markdown features. When creating comprehensive documentation, combine admonitions with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to organize complex warning information and troubleshooting steps into manageable, expandable sections.\u003C/p>\n\u003Cp>For technical documentation requiring both visual alerts and detailed code examples, admonitions complement \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting\u003C/a> by providing context and warnings around code samples, making documentation more comprehensive and user-friendly.\u003C/p>\n\u003Cp>When documenting procedures that include multiple steps and important safety information, consider combining admonitions with \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> to create comprehensive guides with clear visual cues for critical information.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"admonitions-not-rendering\">Admonitions Not Rendering\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Admonitions appear as regular blockquotes or text\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Verify your platform supports the specific admonition syntax\u003C/li>\n\u003Cli>Check for proper spacing and syntax formatting\u003C/li>\n\u003Cli>Use HTML fallbacks for unsupported platforms\u003C/li>\n\u003Cli>Test with minimal examples first\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- GitHub: Ensure proper spacing -->\n\u003Cspan class=\"hljs-quote\">> [!NOTE]\u003C/span>\n\u003Cspan class=\"hljs-quote\">> Content here\u003C/span>\n\n<!-- MkDocs: Verify indentation -->\n!!! note "Title"\n\u003Cspan class=\"hljs-code\">    Content indented with 4 spaces\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"styling-inconsistencies\">Styling Inconsistencies\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Admonitions look different across platforms\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Normalize base styling across platforms */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.admonition\u003C/span>, \u003Cspan class=\"hljs-selector-attr\">[class*=\u003Cspan class=\"hljs-string\">"admonition"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Platform-specific overrides */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.github-alert\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f6f8fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mkdocs-admonition\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n  \u003Cspan class=\"hljs-attribute\">border-left-width\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"accessibility-issues\">Accessibility Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Screen readers don't properly announce admonition content\u003C/p>\n\u003Cp>\u003Cstrong>Solution\u003C/strong>: Use proper semantic markup:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Correct: Semantic structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">section\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition warning"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"warn-title"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"warn-title"\u003C/span>>\u003C/span>Warning\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Important warning content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">section\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Avoid: Non-semantic structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"warning-box"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"title"\u003C/span>>\u003C/span>Warning\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>Content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-and-content-strategy-benefits\">SEO and Content Strategy Benefits\u003C/h2>\n\u003Ch3 id=\"content-organization\">Content Organization\u003C/h3>\n\u003Cp>Admonitions improve content structure and user experience:\u003C/p>\n\u003Cul>\n\u003Cli>Enhanced visual hierarchy that improves content scannability\u003C/li>\n\u003Cli>Better user engagement through attention-grabbing design elements\u003C/li>\n\u003Cli>Improved information architecture with clear content categorization\u003C/li>\n\u003Cli>Professional presentation that builds user trust and authority\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"search-engine-optimization\">Search Engine Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced markup for search engines -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition tip"\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/TechArticle"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"articleSection"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"tips"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-title"\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Performance Optimization Tip\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"admonition-content"\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"articleBody"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Implement caching strategies to improve application response times...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"tools-and-further-reading\">Tools and Further Reading\u003C/h2>\n\u003Cp>If you'd rather generate the correct syntax for your target platform than hand-write and memorize four different formats, our \u003Ca href=\"/tools/markdown-callouts\">Markdown Callout Generator\u003C/a> does that. And since GitHub's \u003Ccode>[!NOTE]\u003C/code> alert syntax, Obsidian's callouts, and MkDocs's \u003Ccode>!!! note\u003C/code> admonitions look similar but don't cross-render at all, see our \u003Ca href=\"/blog/markdown-callouts-admonitions-across-platforms\">guide to callout and admonition rendering across GitHub, GitLab, Obsidian, MkDocs, and Docusaurus\u003C/a> for exactly what happens when you paste one platform's syntax into another.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown admonitions and callouts transform ordinary documentation into engaging, professional content that guides readers effectively through complex information. By mastering these techniques across different platforms, you can create documentation that not only informs but also prevents mistakes, highlights important concepts, and improves overall user experience.\u003C/p>\n\u003Cp>The key to effective admonition usage lies in understanding your platform's capabilities, choosing appropriate admonition types for different information categories, and maintaining consistency in both visual design and content organization. Whether you're creating API documentation, user guides, or technical tutorials, the techniques covered in this guide provide the foundation for clear, visually appealing, and highly functional documentation.\u003C/p>\n\u003Cp>Remember to test admonition rendering across your target platforms, provide HTML fallbacks when needed, and always prioritize accessibility through proper semantic markup and keyboard navigation. With proper implementation, admonitions become powerful tools for creating documentation that users actually want to read and can easily navigate to find the information they need.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52,55],{"id":16,"text":17,"level":18},"why-use-admonitions-and-callouts","Why Use Admonitions and Callouts?",2,{"id":20,"text":21,"level":18},"basic-admonition-concepts","Basic Admonition Concepts",{"id":23,"text":24,"level":18},"platform-specific-implementations","Platform-Specific Implementations",{"id":26,"text":27,"level":18},"html-based-admonitions-for-universal-compatibility","HTML-Based Admonitions for Universal Compatibility",{"id":29,"text":30,"level":18},"advanced-css-styling","Advanced CSS Styling",{"id":32,"text":33,"level":18},"javascript-enhancement-for-interactive-admonitions","JavaScript Enhancement for Interactive Admonitions",{"id":35,"text":36,"level":18},"practical-applications","Practical Applications",{"id":38,"text":39,"level":18},"accessibility-considerations","Accessibility Considerations",{"id":41,"text":42,"level":18},"custom-admonition-types","Custom Admonition Types",{"id":44,"text":45,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":47,"text":48,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":50,"text":51,"level":18},"seo-and-content-strategy-benefits","SEO and Content Strategy Benefits",{"id":53,"text":54,"level":18},"tools-and-further-reading","Tools and Further Reading",{"id":56,"text":57,"level":18},"conclusion","Conclusion",[59],"markdown-callouts",[61,71,79],{"slug":62,"title":63,"description":64,"excerpt":65,"date":66,"category":67,"author":68,"keywords":69,"readingMinutes":70},"markdown-callouts-admonitions-across-platforms","Markdown Callouts and Admonitions Across Platforms: What Actually Renders","GitHub's > [!NOTE] alert syntax, Obsidian's callouts, and MkDocs's admonition extension all look like variations on a theme — but they're three genuinely different syntaxes that mostly don't cross-render. Here's what works where.","Type > [!NOTE] into a Markdown file and on GitHub you get a styled, icon-prefixed callout box. Paste that exact same text into a plain CommonMark renderer, a Jekyll site with no plugin, or an…","2026-08-28","workflows","Matt Rathbone","markdown callouts, github alerts, obsidian callouts, mkdocs admonitions, docusaurus admonitions, markdown warning box across platforms",8,{"slug":72,"title":73,"description":74,"excerpt":75,"date":76,"category":9,"author":10,"keywords":77,"readingMinutes":78},"markdown-line-numbers-code-blocks-complete-guide","Markdown Line Numbers in Code Blocks: Complete Guide for Enhanced Code Documentation","Master line numbering in Markdown code blocks for better code documentation. Learn platform-specific implementations, CSS styling, JavaScript solutions, and accessibility considerations for technical content.","Line numbers in Markdown code blocks transform simple code examples into professional, navigable documentation that enhances readability and enables precise reference communication. While standard…","2025-09-06","markdown line numbers, code block line numbers, markdown syntax highlighting, code documentation, technical writing, programming tutorials, code examples",21,{"slug":80,"title":81,"description":82,"excerpt":83,"date":84,"category":9,"author":10,"keywords":85,"readingMinutes":86},"markdown-code-highlighting-syntax-complete-guide","Markdown Code Highlighting and Syntax Features: Complete Guide for Enhanced Technical Documentation","Master advanced Markdown code highlighting techniques with syntax specification, language detection, custom themes, and interactive code features. Learn professional code presentation for documentation, tutorials, and technical writing.","Advanced Markdown code highlighting transforms technical documentation by providing visually distinct, language-specific syntax coloring and enhanced readability for code examples across…","2025-10-04","markdown code highlighting, syntax highlighting markdown, code blocks markdown, programming language syntax, markdown code themes, technical documentation, markdown code examples, syntax highlighting themes",24,1792184941044]