### Clone and Setup Repository Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/README.md Clone the repository and install dependencies using uv and bun. ```shell git clone https://github.com/asiffer/mkdocs-shadcn cd mkdocs-shadcn ``` ```shell uv sync --all-extras ``` ```shell bun install ``` -------------------------------- ### Install mkdocs-shadcn Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/README.md Install the theme package using pip. ```shell pip install mkdocs-shadcn ``` -------------------------------- ### Install Pygments with uv Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Install the Pygments library using uv for syntax highlighting. ```bash uv add Pygments ``` -------------------------------- ### Comprehensive Page Configuration Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md An example demonstrating the combined usage of various front-matter attributes for page customization, including metadata, navigation, SEO, and custom assets. ```yaml title: Demo page summary: Example page for mkdocs-shadcn users new: true description: Example page for mkdocs-shadcn users keywords: mkdocs,shadcn,demo author: asiffer image: https://raw.githubusercontent.com/asiffer/mkdocs-shadcn/refs/heads/master/.github/assets/logo.svg order: 5 sidebar_title: Demo show_datetime: false external_links: "API Reference": https://ui.shadcn.com/docs/components GitHub: "https://github.com/asiffer/mkdocs-shadcn" extra_css: - css/custom-style.css extra_javascript: - js/custom-script.js ``` -------------------------------- ### Run Development Server Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/README.md Start the local development server and the tailwind CSS watcher. ```shell cd pages/ uv run mkdocs serve --watch-theme -w .. ``` ```shell bun dev ``` -------------------------------- ### Install mkdocstrings with uv Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Add the mkdocstrings package with the python handler using uv. ```bash uv add 'mkdocstrings[python]' ``` -------------------------------- ### Install mkdocstrings with pip Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Install the mkdocstrings package with the python handler using pip. ```bash pip install 'mkdocstrings[python]' ``` -------------------------------- ### Install Pygments with Poetry Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Install the Pygments library using Poetry for syntax highlighting. ```bash poetry add Pygments ``` -------------------------------- ### Install mike via package managers Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mike.md Installation commands for common Python package managers. ```bash pip install mike ``` ```bash uv add mike ``` ```bash poetry add mike ``` -------------------------------- ### Install Pygments with pip Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Install the Pygments library using pip for syntax highlighting. ```bash pip install Pygments ``` -------------------------------- ### Documenting ExcalidrawPlugin with mkdocstrings Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Example of documenting the ExcalidrawPlugin using mkdocstrings, with options to show members and merge init into class. ```markdown ::: shadcn.plugins.excalidraw.ExcalidrawPlugin options: heading_level: 3 docstring_section_style: table members: true inherited_members: true merge_init_into_class: true ``` -------------------------------- ### Collapsible Details Syntax Examples Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_details.md Demonstrates the syntax for creating collapsible details blocks in Markdown. Each block starts with '/// details |' followed by the summary and content. ```markdown ### FAQ /// details | Is this theme an official shadcn port? No. But you can still [star it +heroicons:star+](hhttps://github.com/asiffer/mkdocs-shadcn) /// /// details | Why a new mkdocs theme while `material` exists? First the [shadcn/ui](https://ui.shadcn.com/) theme is just incredible. Actually, nothing can compete with the [material](https://squidfunk.github.io/mkdocs-material/) theme which is very mature and feature rich. In addition to sticking to the shadcn theme, the idea is to remain a simple theme, providing some special built-in features that we may not find in other themes. /// /// details | Is it open to contributions? Yes, yes and yes! On its own, the theme tries to provide more and more relevant extensions/plugins. But anyone can define what could be relevant! [Open an issue](https://github.com/asiffer/mkdocs-shadcn/issues) and let us discuss about it +heroicons:face-smile+ /// /// details | Is `mkdocs-rube-goldberg-plugin-extension` supported? In general no. /// ``` -------------------------------- ### Block Syntax with Python Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Illustrates the block syntax for a hover card, embedding a Python code example within the hover content. ```markdown /// hover-card | hc0 Like a Fibonacci function. :::python def fib(n): a, b = 0, 1 while a < n: print(a, end=' ') a, b = b, a+b print() fib(1000) /// ``` -------------------------------- ### Install pymdown-extensions Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/10_get_started.md Install pymdown-extensions to support advanced markdown features. ```bash pip install pymdown-extensions ``` ```bash uv add pymdown-extensions ``` ```bash poetry add pymdown-extensions ``` -------------------------------- ### Install mkdocstrings with poetry Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Add the mkdocstrings package with the python handler using poetry. ```bash poetry add 'mkdocstrings[python]' ``` -------------------------------- ### Excalidraw Imports and Setup Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Imports necessary React, Excalidraw, and utility functions. Sets up global variables for asset paths and CDN links. ```javascript import { Excalidraw, exportToSvg, convertToExcalidrawElements } from "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom"; import React from "https://esm.sh/react@19.0.0"; import { createRoot } from "https://esm.sh/react-dom@19.0.0/client"; ``` -------------------------------- ### Footnote Syntax Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/footnotes.md Demonstrates the basic syntax for creating footnotes using labels and their corresponding content. Ensure labels are unique and content is properly formatted. ```markdown Footnotes[^1] have a label[^@#$%] and the footnote's content. [^1]: This is a footnote content. [^@#$%]: A footnote on the label: "@#$%". ``` -------------------------------- ### Documenting shadcn.utils with mkdocstrings Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Example of documenting the shadcn.utils module using mkdocstrings, with options to show members and symbol type headings. ```markdown ::: shadcn.utils options: heading_level: 3 members: true show_symbol_type_heading: true ``` -------------------------------- ### Admonition Syntax Examples Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/admonition.md Demonstrates the syntax for various admonition types including info, note, warning, danger, and success. ```markdown :::md {.light} !!! info "Information:" Something **new** is coming to `mkdocs-shadcn` !!! note "Note:" We notice that `x=2` !!! warning "Warning:" There is a *risk* doing `x/0` !!! danger "Danger:" Don't look at `node_modules` **please**! !!! success "Success:" It works! Tell your friends to download `mkdocs-shacn` ``` ```markdown !!! info "Information:" Something **new** is coming to `mkdocs-shadcn` !!! note "Note:" We notice that `x=2` !!! warning "Warning:" There is a *risk* doing `x/0` !!! danger "Danger:" Don't look at `node_modules` **please**! !!! success "Success:" It works! Tell your friends to download `mkdocs-shacn`, either: - with `uv` - with `pip` ``` -------------------------------- ### Documenting RouterMixin with mkdocstrings Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Example of documenting the RouterMixin using mkdocstrings, with options to control heading level and symbol type headings. ```markdown ::: shadcn.plugins._router.RouterMixin options: heading_level: 3 show_symbol_type_heading: true ``` -------------------------------- ### Basic Tab Syntax Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_tab.md Demonstrates the basic syntax for creating three separate tabs: 'pip', 'uv', and 'poetry'. Each tab contains a bash code block. ```markdown /// tab | `pip` :::bash pip install mkdocs-shadcn /// /// tab | uv :::bash uv add mkdocs-shadcn /// /// tab | poetry :::bash poetry add mkdocs-shadcn /// ``` -------------------------------- ### Install Chromium for Playwright Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/tests/README.md Installs the Chromium browser, which is required for Playwright to run browser tests. Execute this command in your terminal. ```shell uv run playwright install chromium ``` -------------------------------- ### Line Chart Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Renders a line chart by including a JavaScript configuration file. This snippet shows the basic structure for displaying a line chart. ```markdown /// echarts --8<-- "docs/assets/echarts/line.js" /// ``` -------------------------------- ### Bar Chart Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Displays a bar chart by referencing an external JavaScript configuration file. This is a straightforward way to integrate bar charts into your documentation. ```markdown /// echarts --8<-- "docs/assets/echarts/bars.js" /// ``` -------------------------------- ### Pie Chart Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Integrates a pie chart into the documentation by including its JavaScript configuration. This snippet is useful for showcasing data distribution visually. ```markdown /// echarts --8<-- "docs/assets/echarts/pie.js" /// ``` -------------------------------- ### Canvas Renderer with Dynamic Styling Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md This example demonstrates using the canvas renderer and applying dynamic styles to the chart container, allowing it to resize with the window. It includes a placeholder for the chart's JavaScript configuration. ```markdown /// echarts renderer: "canvas" attrs: style: "width:100%;height:60vh;" --8<-- "docs/assets/echarts/line.js" /// ``` -------------------------------- ### Radar Chart Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Displays a radar chart using an external JavaScript configuration file. This snippet is suitable for comparing multiple quantitative variables. ```markdown /// echarts --8<-- "docs/assets/echarts/radar.js" /// ``` -------------------------------- ### Scatter Plot Example Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Renders a scatter plot by including the necessary JavaScript configuration. This is ideal for visualizing relationships between two variables. ```markdown /// echarts --8<-- "docs/assets/echarts/scatter.js" /// ``` -------------------------------- ### Fetch Excalidraw Scene Data Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Fetches Excalidraw scene data (elements, appState, files) from a specified file endpoint using a GET request. ```javascript function fetchScene(file) { return fetch(`/excalidraw/scene?file=${file}`, { method: "GET", }) .then((response) => response.json()); } ``` -------------------------------- ### Hover Card with Top Position Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Example of a hover card explicitly positioned at the top using the 'position: top' directive. ```markdown /// hover-card | test-top position: top I am the top. /// ``` -------------------------------- ### Hover Card with Left Position Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Example of a hover card explicitly positioned at the left using the 'position: left' directive. ```markdown /// hover-card | test-left position: left I am at the left. /// ``` -------------------------------- ### Tab Syntax with 'new: true' Option Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_tab.md Illustrates using the 'new: true' option within a tab block, which might indicate a new or distinct tab. This example shows three tabs: 'pip', 'uv', and 'poetry', each with a bash code block. ```markdown /// tab | `pip` new: true :::bash pip install mkdocs-shadcn /// /// tab | uv :::bash uv add mkdocs-shadcn /// /// tab | poetry :::bash poetry add mkdocs-shadcn /// ``` -------------------------------- ### Configure Chart Container Attributes and Renderer Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Customize the chart's container using the `attrs` key and specify the renderer (svg or canvas) with the `renderer` key. This example sets a default class, style, and uses the SVG renderer. ```markdown /// echarts renderer: "svg" attrs: class: "echarts" style: "width:100%;height:500px;" /* config here */ /// ``` -------------------------------- ### Hover Card with Right Position Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Example of a hover card explicitly positioned at the right using the 'position: right' directive. ```markdown /// hover-card | test-right position: right I am at the right. /// ``` -------------------------------- ### Initialize a new project with uv Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/10_get_started.md Quickly set up a new project with mkdocs and the shadcn theme using uv. ```shell uv init myproject cd myproject uv add --dev mkdocs mkdocs-shadcn pymdown-extensions Pygments uv run mkdocs new . echo -e "theme:\n name: shadcn" >> mkdocs.yml uv run mkdocs serve --livereload ``` -------------------------------- ### Deploy documentation version Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mike.md Create a branch for a specific version and set its alias. ```bash mike deploy --branch --update-aliases latest ``` -------------------------------- ### Basic LaTeX Math Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_arithmatex.md Demonstrates inline and block math rendering using standard LaTeX syntax. The theme automatically loads KateX for rendering. ```tex Let $F$ be a primitive of $f$, $$ \int_{a}^b f(x) ~\dx = F(b) - F(a). $$ ``` -------------------------------- ### Configure KateX Options Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/10_get_started.md YAML configuration for customizing KateX rendering, including display mode and custom macros. ```yaml katex_options: displayMode: true macros: "\\RR": "\\mathbb{R}" "\\dx": "\\mathrm{d}x" ``` -------------------------------- ### Enable pymdownx.progressbar Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_progressbar.md Enable the progressbar extension in your MkDocs configuration file. ```yaml mkdocs.yml markdown_extensions: - pymdownx.progressbar ``` -------------------------------- ### Checkboxes in a Table Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md Styled checkboxes can be embedded within tables to indicate feature status or other boolean states. This example shows disabled and checked states. ```md | Feature | Status | | -------- | ----------------------------------------- | | Slider | | | Checkbox | | | Radio | | ``` -------------------------------- ### Set default documentation version Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mike.md Define the default version that serves as the landing page for the documentation site. ```bash mike set-default --branch latest ``` -------------------------------- ### Enable CodeHilite Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Configure mkdocs.yml to enable the codehilite extension for syntax highlighting. ```yaml markdown_extensions: - codehilite ``` -------------------------------- ### Basic Icon Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/iconify.md Use plus signs (+) to wrap an icon key. The key consists of the provider and icon name, separated by a colon (:). ```markdown +lucide:rocket+ ``` -------------------------------- ### Enable TOC Extension with Permalinks Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/toc.md Activate the `toc` extension and enable permalinks in your `mkdocs.yml` configuration file. ```yaml mkdocs.yml markdown_extensions: toc: permalink: true ``` -------------------------------- ### Mkdocs Configuration for mkdocstrings Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mkdocstrings.md Basic mkdocs.yml configuration to enable the search and mkdocstrings plugins. ```yaml plugins: - search - mkdocstrings ``` -------------------------------- ### Progress Bar Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_progressbar.md Use the `[=percentage "label"]` syntax to create progress bars. Customize appearance with attribute lists like `{: .success}`. ```markdown [=50% ""] [=75% "75%"] [=95% "Awesome"]{: .success} [=25% "25%"]{: .warning} [=5% "5%"]{: .danger} ``` -------------------------------- ### Enable pymdownx.blocks.details Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_details.md Configure MkDocs to use the pymdownx.blocks.details extension by adding it to the markdown_extensions list in your mkdocs.yml file. ```yaml # mkdocs.yml markdown_extensions: - pymdownx.blocks.details ``` -------------------------------- ### Basic Excalidraw Plugin Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/excalidraw.md Add the excalidraw plugin to your mkdocs.yml file for basic integration. ```yaml plugins: - search - excalidraw ``` -------------------------------- ### Admonition Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/admonition.md Configure the Admonition extension in your mkdocs.yml file. ```yaml # mkdocs.yml markdown_extensions: - admonition ``` -------------------------------- ### Enable pymdownx.arithmatex in mkdocs.yml Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_arithmatex.md Configure mkdocs.yml to enable the pymdownx.arithmatex extension and set generic mode to true, which is required for its functionality. ```yaml mkdocs.yml mkdown_extensions: - pymdownx.arithmatex: generic: true # required to work ``` -------------------------------- ### Pygments Demo Code Block Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/10_get_started.md A sample Python function used to demonstrate syntax highlighting styles. ```python def fibonacci(n): a, b = 0, 1 for _ in range(n): yield a a, b = b, a + b for num in fibonacci(10): print(num) ``` -------------------------------- ### Configure mkdocs.yml Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/README.md Set the theme name in your MkDocs configuration file. ```yaml theme: name: shadcn ``` -------------------------------- ### Enable pymdownx.tabbed Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_tabbed.md Configure your mkdocs.yml file to enable the pymdownx.tabbed extension. ```yaml # mkdocs.yml markdown_extensions: - pymdownx.tabbed ``` -------------------------------- ### Label and Reference Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Use the label syntax to define an element and the reference syntax to link to it. ```markdown {#prefix:unique-id} ``` ```html {mapped_prefix} {number} ``` ```markdown @prefix:unique-id ``` ```html {mapped_prefix} {number} ``` -------------------------------- ### Configure mike plugin Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/mike.md Include the mike plugin in your mkdocs.yml configuration file. ```yaml # mkdocs.yml plugins: - mike ``` -------------------------------- ### Enable Iconify Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/iconify.md To enable the Iconify extension, add it to the markdown_extensions list in your mkdocs.yml configuration file. ```yaml # mkdocs.yml markdown_extensions: - shadcn.extensions.iconify ``` -------------------------------- ### Enable attr_list Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/attribute_lists.md Enable the attr_list extension in your mkdocs.yml configuration file. ```yaml markdown_extensions: - attr_list ``` -------------------------------- ### New Item Badge Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Add a badge to denote a new item in the sidebar. Set 'new: true' to display the badge. ```yaml new: true ``` -------------------------------- ### LaTeX Label and Reference Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_arithmatex.md Illustrates how to use LaTeX's \label and \ref commands for cross-referencing equations within Markdown. Note the use of '~' to prevent forbidden characters. ```md $$ e^{i \pi} + 1 = 0 \label{~my-equation} $$ In $\ref{~my-equation}$ we see a relation between fundamental math symbols. ``` -------------------------------- ### Custom Excalidraw Directory Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/excalidraw.md Configure a custom directory for storing Excalidraw drawings by specifying the 'directory' option in mkdocs.yml. ```yaml plugins: search: excalidraw: directory: assets/excalidraw ``` -------------------------------- ### Page Title and Summary Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Define the page's title and subtitle using front-matter. This is the primary method for setting page metadata. ```yaml title: Pages # title summary: Metadata configuration # subtitle ``` -------------------------------- ### Configure pymdownx.blocks.caption in mkdocs.yml Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_caption.md Add the extension to the markdown_extensions list in your MkDocs configuration file. ```yaml # mkdocs.yml markdown_extensions: - pymdownx.blocks.caption ``` -------------------------------- ### Icon Syntax with Multiple Parameters Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/iconify.md You can include multiple query parameters, such as color and height, separated by semicolons. Icons are inlined as SVGs. ```markdown > Mathematics +heroicons:variable;height=1em+ consists of proving > the most obvious thing +heroicons:exclamation-circle;color=#ba3329;height=5%+ > in the least obvious way +heroicons:question-mark-circle-solid;color=#0550AE;width=3em+. > - Pólya ``` -------------------------------- ### Enable Fenced Code Blocks Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/fenced_code.md Configure MkDocs to use the fenced_code extension in your mkdocs.yml file. ```yaml markdown_extensions: - fenced_code ``` -------------------------------- ### Configure Autonumber Plugin Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Add the plugin to your mkdocs.yml configuration file. ```yaml # mkdocs.yml plugins: - search - autonumber ``` -------------------------------- ### Enable ECharts Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md To enable the ECharts extension, add it to your mkdocs.yml configuration file under markdown_extensions. ```yaml # mkdocs.yml markdown_extensions: - shadcn.extensions.echarts.alpha ``` -------------------------------- ### Button Sizes Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md Four sizes are available: `xs`, `sm`, default (no class), and `lg`. Sizes can be combined with any variant. ```html ``` -------------------------------- ### Create Tabbed Content with pymdownx.tabbed Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_tabbed.md Use the tabbed syntax to create different content panels accessible via tabs. Each tab is defined by '=== "Tab Title"' followed by the content. ```markdown === "`pip`" :::bash pip install mkdocs-shadcn === "uv" :::bash uv add mkdocs-shadcn === "poetry" :::bash poetry add mkdocs-shadcn ``` ```markdown === "`pip`" :::bash pip install mkdocs-shadcn === "uv" :::bash uv add mkdocs-shadcn === "poetry" :::bash poetry add mkdocs-shadcn ``` -------------------------------- ### Configure Codexec Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codexec.md Add the 'shadcn.extensions.codexec' to your mkdocs.yml for enabling the extension. ```yaml # mkdocs.yml markdown_extensions: - codehilite - shadcn.extensions.codexec ``` -------------------------------- ### Inline and Block Syntax for Hover Cards Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Demonstrates how to use hover cards with both inline text and a separate block. The inline syntax uses a footnote-like syntax, while the block syntax uses a custom directive. ```markdown If you want to [put it inline]^[something to `display` right *now* but in **hover card**, like $f(x) = x^2$]. Or choose the [block syntax]^[#hc0]. /// hover-card | hc0 Like a Fibonacci function. :::python def fib(n): a, b = 0, 1 while a < n: print(a, end=' ') a, b = b, a+b print() fib(1000) /// ``` -------------------------------- ### Enable Hover Card Extension Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md To enable the hover card extension, add 'shadcn.extensions.hover_card' to your mkdocs.yml configuration under markdown_extensions. ```yaml # mkdocs.yml markdown_extensions: - shadcn.extensions.hover_card ``` -------------------------------- ### Configure pymdownx.blocks.tab in mkdocs.yml Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_tab.md Add 'pymdownx.blocks.tab' to the markdown_extensions list in your mkdocs.yml file to enable the tabbed content functionality. ```yaml # mkdocs.yml markdown_extensions: - pymdownx.blocks.tab ``` -------------------------------- ### Standard HTML Buttons Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md The theme styles `button`, `a.button`, and `input[type="button"]` identically. Use the element that is most semantically appropriate for your content. ```html Link ``` -------------------------------- ### SEO Attributes Configuration Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Set SEO-related meta attributes like description, keywords, author, and image using front-matter. These are used to optimize search engine visibility. ```yaml description: Extra page description keywords: mkdocs,shadcn author: asiffer image: https://raw.githubusercontent.com/asiffer/mkdocs-shadcn/refs/heads/master/.github/assets/logo.svg ``` -------------------------------- ### Basic Select Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md A standard select element styled to match the theme. ```html ``` -------------------------------- ### Customizing Hover Card Style with Class Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Demonstrates how to apply custom CSS classes to a hover card for styling purposes using the 'class' option. ```markdown You can [customize]^[#test-class] a block. /// hover-card | test-class class: "font-bold font-mono" Yeah! Just look at the result. /// ``` -------------------------------- ### Enable Trust Option for KateX Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_arithmatex.md Configure the theme's KateX options in mkdocs.yml to enable the 'trust' setting, which is necessary for cross-page links and certain LaTeX commands. ```yaml theme: name: shadcn katex_options: trust: true # <- here ``` -------------------------------- ### Autonumber Tables with Captions Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Label and reference tables using the autonumber syntax. ```markdown | Name | Score | | :---- | ----: | | Alice | 95 | | Bob | 87 | /// caption | < {#tbl﹕scores} - List of scores /// @Tbl﹕scores lists the final scores. ``` -------------------------------- ### Initialize Excalidraw Instance Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html This function initializes an Excalidraw instance attached to a specified HTML element ID. It allows for setting the initial view mode. Ensure the container element with the given ID exists in the DOM. ```javascript window.excalidraw = (id, viewModeEnabled = false) => { const excalidrawWrapper = document.getElementById(id); if (!excalidrawWrapper) { console.error(`No container with id=${id} found`); return; } const file = excalidrawWrapper.attributes.getNamedItem('data-scene').value; const root = createRoot(excalidrawWrapper); root.render(React.createElement(App, { file: file, viewModeEnabled })); }; ``` -------------------------------- ### Slider with Fieldset and Output Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md Wrapping a slider in a `
` allows for a label, hint text, and a live `` element. The provided `oninput` handler keeps the output element synchronized with the slider's current value. ```html
5 Choose it carefully
``` -------------------------------- ### Per-Page CSS and JavaScript Loading Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Load custom CSS and JavaScript files for individual pages. 'extra_css' is included in the head, and 'extra_javascript' at the bottom of the page. ```yaml extra_css: # included in - css/custom.css extra_javascript: # included at the bottom of the page - js/custom.js ``` -------------------------------- ### Basic Switch Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md A basic checkbox with the 'switch' class applied to render as a toggle. ```html ``` -------------------------------- ### Basic ECharts Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md Use the /// echarts block to define ECharts configurations. The extension processes the JavaScript configuration object within the block. ```markdown /// echarts { /* echarts js config */ } /// ``` -------------------------------- ### Hover Card Positioning Options Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/hover_card.md Shows how to control the position of the hover card using the 'position' option in the block syntax. Supported positions are top, right, left, and the default bottom. ```markdown You can [hover it at the bottom]^[#test] (default), or [at the top]^[#test-top], or [at the right]^[#test-right], or [at the left]^[#test-left]. /// hover-card | test I am at the bottom. /// /// hover-card | test-top position: top I am the top. /// /// hover-card | test-right position: right I am at the right. /// /// hover-card | test-left position: left I am at the left. /// ``` -------------------------------- ### Enable TOC Extension with Leading Permalinks Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/toc.md Configure the `toc` extension to use leading permalinks by setting `permalink_leading` to true and defining the `permalink_class` in `mkdocs.yml`. ```yaml mkdocs.yml markdown_extensions: toc: permalink: true permalink_leading: true permalink_class: "headerlink leading" ``` -------------------------------- ### Math within Admonitions Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_arithmatex.md Shows how to embed LaTeX mathematical expressions within Markdown admonition blocks. This combines the formatting of admonitions with the rendering capabilities of arithmatex. ```md !!! note "Theorem" Let $X_1, X_2, \dots, X_n$ be a sequence of independent and identically distributed random variables with mean $\mu$ and finite variance $\sigma^2$. Define the sample mean: $$ \overline{X}_n = \frac{1}{n}\sum_{i=1}^{n} X_i $$ Then, as $n \to \infty$: $$ \frac{\sqrt{n}(\overline{X}_n - \mu)}{\sigma} \xrightarrow{d} \mathcal{N}(0,1) $$ In other words, the distribution of the standardized sample mean approaches the standard normal distribution: $$ \frac{\overline{X}_n - \mu}{\sigma/\sqrt{n}} \xrightarrow{d} \mathcal{N}(0,1), \quad \text{as } n \to \infty ``` -------------------------------- ### Handle C++ Exception Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codexec.md Shows the handling of exceptions thrown in C++ code. The exception message is displayed in the output. ```cpp void raise_exception() { throw "This is an error"; } int main(void) { raise_exception(); return 0; } ``` -------------------------------- ### Show Datetime Override Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Override the global 'show_datetime' theme option for a specific page. Set to 'true' to display the last update date. ```yaml show_datetime: true ``` -------------------------------- ### Basic Fenced Code Block Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/fenced_code.md A standard fenced code block with Python syntax highlighting. ```python def fibonacci(n): a, b = 0, 1 for _ in range(n): yield a a, b = b, a + b for num in fibonacci(10): print(num) ``` -------------------------------- ### Admonition with Nested Code Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/admonition.md Shows how to nest a Python code block within an admonition using the `codehilite` extension. ```markdown !!! note "Admonition + Code" You may face the limits of `codehilite` however. :::python def fibonacci(n): a, b = 0, 1 for _ in range(n): yield a a, b = b, a + b for num in fibonacci(10): print(num) ``` ```markdown !!! note "Admonition + Code" You may face the limits of `codehilite` however. :::python def fibonacci(n): a, b = 0, 1 for _ in range(n): yield a a, b = b, a + b for num in fibonacci(10): print(num) ``` -------------------------------- ### MkDocs Script Inclusion Logic Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/script.html This snippet demonstrates conditional script inclusion based on MkDocs version and file extension. It uses Jinja2 templating. ```html {%- if script.path %} {# Detected MkDocs 1.5+ which has \`script.path\` and \`script_tag\` #} {{ script | script_tag }} {%- else %} {# Fallback - examine the file name directly #} {% if script.endswith('.mjs') %} {% else %} {% endif %} {%- endif %} ``` -------------------------------- ### Highlight C Compilation Error Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codexec.md Demonstrates the highlighting of compilation errors in C code. The output indicates the error in the C code snippet. ```c #include int main(void) { const int a = 42; a = -1; printf("a = %d\n", a); } ``` -------------------------------- ### Autonumber Figures with Captions Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Pair the plugin with pymdownx.blocks.caption to label and reference images. ```markdown ![Mountain](https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80) /// caption {#fig﹕mountain} - Aoraki / Mount Cook, New Zealand /// @Fig﹕mountain is awesome! ``` -------------------------------- ### Conditional Icon Rendering Logic Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/icon.html This Jinja2 template logic handles the display of the site's icon. It checks if an icon is configured, if it's a valid file or URL, and falls back to using the iconify utility or a default SVG if not. ```html {% if config.theme.icon %} {% if (config.theme.icon | file_exists) or (config.theme.icon | is_http_url) %} ![icon]({{ config.theme.icon | url }}) {% else %} {{ config.theme.icon | iconify }} {% endif %} {% else %} {% with override_class="size-5" %} {% include "icons/shadcn.svg" %} {% endwith %} {% endif %} ``` -------------------------------- ### Embedding an Excalidraw Drawing Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/excalidraw.md Use the custom markdown syntax '~{title}(path/to/file.json)' to embed an Excalidraw drawing. The path is relative to the configured plugin directory. ```markdown ~{test}(drawing0.json) ``` -------------------------------- ### Autonumber Math Admonitions Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Use labels within admonitions to number mathematical theorems or equations. ```markdown !!! note "{#th﹕dominated_convergence} (Lebesgue's dominated convergence theorem)" Let $(f_n)_{n\in\NN}$ be a sequence of complex-valued measurable functions on a measure space $(S,\Sigma,\mu)$. Suppose that the sequence converges pointwise to a function $f$ i.e. $$ \lim _{n\to \infty }f_{n}(x)=f(x) $$ exists for every $x\in S$. Assume moreover that the sequence $f_{n}$ is dominated by some integrable function $g$ in the sense that $$ |f_{n}(x)|\leq g(x) $$ for all points $x\in S$ and all $n\in\NN$. Then $f_n$, $f$ are integrable and $$ \lim _{n\to \infty}\int_{S}f_{n}\,d\mu =\int _{S}\lim _{n\to \infty }f_{n}d\mu =\int _{S}f\,d\mu $$ ``` -------------------------------- ### Fetch Excalidraw SVG Content Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Fetches SVG content for a given file from the server and parses it into an SVG DOM element. ```javascript function fetchSVG(file) { return fetch(`/excalidraw/svg?file=${file}`, { method: "GET", }) .then((response) => response.text()) .then((txt) => { const parser = new DOMParser(); const doc = parser.parseFromString(txt, 'image/svg+xml'); const svgElement = doc.querySelector('svg'); return svgElement; }); } ``` -------------------------------- ### Labelled Select with Hint Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md A select element wrapped in a fieldset with a label and a hint. ```html
Choose your favorite
``` -------------------------------- ### Icon Syntax with Height Parameter Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/iconify.md Override the default icon height or pass other valid Iconify API query parameters by appending them after a semicolon (;). ```markdown +lucide:cassette-tape;height=3em+ ``` -------------------------------- ### Rendered Python Code Block Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md The resulting syntax-highlighted Python code block. ```python import numpy as np ``` -------------------------------- ### Sidebar Navigation Order and Title Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/20_pages.md Configure the order and display title of pages in the sidebar. The 'order' attribute influences sorting, and 'sidebar_title' sets the displayed text. ```yaml order: 2 sidebar_title: Navigation title ``` -------------------------------- ### Define Autonumber Prefixes Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/plugins/autonumber.md Customize or extend the default prefix mapping for labeled elements. ```yaml plugins: autonumber: prefixes: fig: Figure tbl: Table eq: Equation ``` ```yaml plugins: autonumber: prefixes: fig: Figure tbl: Table eq: Equation thm: Theorem lem: Lemma prop: Proposition ``` -------------------------------- ### Handle Python Exception Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codexec.md Illustrates how Codexec handles and displays exceptions raised in Python code. The exception message is printed in the output. ```python def raise_exception(): raise Exception("This is an error") raise_exception() ``` -------------------------------- ### Export Excalidraw Elements to SVG Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Converts Excalidraw elements and app state into an SVG string. It applies transformations and adjusts colors for integration. ```javascript async function toSVG(elements, appState, files) { const svg = await exportToSvg({ elements: shiftBoundElements(elements, appState), appState: { ...appState, exportBackground: false }, files, exportPadding: 0, metadata: "mkdocs-shadcn", }); svg.innerHTML = `` + svg.innerHTML.replaceAll("#1e1e1e", "currentColor") + ""; return svg; } ``` -------------------------------- ### Highlight Python Syntax Error Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codexec.md Shows how the Codexec extension highlights syntax errors in Python code. The error is indicated directly in the output. ```python print("hello world!" ``` -------------------------------- ### Excalidraw App Component Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html The main React component for the Excalidraw application. It accepts a file name and an optional view mode flag, and manages the Excalidraw instance and its interactions. ```javascript function App({ file, viewModeEnabled = false }) { // API to call excalidraw functions (mainly to retrive ``` -------------------------------- ### Save Excalidraw Scene Data Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Saves Excalidraw scene data (elements, appState, files) to a specified file endpoint using a POST request with JSON body. ```javascript function saveScene(file, elements, appState, files) { return fetch(`/excalidraw/scene?file=${file}`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ elements, appState, files, }), }); } ``` -------------------------------- ### Update Datetime Element Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/datetime.html This snippet updates an element with the ID 'updated_at' with a formatted date string. It uses Jinja templating to insert the ISO formatted date and JavaScript's Date object to format it locally. Ensure the element exists and the 'updated_at' meta field is provided. ```html {% if page.meta.updated_at %} const updatedAt = document.getElementById("updated_at"); if (updatedAt) { const date = new Date('{{ page.meta.updated_at.isoformat() }}'); updatedAt.textContent = date.toLocaleDateString(); } {% endif %} ``` -------------------------------- ### CodeHilite with Backticks Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Use the backticks syntax to specify a Python code block for syntax highlighting. ```markdown ~~~ markdown ```python import numpy as np ``` ~~~ ``` -------------------------------- ### Apply caption to a table Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_caption.md Use the caption block syntax to add a caption and optional identifier to a Markdown table. ```markdown Here is a table: | Invoice | Status | Method | Amount | | :--------- | :------ | :------------ | ------------: | | **INV001** | Paid | Credit Card | $250.00 | | **INV002** | Pending | PayPal | $150.00 | | **INV003** | Unpaid | Bank Transfer | $350.00 | | **INV004** | Paid | Credit Card | $450.00 | | **INV005** | Paid | PayPal | $550.00 | | **INV006** | Pending | Bank Transfer | $200.00 | | **INV007** | Unpaid | Credit Card | $300.00 | | **Total** | | | **$2,500.00** | /// caption {#tbl﹕invoices}. A list of your recent invoices. /// ``` -------------------------------- ### Add Class Attribute to Link Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/attribute_lists.md Use the attr_list syntax to add a 'reference' class to a Markdown link. ```markdown [Reference](https://python-markdown.github.io/extensions/attr_list/){: class="reference" } ``` -------------------------------- ### Use figure-caption for images Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_caption.md Use the figure-caption block to wrap images in figure tags with a caption. ```markdown ![Mountain](https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80) /// figure-caption Aoraki / Mount Cook, New Zealand /// ``` -------------------------------- ### Use table-caption for numbered tables Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/pymdownx_blocks_caption.md Use the table-caption block to automatically handle numbering for table captions. ```markdown | Task | Title | Status | Priority | | --------- | ----------------------------------------------------------------------------------------------- | ----------- | -------- | | TASK-8782 | **Documentation** You can't compress the program without quantifying the open-source SSD pixel! | In Progress | Medium | | TASK-7878 | **Documentation** Try to calculate the EXE feed, maybe it will index the multi-byte pixel! | Backlog | Medium | | TASK-7839 | **Bug** We need to bypass the neural TCP card! | TODO | High | /// table-caption A list of your current tasks. /// ``` -------------------------------- ### Checkbox with Fieldset and Label Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md Pair a checkbox with a label by embedding it within a `
` element for better structure and accessibility. ```html
``` -------------------------------- ### CodeHilite with Colon Syntax Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/codehilite.md Use the colon syntax to specify a Python code block for syntax highlighting. Ensure the block is indented. ```markdown :::md :::python import numpy as np ``` -------------------------------- ### Excalidraw Theme Detection Hook Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html A React hook that detects and tracks the current theme (light or dark) based on the document's class list. It updates the theme state when changes are detected. ```javascript function useTheme() { const get = () => document.documentElement.classList.contains("dark") ? "dark" : "light"; const [theme, setTheme] = React.useState(get); React.useEffect(() => { const obs = new MutationObserver(() => setTheme(get())); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); return () => obs.disconnect(); }, []); return theme; } ``` -------------------------------- ### Styled Slider Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md A standard `` is rendered as a styled slider. No additional configuration is needed. ```html ``` -------------------------------- ### Include Snippets with ECharts Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/extensions/echarts.md You can include ECharts configurations from external files using the pymdownx.snippets extension within the ECharts block. ```markdown /// echarts --8<-- "example.js" /// ``` -------------------------------- ### JavaScript for Permalink Copying Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/permalink.html This JavaScript code adds a click listener to elements with the class 'headerlink'. When clicked, it copies the full URL of the element (including the anchor) to the user's clipboard. ```javascript document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("a.{{ config.mdx\_configs.get('toc', {}).get('permalink\_class', 'headerlink') }}").forEach(function (link) { link.addEventListener("click", function (e) { e.preventDefault(); // Build the full URL with the anchor fragment const url = window.location.origin + window.location.pathname + this.getAttribute("href"); navigator.clipboard.writeText(url).then(function () { // Optional: brief visual feedback }); }); }); }); ``` -------------------------------- ### Icon Buttons Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/30_html.md The `icon` class forces a square aspect ratio, useful for icon-only buttons. This can be combined with size and variant classes. ```html ``` -------------------------------- ### Update Pygments Style JavaScript Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/pages/docs/10_get_started.md Logic to dynamically update the CSS class of elements with the .pygments-demo class based on a select input. ```javascript function updatePygmentsStyle(event) { const style = event.target.value; for (const el of document.querySelectorAll(".pygments-demo")) { el.classList.remove(prevValue); el.classList.add(style); } prevValue = style; } ``` ```javascript let prevValue = document.getElementById("pygments-select").value; ``` -------------------------------- ### Shift Bound Elements for Canvas Sizing Source: https://github.com/asiffer/mkdocs-shadcn/blob/master/shadcn/templates/external/excalidraw.html Appends invisible elements to ensure the Excalidraw canvas maintains a consistent size relative to its content. Adjusts element positions based on scroll offsets. ```javascript function shiftBoundElements(elements, appState) { const extraPoints = convertToExcalidrawElements([ { type: "freedraw", x: 0, y: 0, width: 0.0, height: 0.0, points: [[0, 0], [0, 0]], opacity: 0, pressures: [], }, { type: "freedraw", x: appState.width, y: appState.height, width: 0.0, height: 0.0, points: [[0, 0], [0, 0]], opacity: 0, pressures: [], }, ]); return [ ...elements.map((e) => { return { ...e, x: e.x + appState.scrollX, y: e.y + appState.scrollY }; }), ...extraPoints, ]; } ```