This documentation uses gatsby with MDX. For MDX there are custom components / plugins added which differ from regular MDX setups. To see how they are used have a look at the source of this page.

Sibling code blocks are automatically merged into a block with tabs to switch between them. To prevent two adjacent code blocks from merging, separate them with the <Break/> component.

Example of two code blocks merged:

import sentry_sdk
sentry_sdk.init("___PROJECT.DSN___");

import * as Sentry from "sentry-browser";
Sentry.init("___PROJECT.DSN___");
// id: ___PROJECT.ID___
// org-slug: ___PROJECT.ORG_SLUG___
// slug: ___PROJECT.SLUG___

A second example with three code blocks that have file names set:

#!/usr/bin/env python
print "Hello World"

#!/usr/bin/env node
console.log("Hello World")

#include <stdio.h>

int main() {
    printf("Hello World\n");
}

Another code block with different languages for comparison:

<h1>Hello World</h1>

print "Goodbye World"

console.log("Goodbye World")

Two JavaScript variants where one has an explicit title override:

Sentry.init();

Sentry.init();

Code without title:

nolang all alone

No language combined with Python:

no lang

print "Python"

Three code blocks, where the second forced a break from the first (<Break/>):

print "I am block 1"

print "I am block 2"

print "I am block 3"

Example usage in a nested structure:

1. Creation of the SDK (sometimes this is hidden from the user):

   Sentry.init({dsn: '___PROJECT.DSN___'});

   sentry_sdk.init('___PROJECT.DSN___')

echo "Some code outside"

If two blocks share the same language and get merged, they get enumerated:

I am block 1

I am block 2