How to include code in docs

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

Don’t style links as code. It can obscure the fact that the text is a link.

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.

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:

    ```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 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: snippets/hello-world.mdx:

```csharp
Console.WriteLine("Hello World!");
```

Referencing it:

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

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.

Tabbed content

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:

REST
SOAP

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"
}

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

Markup:

<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 page, which documents the Messages tab, Details tab, and Properties panel in the SuperOffice Request screen. Rendered:

Messages tab
Details tab
Properties panel

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.

Markup:

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

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

<!-- 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.

​Inline code

​When to use it

​Placeholders

​Fenced code blocks

​Screenshots

​Include native source code

​When to use code includes

​Tabbed content

​When to use tabs

​Syntax

​Examples

​Code samples

​Mirroring the UI

​Tab synchronization

​Translated content

Inline code

When to use it

Placeholders

Fenced code blocks

Screenshots

Include native source code

When to use code includes

Tabbed content

When to use tabs

Syntax

Examples

Code samples

Mirroring the UI

Tab synchronization

Translated content