### Install Guide Elements (Bash) Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs This snippet shows the command to install the Scalar guide elements package using npm. It is a common prerequisite for using Scalar's documentation components. ```bash npm install @scalar/guide-elements ``` -------------------------------- ### Markdown Links and Images Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Provides examples for creating hyperlinks and embedding images using Markdown syntax. Requires valid URL formats for links and image sources. ```markdown [Link text](https://example.com) ![Alt text](https://example.com/image.png) ``` -------------------------------- ### Basic Callout Example (HTML & Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/callouts Demonstrates how to create a basic informational callout. The component uses the 'info' type by default if no type is specified. This example is applicable to both HTML and Scalar's Markdown syntax. ```html This is an informational message. ``` ```markdown :::scalar-callout{type="info"} This is an informational message. ::: ``` -------------------------------- ### Markdown Headings Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Demonstrates the usage of different heading levels in Markdown, from H1 to H6. No specific language is required as this is pure Markdown syntax. ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 ``` -------------------------------- ### Markdown Blockquotes Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Shows the syntax for creating blockquotes in Markdown, which are used for quoting text from another source. Supports multi-line blockquotes. ```markdown > This is a blockquote > > It can span multiple lines ``` -------------------------------- ### Initialize Scalar Configuration File (Bash) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This command creates an empty `scalar.config.json` file. This file will be used to configure Scalar Docs, including settings like subdomains, guides, and references. ```bash touch scalar.config.json ``` -------------------------------- ### Scalar Steps Container Component Source: https://guides.scalar.com/scalar/scalar-docs/components/steps Shows how to group multiple scalar-step components within a scalar-steps container to create a sequence of instructions. Each step in the container can have its own title and embedded commands. ```html

Initialize a new project: ```bash mkdir my-project cd my-project npm init -y ```

Install the required packages: ```bash npm install react react-dom ```

Begin development: ```bash npm start ```

``` ```markdown ::::scalar-steps :::scalar-step{ id="step-1" title="Setup Project" } Initialize a new project: ```bash mkdir my-project cd my-project npm init -y ``` ::: :::scalar-step{ id="step-2" title="Install Dependencies" } Install the required packages: ```bash npm install react react-dom ``` ::: :::scalar-step{ id="step-3" title="Start Development" } Begin development: ```bash npm start ``` ::: :::: ``` -------------------------------- ### Markdown Tables Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Illustrates the creation of tables in Markdown, including headers and data rows. Supports column alignment using colons in the separator line. ```markdown | Header 1 | Header 2 | Header 3 | |----------|----------|----------| | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 | ``` -------------------------------- ### Create Documentation Directory and File (Bash) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This snippet demonstrates how to create a `docs` directory and an example Markdown file named `introduction.md` within it using bash commands. This is the initial step for adding content to your documentation. ```bash # Create a docs/ folder mkdir docs # Create an example file echo "# Hello World" > docs/introduction.md ``` -------------------------------- ### Basic Scalar Configuration (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This JSON configuration sets up the basic structure for Scalar Docs. It includes a `$schema` for validation, a `subdomain` for the documentation URL, and defines the `guides` with a reference to the `introduction.md` file. ```json { "$schema": "https://cdn.scalar.com/schema/scalar-config.json", "subdomain": "my-awesome-documentation", "guides": [ { "name": "My awesome documentation", "sidebar": [ { "path": "docs/introduction.md", "type": "page" } ] } ], "references": [] } ``` -------------------------------- ### Markdown Task Lists Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Demonstrates the syntax for creating task lists in Markdown, including completed and pending tasks. This is a GitHub Flavored Markdown (GFM) feature. ```markdown - [x] Completed task - [ ] Pending task - [ ] Another pending task ``` -------------------------------- ### Markdown Lists Example (Unordered and Ordered) Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Shows how to create both unordered and ordered lists in Markdown, including nested list items. Supports standard Markdown list syntax. ```markdown * Unordered list item * Another item * Nested item * Another nested item 1. Ordered list item 2. Another item 1. Nested item 2. Another nested item ``` -------------------------------- ### Basic Scalar Step Component Source: https://guides.scalar.com/scalar/scalar-docs/components/steps Demonstrates how to create a basic interactive step using the scalar-step component. This step is collapsible by default and displays a title. It can include embedded code blocks for instructions. ```html First, install the required dependencies by running: ```bash npm install @scalar/guide-elements ``` ``` ```markdown :::scalar-step{ id="step-1" title="Install Dependencies"} First, install the required dependencies by running: ```bash npm install @scalar/guide-elements ``` ::: ``` -------------------------------- ### Markdown Text Formatting Example Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Illustrates common text formatting options in Markdown, including bold, italic, strikethrough, and inline code. This is standard Markdown syntax. ```markdown **Bold text** *Italic text* ~~Strikethrough text~~ `Inline code` ``` -------------------------------- ### Tabs with Default Selection for Multiple Languages Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs Illustrates how to set a default active tab for a group of code examples, showing implementations in JavaScript and TypeScript using both Scalar and Markdown syntaxes. ```html

```javascript const user = { name: "John", age: 30 }; ```

```typescript interface User { name: string; age: number; } const user: User = { name: "John", age: 30 }; ```

``` ```markdown ::::scalar-tabs{ default="TypeScript" } :::scalar-tab{ title="JavaScript" } ```javascript const user = { name: "John", age: 30 }; ``` ::: :::scalar-tab{ title="TypeScript" } ```typescript interface User { name: string; age: number; } const user: User = { name: "John", age: 30 }; ``` ::: :::: ``` -------------------------------- ### Scalar Card - Left Icon, Title, and Body (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/card Demonstrates a comprehensive scalar-card configuration including a left icon, title, and body content. Both HTML and Markdown syntax examples are included. ```html Card with a `leftIcon`, title, and body ``` ```markdown :::scalar-card{ leftIcon="solid/basic-shape-hexagon" title="The Title of the Card"} Card with a `leftIcon`, title, and body ::: ``` -------------------------------- ### Scalar Card - Icon and Body (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/card Illustrates the use of an icon within the scalar-card component, alongside the main body content. Examples are provided for both HTML and Markdown syntaxes. ```html Card with icon and body. ``` ```markdown :::scalar-card{icon="solid/basic-shape-hexagon"} Card with icon and body. ::: ``` -------------------------------- ### Markdown Code Blocks Example (JavaScript) Source: https://guides.scalar.com/scalar/scalar-docs/components/markdown-support Demonstrates how to embed code blocks in Markdown, specifically using JavaScript syntax highlighting. Supports fenced code blocks with language specifiers. ```javascript function example() { return "Hello, World!"; } ``` -------------------------------- ### Basic Scalar Icon Usage (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/icons Demonstrates the fundamental usage of the scalar-icon component. It requires a 'src' attribute for the icon source and an optional 'title' for accessibility. This example shows its implementation in both HTML and Markdown formats. ```html ``` ```markdown ::scalar-icon{ src="check-circle" title="Success indicator" } ``` -------------------------------- ### Scalar Details: Open by Default (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Illustrates how to make a scalar-detail section start in an expanded state by using the 'open' attribute in HTML. This is useful for content that should be immediately visible. ```html The section is open by default. ``` -------------------------------- ### GitHub Actions Workflow for Environment-Based Scalar Project Deployment Source: https://guides.scalar.com/scalar/scalar-docs/publish-scalar-projects-using-github-actions This workflow enables environment-based deployment for Scalar projects, supporting both `main` and `development` branches. It installs the Scalar CLI, authenticates using an API key, sets environment-specific project slugs, and then publishes the project. It relies on the `SCALAR_API_KEY` secret and dynamically sets the `PROJECT_SLUG` environment variable. ```yaml name: Publish Scalar Project on: push: branches: - main - development jobs: publish: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: Install Scalar CLI run: npm install -g @scalar/cli - name: Authenticate Scalar env: SCALAR_API_KEY: ${{ secrets.SCALAR_API_KEY }} run: scalar auth login - name: Set project slug if: github.ref == 'refs/heads/main' run: echo "PROJECT_SLUG=production-project" >> $GITHUB_ENV - name: Set development slug if: github.ref == 'refs/heads/development' run: echo "PROJECT_SLUG=development-project" >> $GITHUB_ENV - name: Publish Project run: scalar project publish --slug "$PROJECT_SLUG" ``` -------------------------------- ### Scalar Card - Title and Body (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/card Shows how to add a title to the scalar-card component along with its body content. This example illustrates both HTML and Markdown implementations. ```html Card with title and body. ``` ```markdown :::scalar-card{title="The Title of the Card"} Card with title and body. ::: ``` -------------------------------- ### Static Scalar Step Component Source: https://guides.scalar.com/scalar/scalar-docs/components/steps Illustrates how to create a static, non-collapsible step using the scalar-step component by setting the interactivity property to 'none'. This ensures the content is always visible. It also shows how to embed code snippets within the step. ```html This step cannot be collapsed and is always visible. ```javascript const config = { theme: 'dark', interactive: false, } ``` ``` ```markdown ::scalar-step{ id="step-2" title="Configuration" interactivity="none" } This step cannot be collapsed and is always visible. ```javascript const config = { theme: 'dark', interactive: false, } ``` ::: ``` -------------------------------- ### Scalar Card - Title Only (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/card Shows how to create a scalar-card component that only displays a title, without any body content. Examples are provided for both HTML and Markdown. ```html ``` ```markdown ::scalar-card{title="Without Body"} ``` -------------------------------- ### Scalar Icon from URL (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/icons Shows how to load icons from external URLs, supporting both SVG and common image formats (PNG, JPG). The 'src' attribute can directly point to a web resource. This example is presented in HTML and Markdown. ```html ``` ```markdown ::scalar-icon{ src="https://avatars.githubusercontent.com/u/301879?s=200&v=4" title="Custom icon from URL" class="icon-custom" size="4em" } ``` -------------------------------- ### Scalar Icon with Different Size Units (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/icons Demonstrates the flexibility of the 'size' attribute in scalar-icon by using various CSS units like 'px', 'em', and 'rem'. This allows for precise control over icon dimensions across different contexts. Examples are provided for HTML and Markdown. ```html

``` ```markdown ::scalar-icon{ src="star" title="Small icon" size="16px" } ::scalar-icon{ src="star" title="Medium icon" size="1.5em" } ::scalar-icon{ src="star" title="Large icon" size="2rem" } ``` -------------------------------- ### Scalar Details: Custom Icon (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Provides an example of using a custom icon for a scalar-detail section within Markdown by specifying the 'icon' attribute in the directive. This allows for thematic or functional visual cues. ```markdown :::scalar-detail{title="Custom Icon" icon="airplane"} Using a custom icon. ::: ``` -------------------------------- ### Scalar Icon with Custom Classes (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/icons Shows how to apply custom CSS classes to a scalar-icon for advanced styling. The 'class' attribute accepts a space-separated string of class names. This example illustrates its use in HTML and Markdown. ```html ``` ```markdown ::scalar-icon{ src="warning" title="Warning message" class="text-yellow-500 mr-2" } ``` -------------------------------- ### Scalar Icon with Custom Size (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/icons Illustrates how to control the display size of a scalar-icon using the 'size' attribute. This attribute accepts any valid CSS unit (e.g., 'px', 'em', 'rem'). The example shows implementation in HTML and Markdown. ```html ``` ```markdown ::scalar-icon{ src="info" title="Information" size="24px" class="text-blue-600" } ``` -------------------------------- ### Basic GitHub Actions Workflow to Publish Scalar Project Source: https://guides.scalar.com/scalar/scalar-docs/publish-scalar-projects-using-github-actions This workflow automates the publishing of a Scalar project to the main branch. It checks out the repository, sets up Node.js, logs into Scalar using an API key, and publishes the project with a specified slug. It requires a `SCALAR_API_KEY` secret. ```yaml name: Publish Scalar Project on: push: branches: - main jobs: publish-project: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: Use Node.js uses: actions/setup-node@v4 with: node-version: 22 - name: Log in to Scalar run: npx @scalar/cli auth login --token ${{ secrets.SCALAR_API_KEY }} - name: Publish Project run: npx @scalar/cli project publish --slug your-project-slug ``` -------------------------------- ### Trigger Deployment via Scalar CLI (Bash) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This command uses the Scalar CLI to manually trigger a documentation deployment. Replace `your-project-slug` with the actual slug of your Scalar project. ```bash npx @scalar/cli project publish --slug your-project-slug ``` -------------------------------- ### Display Basic Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Demonstrates how to display a basic image using the scalar-image component. It requires a source URL and alternative text for accessibility. This is the fundamental way to include images. ```html ``` ```markdown ::scalar-image{ src="https://avatars.githubusercontent.com/u/6176314?v=4" alt="Application screenshot" } ``` -------------------------------- ### Basic Tabs with Multiple Languages Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs Demonstrates how to create a tabbed interface with content for JavaScript, TypeScript, Python, Rust, Go, and C++. Each language's code is presented in its own tab. ```markdown

```javascript function greet(name) { return `Hello, ${name}!`; } console.log(greet('World')); ```

```typescript function greet(name: string): string { return `Hello, ${name}!`; } console.log(greet('World')); ```

```python def greet(name): return f"Hello, {name}!" print(greet("World")) ```

``` ```markdown ::::scalar-tabs :::scalar-tab{ title="Rust" } ```rust fn greet(name: &str) -> String { format!("Hello, {}!", name) } fn main() { println!("{}", greet("World")); } ``` ::: :::scalar-tab{ title="Go" } ```go package main import ( "fmt" ) func greet(name string) string { return fmt.Sprintf("Hello, %s!", name) } func main() { fmt.Println(greet("World")) } ``` ::: :::scalar-tab{ title="C++" } ```cpp #include #include std::string greet(const std::string& name) { return "Hello, " + name + "!"; } int main() { std::cout << greet("World") << std::endl; return 0; } ``` ::: :::: ``` -------------------------------- ### Create Page Link with Path, Title, and Description (HTML/Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/page-link This snippet shows the complete usage of the Page Link component, including a custom title and a descriptive text. It demonstrates the syntax for both HTML tags and Markdown for comprehensive link creation. ```html ``` ```markdown ::scalar-page-link{filepath="documentation/guides/docs/components/row.md" title="Row Docs" description="Row component documentation"} ``` -------------------------------- ### Scalar Card - Basic Usage (HTML, Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/card Demonstrates the basic usage of the scalar-card component with only body content. This can be implemented using standard HTML or within a Markdown-like syntax. ```html Card with body. ``` ```markdown :::scalar-card card with body. ::: ``` -------------------------------- ### Render Basic Math Equation using Scalar-Math Source: https://guides.scalar.com/scalar/scalar-docs/components/math Displays a basic mathematical equation using the scalar-math element with LaTeX syntax. Requires no external dependencies beyond the scalar-math component itself. Inputs are 'equation' string. Outputs a rendered mathematical expression. ```html ``` ```html ::scalar-math{ equation="x^2 + y^2 = z^2"} ``` -------------------------------- ### Apply Custom Theme (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This configuration snippet allows you to apply a custom theme to your Scalar documentation site. The `theme` property accepts one of the predefined theme names. ```json { "theme": "purple" } ``` -------------------------------- ### Create Page Link with Path Only (HTML/Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/page-link This snippet demonstrates creating a basic page link using only the required 'filepath' property. It shows the equivalent HTML tag and Markdown syntax for linking to a destination page. ```html ``` ```markdown ::scalar-page-link{filepath="documentation/guides/docs/components/row.md"} ``` -------------------------------- ### Add OpenAPI Reference Configuration (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This JSON configuration adds an API reference to your documentation. It specifies a `name` for the reference section and the `path` to the OpenAPI/Swagger YAML file. ```json { "references": [ { "name": "API Reference", "path": "docs/openapi.yaml" } ] } ``` -------------------------------- ### Configure Custom Domain (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This JSON configuration allows you to set a custom domain for your Scalar documentation. After adding this to your `scalar.config.json`, you need to configure DNS records at your domain provider. ```json { "customDomain": "docs.example.com" } ``` -------------------------------- ### Create Basic Button (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This snippet demonstrates how to create a basic Scalar button using HTML. It requires a 'title' for the button text and an 'href' for the destination URL. The link opens in a new tab. ```html ``` -------------------------------- ### Create Basic Button (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This snippet shows how to create a basic Scalar button using Markdown syntax. It requires 'title' and 'href' properties. The button links to the specified URL and opens in a new tab. ```markdown ::scalar-button{title="View Documentation" href="https://docs.scalar.com"} ``` -------------------------------- ### Scalar Tabs Markdown Structure Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs This snippet illustrates how to define tabs using a Markdown-like syntax supported by Scalar. It shows the structure for creating tab panes with titles and content. ```markdown ::::scalar-tabs :::scalar-tab{ title="Overview" } This is the overview tab with plain text content. You can include **markdown** formatting and other elements. ::: :::scalar-tab{ title="Code Example" } ```bash npm install @scalar/guide-elements ``` This tab contains a code example with additional text. ::: :::scalar-tab{ title="Configuration" } ```json { "theme": "dark", "interactive": true, "features": ["tabs", "steps", "callouts"] } ``` ::: :::: ``` -------------------------------- ### Embed Generic Iframe Content using Scalar Embed Source: https://guides.scalar.com/scalar/scalar-docs/components/embeds Illustrates embedding generic iframe-compatible content with the Scalar Embed component. This is useful for content not specifically supported by optimized platform detection. It requires a source URL and allows for an optional caption and alternative text for accessibility. ```html ``` ```markdown ::scalar-embed{ src="https://en.wikipedia.org/wiki/Open_source" caption="Custom interactive content" alt="Interactive demonstration of the API"} ``` -------------------------------- ### Create Button with Local Icon (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This Markdown snippet demonstrates creating a Scalar button with a local icon. It uses 'title', 'href', and the 'icon' property to specify a path to a Scalar icon. The button links to the provided URL and opens in a new tab. ```markdown ::scalar-button{ title="Download SDK" href="https://github.com/scalar/scalar" icon="phosphor/regular/house"} ``` -------------------------------- ### Display Configuration (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs This snippet shows a JSON object representing configuration options for Scalar's interactive features. It is commonly used within a tab to configure component behavior. ```json { "theme": "dark", "interactive": true, "features": ["tabs", "steps", "callouts"] } ``` -------------------------------- ### Scalar Tabs HTML Structure Source: https://guides.scalar.com/scalar/scalar-docs/components/tabs This snippet demonstrates how to create tabs using custom HTML elements provided by Scalar. It includes defining individual tabs with titles and content. ```html

This is the overview tab with plain text content. You can include **markdown** formatting and other elements.

```bash npm install @scalar/guide-elements``` This tab contains a code example with additional text.

```json { "theme": "dark", "interactive": true, "features": ["tabs", "steps", "callouts"] } ```

``` -------------------------------- ### Create Page Link with Path and Title (HTML/Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/page-link This snippet illustrates how to specify a custom title for the page link, in addition to the destination filepath. Both HTML tag and Markdown syntax are shown for this functionality. ```html ``` ```markdown ::scalar-page-link{filepath="documentation/guides/docs/components/row.md" title="Row Docs" description=""} ``` -------------------------------- ### Enable Auto-Publish on Merge (JSON) Source: https://guides.scalar.com/scalar/scalar-docs/github-sync This configuration snippet enables the 'Publish on Merge' feature in Scalar Docs. When set to `true`, documentation will be automatically published whenever changes are merged into the default branch (e.g., `main`). ```json // scalar.config.json { "publishOnMerge": true } ``` -------------------------------- ### Create Clickable Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Illustrates how to make an image clickable using the scalar-image component. The href property defines the URL the image links to, opening in a new tab. This is useful for linking to external resources or larger versions of the image. ```html ``` ```markdown ::scalar-image{ src="https://avatars.githubusercontent.com/u/301879?s=200&v=4" alt="Click to view full size" href="https://github.com/scalar/scalar" caption="Click to access the link" } ``` -------------------------------- ### Scalar Details: Basic Collapsible Section (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Shows how to create a basic collapsible content section using Markdown syntax with the scalar-detail directive. This provides a clean way to embed interactive content within Markdown documents. ```markdown :::scalar-detail{title="More Info"} Here is some additional content. ::: ``` -------------------------------- ### Basic JavaScript Code Block Source: https://guides.scalar.com/scalar/scalar-docs/components/code-blocks Displays a basic JavaScript code snippet with syntax highlighting. It takes a 'lang' property to specify the language, defaulting to 'plaintext' if not provided. The output is an HTML element ready for rendering. ```javascript function greet(name) { return `Hello, ${name}!`; } console.log(greet('World')); ``` ```html function greet(name) { return `Hello, ${name}!`; } console.log(greet('World')); ``` -------------------------------- ### Render Matrix Equation using Scalar-Math Source: https://guides.scalar.com/scalar/scalar-docs/components/math Renders mathematical equations in matrix form using the scalar-math element and LaTeX syntax. Ideal for representing systems of linear equations or other matrix operations. Inputs include 'equation' and 'caption' strings. Outputs a rendered matrix equation with its caption. ```html ``` ```html ::scalar-math{ equation="\begin{pmatrix} a & b \\ c & d end{pmatrix} \begin{pmatrix} x \\ y end{pmatrix} = \begin{pmatrix} e \\ f end{pmatrix}" caption="System of linear equations in matrix form" } ``` -------------------------------- ### Render Math Equation with Caption using Scalar-Math Source: https://guides.scalar.com/scalar/scalar-docs/components/math Renders a mathematical equation along with a descriptive caption using the scalar-math element. This enhances accessibility and understanding of the displayed formula. Inputs include 'equation' and 'caption' strings. Outputs a rendered equation with its caption. ```html ``` ```html ::scalar-math{ equation="E = mc^2" caption="Einstein's mass-energy equivalence" } ``` -------------------------------- ### Scalar Details: Open by Default (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Demonstrates setting a scalar-detail section to be open by default using the 'open' attribute within the Markdown directive. This ensures the content is visible upon initial rendering. ```markdown :::scalar-detail{title="Default Open" open='true'} The section is open by default. ::: ``` -------------------------------- ### Render Complex Mathematical Expression using Scalar-Math Source: https://guides.scalar.com/scalar/scalar-docs/components/math Displays complex mathematical expressions, such as integrals, using the scalar-math element with LaTeX syntax. Supports detailed formulas and an optional caption for context. Inputs are 'equation' and 'caption' strings. Outputs a rendered complex mathematical expression. ```html ``` ```html ::scalar-math{ equation="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" caption="Gaussian integral" } ``` -------------------------------- ### Display Full Width Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Demonstrates how to make an image span the full width of its container using the size="full" property with the scalar-image component. This is ideal for hero images or background elements that require maximum visual impact. ```html ``` ```markdown ::scalar-image{ src="https://pbs.twimg.com/profile_banners/1599772885857538051/1740351609/1500x500" alt="Hero section background" size="full" caption="Full-width hero image" } ``` -------------------------------- ### Embed YouTube Video using Scalar Embed Source: https://guides.scalar.com/scalar/scalar-docs/components/embeds Demonstrates how to embed a YouTube video using the Scalar Embed component. It takes a YouTube watch URL and an optional caption. The component automatically converts the URL to an embed format and applies necessary security attributes. ```html ``` ```markdown ::scalar-embed{ src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" caption="Never Gonna Give You Up - Rick Astley"} ``` -------------------------------- ### Scalar Details: Basic Collapsible Section (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Demonstrates a basic collapsible content section using the scalar-detail HTML tag. It includes a title and content that can be expanded or collapsed by the user. ```html Here is some additional content. ``` -------------------------------- ### Callout with Custom Icon (HTML & Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/callouts Shows how to implement a callout with a success status and a custom icon. The 'icon' property accepts a string representing the Scalar icon format. This functionality is available in both HTML and Scalar's Markdown. ```html Operation completed successfully! ``` ```markdown :::scalar-callout{ type="success" icon="check-circle" } Operation completed successfully! ::: ``` -------------------------------- ### Python Code Block Source: https://guides.scalar.com/scalar/scalar-docs/components/code-blocks Displays a Python code snippet with syntax highlighting. The 'lang' attribute specifies 'python', and the component renders it within an HTML structure. This allows for language-specific formatting and readability. ```python def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(fibonacci(10)) ``` ```html def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(fibonacci(10)) ``` -------------------------------- ### Implement Dark Mode Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Shows how to provide a separate image source for dark mode using the src-dark property with the scalar-image component. The component automatically switches to this image when the user's theme is set to dark, enhancing the visual experience across different themes. ```html ``` ```markdown ::scalar-image{ src="https://avatars.githubusercontent.com/u/301879?s=200&v=4" src-dark="https://avatars.githubusercontent.com/u/6176314?s=200&v=4" alt="Theme-aware illustration" caption="Automatically adapts to user's theme preference" } ``` -------------------------------- ### Create Button with Local Icon (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This HTML snippet illustrates creating a Scalar button with an embedded local icon. It includes the 'title', 'href', and an optional 'icon' property, which can reference a Scalar icon path. The link opens in a new tab. ```html ``` -------------------------------- ### Scalar Details: Nested Sections (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Illustrates the nesting of scalar-detail components within each other using HTML. This allows for hierarchical organization of collapsible content. ```html Outer details content. Inner details content. ``` -------------------------------- ### Create Button with External Icon (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This Markdown snippet demonstrates creating a Scalar button with an external icon. It utilizes 'title', 'href', and the 'icon' property to specify an external icon URL. The button links to the given URL and opens in a new tab. ```markdown ::scalar-button{ title="Visit Website" href="https://scalar.com" icon="https://scalar.com/logo-dark.svg"} ``` -------------------------------- ### Scalar Details: Nested Sections (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Demonstrates nesting scalar-detail directives within each other in Markdown. This enables complex, multi-level collapsible content structures. ```markdown ::::scalar-detail{title="Nested, Outer" } With directives, the parent must have at least 1 more `:` than the elements it wraps. :::scalar-detail{title="Non-Interactive" } Inner details content. ::: :::: ``` -------------------------------- ### Add Caption to Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Shows how to add a descriptive caption below an image using the scalar-image component. The caption property provides context for the image, enhancing understanding for the reader. It requires the src and alt properties as well. ```html ``` ```markdown ::scalar-image{ src="https://avatars.githubusercontent.com/u/6176314?v=4" alt="System architecture diagram" caption="High-level system architecture showing data flow" } ``` -------------------------------- ### Embed Vimeo Video using Scalar Embed Source: https://guides.scalar.com/scalar/scalar-docs/components/embeds Shows how to embed a Vimeo video using the Scalar Embed component. It requires a Vimeo video URL and supports an optional caption. The component optimizes the URL for Vimeo's player format and includes security measures. ```html ``` ```markdown ::scalar-embed{ src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" caption="Beautiful nature documentary"} ``` -------------------------------- ### Scalar Details: Non-interactive Block (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Demonstrates creating a static, non-collapsible content block using the 'interactivity="none"' attribute with the scalar-detail HTML tag. This renders the content as a simple div. ```html These do not collapse when clicked. ``` -------------------------------- ### Render Row with Cards (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/row This snippet shows how to create a horizontal layout of cards using the scalar-row and scalar-card components within a Markdown environment. Each scalar-card includes an icon, a title, and descriptive text. ```markdown ::::scalar-row :::scalar-card{icon="solid/basic-shape-hexagon" title="The Title of the Card"} Card with title, body, and icon. ::: :::scalar-card{icon="solid/basic-shape-hexagon" title="The Title of the Card"} Card with title, body, and icon. ::: :::scalar-card{icon="solid/basic-shape-hexagon" title="The Title of the Card"} Card with title, body, and icon. ::: :::: ``` -------------------------------- ### Create Button with External Icon (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/buttons This HTML snippet shows how to create a Scalar button with an external icon. It requires 'title', 'href', and the 'icon' property can be a URL to an external image. The link opens in a new tab. ```html ``` -------------------------------- ### Set Custom Size for Image with Scalar-Image Component Source: https://guides.scalar.com/scalar/scalar-docs/components/images Demonstrates how to set custom dimensions for an image using the width and height properties with the scalar-image component. This overrides the default sizing and allows for precise control over the image's appearance. The size property must be set to 'custom' for these to take effect. ```html ``` ```markdown ::scalar-image{ src="https://avatars.githubusercontent.com/u/301879?s=200&v=4" alt="Company logo" width="200" height="100" caption="Company branding" } ``` -------------------------------- ### Render Row with Cards (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/row This snippet demonstrates how to use the scalar-row component to display multiple scalar-card components horizontally. The scalar-row component itself has no properties, but it contains child scalar-card components, each with an icon, title, and body content. ```html

Card with title, body, and icon.

``` -------------------------------- ### Scalar Details: Non-interactive Block (Markdown) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Shows how to create a static, non-collapsible content block in Markdown by setting 'interactivity="none"' on the scalar-detail directive. This prevents the section from being expanded or collapsed. ```markdown :::scalar-detail{title="Non-Interactive" interactivity="none" } These do not collapse when clicked. ::: ``` -------------------------------- ### Scalar Details: Custom Icon (HTML) Source: https://guides.scalar.com/scalar/scalar-docs/components/details Shows how to associate a custom icon with a collapsible section using the 'icon' attribute in the scalar-detail HTML tag. The icon visually enhances the section's title. ```html Using a custom icon. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.