Scalar Docs

https://guides.scalar.com/scalar/scalar-docs
Admin
Scalar Docs provides documentation and guides for the Scalar project.
Tokens:10,854
Snippets:106
Trust Score:10
Update:11 months ago
Show doc for...
Tokens:
Raw
### 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
<scalar-callout type="info"> This is an informational message. </scalar-callout>
```

```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
<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>
  
  <scalar-step id="step-2" title="Install Dependencies">
Install the required packages:

```bash
npm install react react-dom
```
  </scalar-step>
  
  <scalar-step id="step-3" title="Start Development">
Begin development:

```bash
npm start
```
  </scalar-step>
</scalar-steps>
```

```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
<scalar-step id="step-1" title="Install Dependencies">
First, install the required dependencies by running:
  
```bash
npm install @scalar/guide-elements
```
</scalar-step>
```

```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
<scalar-tabs default="TypeScript">
  <scalar-tab title="JavaScript">

  ```javascript const user = { name: "John", age: 30 }; ```
  </scalar-tab>

  <scalar-tab title="TypeScript">

  ```typescript interface User { name: string; age: number; } const user: User
  = { name: "John", age: 30 }; ```
  </scalar-tab>
</scalar-tabs>
```

```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
<scalar-card leftIcon="solid/basic-shape-hexagon" title="The Title of the Card">

Card with a `leftIcon`, title, and body
</scalar-card>
```

```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
<scalar-card icon="solid/basic-shape-hexagon">

Card with icon and body.
</scalar-card>
```

```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
<scalar-icon
  src="check-circle"
  title="Success indicator">
</scalar-icon>
```

```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
<scalar-detail title="Default Open" open>

The section is open by default.
</scalar-detail>
```

--------------------------------

### 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
<scalar-card title="The Title of the Card">

Card with title and body.
</scalar-card>
```

```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
<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-step>
```

```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
<scalar-card title="Without Body"></scalar-card>
```

```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
<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>
```

```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
<scalar-icon
  src="star"
  title="Small icon"
  size="16px">
</scalar-icon>

<scalar-icon
  src="star"
  title="Medium icon"
  size="1.5em">
</scalar-icon>

<scalar-icon
  src="star"
  title="Large icon"
  size="2rem">
</scalar-icon>
```

```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
<scalar-icon
  src="warning"
  title="Warning message"
  class="mr-2 text-yellow-500">
</scalar-icon>
```

```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
<scalar-icon
  src="info"
  title="Information"
  size="24px"
  class="text-blue-600">
</scalar-icon>
```

```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
<scalar-image
  src="https://avatars.githubusercontent.com/u/6176314?v=4"
  alt="Application screenshot">
</scalar-image>

```

```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
<scalar-tabs nested>
  <scalar-tab title="JavaScript">
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
```
  </scalar-tab javascript-end>

  <scalar-tab title="TypeScript">
```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
```
  </scalar-tab typescript-end>

  <scalar-tab title="Python">
```python
def greet(name):
  return f"Hello, {name}!"

print(greet("World"))
```
  </scalar-tab python-end>
</scalar-tabs nested>
```

```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 <iostream>
#include <string>

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
<scalar-page-link filepath="documentation/guides/docs/components/row.md" title="Row Docs" description="Row component documentation">
</scalar-page-link>
```

```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
<scalar-card>

Card with body.
<scalar-card>
```

```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
<scalar-math equation="x^2 + y^2 = z^2">
</scalar-math>
```

```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
<scalar-page-link filepath="documentation/guides/docs/components/row.md">
</scalar-page-link>
```

```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
<scalar-button
  title="View Documentation"
  href="https://docs.scalar.com">
</scalar-button>

```

--------------------------------

### 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
<scalar-embed
  src="https://en.wikipedia.org/wiki/Open_source"
  caption="Custom interactive content"
  alt="Interactive demonstration of the API">
</scalar-embed>

```

```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
<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>

  <scalar-tab title="Code Example">

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

  <scalar-tab title="Configuration">

  ```json { "theme": "dark", "interactive": true, "features": ["tabs",
  "steps", "callouts"] }
  ```
  </scalar-tab>
</scalar-tabs>
```

--------------------------------

### 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
<scalar-page-link filepath="documentation/guides/docs/components/row.md" title="Row Docs" description="">
</scalar-page-link>
```

```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
<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-image>

```

```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
<scalar-code lang="javascript">
  function greet(name) { return `Hello, ${name}!`; }
  console.log(greet('World'));
</scalar-code>

```

--------------------------------

### 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
<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">
</scalar-math>
```

```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
<scalar-math
  equation="E = mc^2"
  caption="Einstein's mass-energy equivalence">
</scalar-math>
```

```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
<scalar-math
  equation="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
  caption="Gaussian integral">
</scalar-math>
```

```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
<scalar-image
  src="https://pbs.twimg.com/profile_banners/1599772885857538051/1740351609/1500x500"
  alt="Hero section background"
  size="full"
  caption="Full-width hero image">
</scalar-image>

```

```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
<scalar-embed
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  caption="Never Gonna Give You Up - Rick Astley">
</scalar-embed>

```

```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
<scalar-detail title="More Info">

Here is some additional content.
</scalar-detail>
```

--------------------------------

### 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
<scalar-callout
  type="success"
  icon="check-circle">
  Operation completed successfully!
</scalar-callout>
```

```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
<scalar-code lang="python">
  def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2)
  print(fibonacci(10))
</scalar-code>

```

--------------------------------

### 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
<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">
</scalar-image>

```

```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-button
  title="Download SDK"
  href="https://github.com/scalar/scalar"
  icon="phosphor/regular/house">
</scalar-button>

```

--------------------------------

### 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
<scalar-detail title="Nested, Outer" >

Outer details content.
<scalar-detail title="Nested, Inner" >

Inner details content.
</scalar-detail>
</scalar-detail>
```

--------------------------------

### 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
<scalar-image
  src="https://avatars.githubusercontent.com/u/6176314?v=4"
  alt="System architecture diagram"
  caption="High-level system architecture showing data flow">
</scalar-image>

```

```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
<scalar-embed
  src="https://vimeo.com/844557780"
  caption="Beautiful nature documentary">
</scalar-embed>

```

```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
<scalar-detail title="Non-Interactive">

These do not collapse when clicked.
</scalar-detail>
```

--------------------------------

### 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
<scalar-button
  title="Visit Website"
  href="https://scalar.com"
  icon="https://scalar.com/logo-dark.svg">
</scalar-button>

```

--------------------------------

### 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
<scalar-image
  src="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  alt="Company logo"
  width="200"
  height="100"
  caption="Company branding">
</scalar-image>

```

```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
<scalar-row>
<scalar-card icon="solid/basic-shape-hexagon" title="The Title of the Card">

Card with title, body, and icon.
</scalar-card>
<scalar-card icon="solid/basic-shape-hexagon" title="The Title of the Card">

Card with title, body, and icon.
</scalar-card>
<scalar-card icon="solid/basic-shape-hexagon" title="The Title of the Card">

Card with title, body, and icon.
</scalar-card>
</scalar-row>
```

--------------------------------

### 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
<scalar-detail title="Custom Icon" icon="airplane">

Using a custom icon.
</scalar-detail>
```
Tokens:
Raw