> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superoffice.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to include code in docs

> How to include inline code, fenced code blocks, tabbed content, and native source-code includes in a docs page.

There are multiple ways to include code in a page published on `docs.superoffice.com`:

* Individual words within a line
* Code blocks in the current Markdown file
* Native source code in an included file

## Inline code

Wrap the code text in single backticks (\`).

For example, \`getDate()\`

<Note>
  Don't style links as code. It can obscure the fact that the text is a link.
</Note>

### When to use it

Use `inline code` when referring to:

* Named parameters and variables in a nearby code block in your text
* Properties
* Methods and classes
* Language keywords
* Database table and column names
* SQL commands
* NuGet package names

It's not always obvious what qualifies as code. If in doubt, see [text formatting guidelines][1].

### Placeholders

To indicate that the user must replace something in the code with their own values, use placeholder text marked off by angle brackets.

## Fenced code blocks

* Use code fencing with triple backticks (\`\`\`) before and after.
* Place the programming language after the opening backticks for syntax highlighting.
* Don't use indentation only to indicate a code block.

**Markdown:**

````markdown theme={null}
    ```crmscript
      for(Integer i = 1; i < 10; i++) {
        printLine(i.toString());
      }
````

````

**Rendered:**

```crmscript
for(Integer i = 1; i < 10; i++) {
  printLine(i.toString());
}
````

### Screenshots

Avoid IDE screenshots with code, unless you want to illustrate something specific about the IDE.

Fenced code blocks can be copied and pasted and they're indexed by search engines. They can also be syntax-highlighted, which makes them easier to read and understand. It's also easier to maintain the code in a fenced code block than in a screenshot.

## Include native source code

Mintlify doesn't support DocFX's line/range-sliced code snippets (`[!code-csharp[CS](file.cs?range=1,3)]`): there's no equivalent that pulls just part of a source file into a code block. See [Mintlify's code component docs][3] for what's actually supported.

A raw source file (like a `.cs` file) can't be imported directly as a component. Only Markdown/MDX can. For a whole reusable code sample, wrap it in a fenced code block inside a `.md`/`.mdx` file in the *snippets* folder, then import it the same way as [Markdown snippets][4]:

**`snippets/hello-world.mdx`:**

````mdx theme={null}
```csharp
Console.WriteLine("Hello World!");
```
````

**Referencing it:**

```mdx theme={null}
import HelloWorld from "./snippets/hello-world.mdx";

<HelloWorld />
```

If you only need to show a snippet once (not reuse it), just paste the code directly into a fenced code block instead: see [fenced code blocks](#fenced-code-blocks) above.

### When to use code includes

* Code you want to reuse in multiple Markdown files.
* Code you might want to validate or update from one place, without altering every content file that shows it.

<Note>
  Whole-file includes only. If you need to highlight just part of a larger sample, paste that portion directly into a fenced code block instead.
</Note>

<h2 id="tabs">
  Tabbed content
</h2>

Use the `<Tabs>` and `<Tab>` components to organize content into switchable panels.

### When to use tabs

* Code samples in multiple languages or runtimes
* Version-specific steps or configuration
* With or without a feature (pilot or feature-toggle content)
* Content that mirrors tabs in the SuperOffice UI

### Syntax

* Wrap the whole group in `<Tabs>`.
* Each tab is a `<Tab title="...">` with any content inside: text, code blocks, images, or lists.

### Examples

#### Code samples

Tabs are most commonly used to show the same task in multiple languages or protocols.

**Rendered:**

<Tabs>
  <Tab title="REST">
    ```http theme={null}
    POST https://{environment}.superoffice.com/Login/api/PartnerSystemUser/Authenticate
    Content-Type: application/json
    Accept: application/json

    {
        "SignedSystemToken": "{{signed_Token}}",
        "ApplicationToken": "{{client_secret}}",
        "ContextIdentifier": "{{context_Identifier}}",
        "ReturnTokenType": "JWT"
    }
    ```
  </Tab>

  <Tab title="SOAP">
    ```xml theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <SOAP-ENV:Envelope xmlns:ns0="http://schemas.xmlsoap.org/soap/envelope/"
                       xmlns:ns1="http://www.superoffice.com/superid/partnersystemuser/0.1"
                       xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
      <SOAP-ENV:Header>
        <ns1:ApplicationToken>${appToken}</ns1:ApplicationToken>
        <ns1:ContextIdentifier>${contextId}</ns1:ContextIdentifier>
      </SOAP-ENV:Header>
      <ns0:Body>
        <ns1:AuthenticationRequest>
          <ns1:SignedSystemToken>${signedToken}</ns1:SignedSystemToken>
          <ns1:ReturnTokenType>Jwt</ns1:ReturnTokenType>
        </ns1:AuthenticationRequest>
      </ns0:Body>
    </SOAP-ENV:Envelope>
    ```
  </Tab>
</Tabs>

**Markup:**

````mdx theme={null}
<Tabs>
<Tab title="REST">

```http
POST https://{environment}.superoffice.com/Login/api/PartnerSystemUser/Authenticate
Content-Type: application/json
Accept: application/json

{
    "SignedSystemToken": "{{signed_Token}}",
    "ApplicationToken": "{{client_secret}}",
    "ContextIdentifier": "{{context_Identifier}}",
    "ReturnTokenType": "JWT"
}
```

</Tab>

<Tab title="SOAP">

```xml
<?xml version="1.0" encoding="UTF-8"?>
<SOAP-ENV:Envelope xmlns:ns0="http://schemas.xmlsoap.org/soap/envelope/"
                   xmlns:ns1="http://www.superoffice.com/superid/partnersystemuser/0.1"
                   xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
  <SOAP-ENV:Header>
    <ns1:ApplicationToken>${appToken}</ns1:ApplicationToken>
    <ns1:ContextIdentifier>${contextId}</ns1:ContextIdentifier>
  </SOAP-ENV:Header>
  <ns0:Body>
    <ns1:AuthenticationRequest>
      <ns1:SignedSystemToken>${signedToken}</ns1:SignedSystemToken>
      <ns1:ReturnTokenType>Jwt</ns1:ReturnTokenType>
    </ns1:AuthenticationRequest>
  </ns0:Body>
</SOAP-ENV:Envelope>
```

</Tab>
</Tabs>
````

#### Mirroring the UI

When documenting a screen with named tabs, use tab titles that match the UI exactly. This example is from the [Create a request][6] page, which documents the **Messages tab**, **Details tab**, and **Properties panel** in the SuperOffice Request screen.

**Rendered:**

<Tabs>
  <Tab title="Messages tab">
    Compose and manage the request message.

    * Add recipients in the **To** field. Recipients are automatically added as request contacts.
    * Click **Cc/Bcc** to add additional recipients as a copy or blind copy.
    * Use **Internal/External** to set whether the contact can see the message in the Customer Centre.
  </Tab>

  <Tab title="Details tab">
    View and edit additional request information.

    * **Relation:** Link this request to another related request.
    * **Access level:** Adjust the visibility of the request.
    * **Sale/Project:** Connect the request to an existing sale or project.
  </Tab>

  <Tab title="Properties panel">
    Categorize and assign the request.

    * **Request type:** Determines default values and status options.
    * **Status:** Set to **Open**, **Closed**, or **Postponed**.
    * **Owner:** Assign to a user or leave unassigned.
    * **Priority:** Assign as **Low**, **Medium**, or **High**.
  </Tab>
</Tabs>

**Markup:**

```mdx theme={null}
<Tabs>
<Tab title="Messages tab">
Compose and manage the request message.

* Add recipients in the **To** field. Recipients are automatically added as request contacts.
* Click **Cc/Bcc** to add additional recipients as a copy or blind copy.
* Use **Internal/External** to set whether the contact can see the message in the Customer Centre.
</Tab>

<Tab title="Details tab">
View and edit additional request information.

* **Relation:** Link this request to another related request.
* **Access level:** Adjust the visibility of the request.
* **Sale/Project:** Connect the request to an existing sale or project.
</Tab>

<Tab title="Properties panel">
Categorize and assign the request.

* **Request type:** Determines default values and status options.
* **Status:** Set to **Open**, **Closed**, or **Postponed**.
* **Owner:** Assign to a user or leave unassigned.
* **Priority:** Assign as **Low**, **Medium**, or **High**.
</Tab>
</Tabs>
```

### Tab synchronization

Tabs with matching titles stay in sync across the page. If a page has multiple tab groups that share titles (for example, **REST** and **SOAP**), selecting a tab in one group automatically selects it in the others. This also syncs with code groups.

To opt out, set `sync={false}` on the `<Tabs>` wrapper:

```mdx theme={null}
<Tabs sync={false}>
  ...
</Tabs>
```

### Translated content

When a tab title is translated, add an explicit `id` attribute to keep anchor links stable. Without it, the ID defaults to the title text. A translated title produces a different ID, which breaks any anchor links pointing to that tab.

```mdx theme={null}
<!-- English source -->
<Tab title="With the feature enabled" id="with-feature">

<!-- Norwegian translation — title is translated, id stays the same -->
<Tab title="Med funksjonen aktivert" id="with-feature">
```

For more options, including `defaultTabIndex` and `borderBottom`, see [Mintlify's Tabs component docs][2].

[1]: ../style-guide/formatting

[2]: https://www.mintlify.com/docs/components/tabs

[3]: https://www.mintlify.com/docs/create/code

[4]: ./index#snippets

[6]: /en/request/learn/create