Skip to content
Chai aur Docs

Main Content

ChaiDocs supports the full range of Markdown syntax in .md files as well as frontmatter YAML to define metadata such as a title and description.

Please be sure to check the MDX guide as Markdown support and usage can differ.

Heading

You can structure content using a heading. Headings in Markdown are indicated by a number of # at the start of the line.

How to structure page content

ChaiDocs platform is configured to automatically use your page title as a top-level heading and will include an “Overview” heading at top of each page’s table of contents.

We recommend starting each page with regular paragraph text content and using on-page headings from <h2> and down. For example:

---
title: Content Guide
description: How to use structure content in ChaiDocs
---


This page describes how to use Markdown in ChaiDocs.

Using headings in Markdown will automatically give you anchor links so you can link directly to certain sections of your page:

---
title: My page of content
description: How to use ChaiDocs's built-in anchor links
---


## Introduction


I can link to [my conclusion](#conclusion) lower on the same page.


## Conclusion


`https://my-site.com/page1/#introduction` navigates directly to my Introduction.

Spacing

To maintain visual consistency in your documentation, it’s important to handle spacing properly, especially after specialized elements.

After <Code> or <FileTree> elements, you may want to add extra spacing before continuing with regular text. For regular line breaks in MDX, you can simply use empty lines in the markdown. However, when you need additional spacing beyond what a regular line break provides, use the <br><br/> tag. For example:

---
title: My page of content
description: How to use ChaiDocs's built-in anchor links
---


<Code code={`import { useState } from 'react';`} lang="tsx"/>


<br><br/>
The file tree looks like this -


<FileTree>
  - src/
    - components/
      - footer.tsx
      - index.ts
</FileTree>
<br><br/>

Branding

Every page should include the “Start Your Journey with ChaiCode” branding element at the end. This consistent branding helps maintain the identity of the documentation.

Add the StartJourney component at the end of your MDX file:

---
title: Your page title
description: Your page description
---
...
...


import StartJourney from '@/components/branding/start-journey.astro';


<StartJourney />

Note: The branding element must be included on all documentation pages to maintain consistency across the documentation site.

Inline Styles

  • Text can be bold, italic, or strikethrough.

    Text can be **bold**, _italic_, or ~~strikethrough~~.

  • You can link to another page.

    You can [link to another page](/getting-started/).

  • You can highlight inline code with backticks.

    You can highlight `inline code` with backticks.

Asides

Asides (also known as “admonitions” or “callouts”) are useful for displaying secondary information alongside a page’s main content.

Starlight provides a custom Markdown syntax for rendering asides. Aside blocks are indicated using a pair of triple colons ::: to wrap your content, and can be of type note, tip, caution or danger.

You can nest any other Markdown content types inside an aside, but asides are best suited to short and concise chunks of content.

Note aside

import {CodePackageManagers} from '@/components/code'


:::note
Shadcn now supports tailwind v4. You can get started with this command:


<CodePackageManagers
  packages="shadcn@latest"
  commandType="execute"
  args="init"
/>
:::

Custom aside titles

You can specify a custom title for the aside in square brackets following the aside type, e.g. :::tip[Did you know?].

:::tip[Did you know?]
Astro helps you build faster websites with [“Islands Architecture”](https://docs.astro.build/en/concepts/islands/).
:::

More aside types

Caution and danger asides are helpful for drawing a user’s attention to details that may trip them up. If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned.

:::caution
If you are not sure you want to become best developer, think twice before using [ChaiDocs](/).
:::


:::danger
Side effects of Chai


- Becoming the office documentation hero
- Having your colleagues actually understand your code.


Use [ChaiDocs](/) at your own risk!
:::

Blockquotes

This is a blockquote, which is commonly used when quoting another person or document.

Blockquotes are indicated by a > at the start of each line.

> This is a blockquote, which is commonly used when quoting another person or document.
>
> Blockquotes are indicated by a `>` at the start of each line.

Code Blocks

A code block is indicated by a block with three backticks ``` at the start and end. You can indicate the programming language being used after the opening backticks.

// Javascript code with syntax highlighting.
const chai = () => {
  console.log("Welcome to ChaiDocs!");
}


chai();
```js
// Javascript code with syntax highlighting.
const chai = () => {
  console.log("Welcome to ChaiDocs!");
}


chai();
```

Expressive Code features

ChaiDocs uses Expressive Code to extend formatting possibilities for code blocks. Expressive Code’s text markers and window frames plugins are enabled by default..

Text markers

You can highlight specific lines or parts of your code blocks using Expressive Code text markers on the opening line of your code block. Use curly braces ({ }) to highlight entire lines, and quotation marks to highlight strings of text.

There are three highlighting styles: neutral for calling attention to code, green for indicating inserted code, and red for indicating deleted code. Both text and entire lines can be marked using the default marker, or in combination with ins= and del= to produce the desired highlighting.

Expressive Code provides several options for customizing the visual appearance of your code samples. Many of these can be combined, for highly illustrative code samples. Please explore the Expressive Code documentation for the extensive options available. Some of the most common examples are shown below:

  • Mark entire lines & line ranges using the { } marker:

    const demo = () => {
      // This line (#2) and the next one are highlighted
      return 'This is line #3 of this snippet';
    }
    ```js {2-3}
    const demo = () => {
      // This line (#2) and the next one are highlighted
      return 'This is line #3 of this snippet';
    }
    ```

  • Mark selections of text using the " " marker or regular expressions:

    // Individual terms can be highlighted, too
    const demo = () =>{
      return 'Even regular expressions are supported';
    }
    ```js "Individual terms" /Even.*supported/
    // Individual terms can be highlighted, too
    const demo = () => {
      return 'Even regular expressions are supported';
    }
    ```

  • Mark text or lines as inserted or deleted with ins or del:

    const demo = () => {
      console.log('These are inserted and deleted marker types');
      // The return statement uses the default marker type
      return true;
    }
    ```js "return true;" ins="inserted" del="deleted"
    const demo = () => {
      console.log('These are inserted and deleted marker types');
      // The return statement uses the default marker type
      return true;
    }
    ```

  • Combine syntax highlighting with diff-like syntax:

    const thisIsJavaScript = () => {
      // This entire block gets highlighted as JavaScript,
      // and we can still add diff markers to it!
      console.log('Old code to be removed')
      console.log('New and shiny code!')
    }
    ```diff lang="js"
      const thisIsJavaScript = () => {
        // This entire block gets highlighted as JavaScript,
        // and we can still add diff markers to it!
    -   console.log('Old code to be removed')
    +   console.log('New and shiny code!')
      }
    ```

Frames and titles

Code blocks can be rendered inside a window-like frame. A frame that looks like a terminal window will be used for shell scripting languages (e.g. bash or sh). Other languages display inside a code editor-style frame if they include a title.

A code block’s optional title can be set either with a title="..." attribute following the code block’s opening backticks and language identifier, or with a file name comment in the first lines of the code.

Details

Details (also known as “disclosures” or “accordions”) are useful to hide content that is not immediately relevant. Users can click a short summary to expand and view the full content.

Use the standard HTML <details> and <summary> elements in your Markdown content to create a disclosure widget.

You can nest any other Markdown syntax inside a <details> element.

What will I learn with ChaiCode?

At ChaiCode, you’ll gain practical skills across key tech areas:

  • Web Development: Gain expertise in both front-end and back-end development, working with databases and deploying your projects.
  • Generative AI: Dive into the world of AI and learn how to build and work with generative models.
  • DevOps for Developers: Explore the practices that combine software development and IT operations.
  • Data Science: Learn how to work with large datasets, build predictive models, and apply machine learning techniques to solve real-world problems.
  • DSA: Understand the building blocks of efficient programming.

These courses provide the skills you need to launch your tech career, build real-world projects, and contribute to innovations in your chosen field.

<details>
  <summary>What will I learn with ChaiCode?</summary>


  At ChaiCode, you'll gain practical skills across key tech areas:


  - **Web Development**: Gain expertise in both front-end and back-end development, working with databases and deploying your projects.
  - **Generative AI**: Dive into the world of AI and learn how to build and work with generative models.
  - **DevOps for Developers**: Explore the practices that combine software development and IT operations.
  - **Data Science**: Learn how to work with large datasets, build predictive models, and apply machine learning techniques to solve real-world problems.
  - **DSA**: Understand the building blocks of efficient programming.


  These courses provide the skills you need to launch your tech career, build real-world projects, and contribute to innovations in your chosen field.
</details>

Other Markdown Features

ChaiDocs supports all other Markdown authoring syntax, such as lists and tables. See the Markdown Cheat Sheet for a quick overview of all the Markdown syntax elements.

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.