Code

Code blocks

You can use standard Markdown syntax for code blocks. It is also possible to render code blocks in two different themes and add titles to them.

To add titles for the code blocks, pass title in the syntax.
The primary theme is the default. To render the code block in the secondary theme, pass secondaryTheme in the syntax.

Primary theme (default)

```md title="Code block in primary theme"
Sample code goes here.
```

Code block in primary thememd

Sample code goes here.

Secondary theme

```md title="Code block in secondary theme" secondaryTheme
Sample code goes here.
```

Code block in secondary thememd

Sample code goes here.

With highlighted lines

It is also possible to highlight specific lines in a code. To highlight, pass highlightLines in the syntax and enter the range or specific line to be highlighted.

```json highlightLines="10"
{
  "glossary": {
    "title": "example glossary",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
          "ID": 123.45,
          "Sort": true,
          "GlossTerm": "Standard Generalized Markup Language",
          "Acronym": "SGML",
          "Abbrev": "ISO 8879:1986",
          "GlossDef": {
            "para": "A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso": ["GML", "XML"]
          },
          "GlossSee": null
        }
      }
    }
  }
}
```

{
  "glossary": {
    "title": "example glossary",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
          "ID": 123.45,
          "Sort": true,
          "GlossTerm": "Standard Generalized Markup Language",
          "Acronym": "SGML",
          "Abbrev": "ISO 8879:1986",
          "GlossDef": {
            "para": "A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso": ["GML", "XML"]
          },
          "GlossSee": null
        }
      }
    }
  }
}

Terminal / Console with prompt

using language console instead of sh prefixes a $ as command prompt to each line:

curl -H "Content-Type: application/json" \
  "https://api.europe-west1.gcp.commercetools.com"

To omit he prompt on certain lines, add the option noPromptLines="3-4".

cd project
cp -R \
  dist \
  public/
rm -rf dist
yarn start

No options, but you can check that the indentation in regards to the left prompt is aligned when the line wraps.

# fetch a token:
curl https://auth.sphere.io/oauth/token --basic --user "{client_id}:{client_secret}" -X POST -d "grant_type=client_credentials&scope=manage_project:{project_key}"
# now access the API:
curl -sH "Authorization: Bearer ACCESS_TOKEN" https://api.sphere.io/PROJECT_KEY/products

Passing the option title="Fetching an access token"

Fetching an access tokenTerminal

# fetch a token:
curl https://auth.sphere.io/oauth/token --basic --user "{client_id}:{client_secret}" -X POST -d "grant_type=client_credentials&scope=manage_project:{project_key}"
# now access the API:
curl -sH "Authorization: Bearer ACCESS_TOKEN" https://api.sphere.io/PROJECT_KEY/products

Code examples

No language

```
The syntax is not highlighted as no language is indicated.
**Formatting syntax** like _this_ or <b>tag</b> will remain unparsed.
```

The syntax is not highlighted as no language is indicated.
**Formatting syntax** like _this_ or <b>tag</b> will remain unparsed.

Single language

cURL

<CodeExample path="example.curl" title="Curl code sample" />

Curl code samplecURL

curl --request POST \
  --url https://api.sendgrid.com/v3/mail/send \
  --header 'Authorization: Bearer YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"personalizations": [{"to": [{"email": "recipient@example.com"}]}],"from": {"email": "sendeexampexample@example.com"},"subject": "Hello, World!","content": [{"type": "text/plain", "value": "Heya!"}]}'

CSharp

<CodeExample path="example.cs" title="CSharp code sample" />

CSharp code sampleC#

using System; 

namespace HelloWorld { 
  class Starter { 
    static void Main(string[] args) { 
      Console.WriteLine("Hello World!"); 
    } 
  } 
}

GraphQL

<CodeExample path="example.graphql" title="GraphQL code sample" />

GraphQL code samplegraphql

type Person {
  id: ID!
  name: String!
  age: Int
}

Java

<CodeExample path="example.java" title="Java code sample" />

Java code sampleJava

public class MyClass {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}

JavaScript

<CodeExample path="example.js" title="JavaScript code sample" />

JavaScript code sampleJavaScript

// Arrow function sample
const arrowFuncSample = () => {
  console.log('this is an arrow function example');
};

JSON

<CodeExample path="example.json" title="JSON code sample" />

JSON code samplejson

{
  "petType": "Tarantula",
  "name": "Squishy"
}

PHP

<CodeExample path="example.php" title="PHP code sample" />

PHP code samplePHP

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World Example</title>
  </head>
  <body>
    <?php
      echo "Hello world!";
    ?>
  </body>
</html>

Python

```python title="Python code sample"
s = "Python syntax highlighting"
print s
```

Python code samplePython

s = "Python syntax highlighting"
print s

Scala

<CodeExample path="example.scala" title="Scala code sample" />

Scala code sampleScala

object HelloWorld {
  def main(args: Array[String]) {
    println("Hello, world!")
  }
}

Shell

<CodeExample path="example.sh" title="Shell code sample" />

Shell code sampleTerminal

#!/bin/sh

echo Hello World

Swift

```swift title="Swift code sample"
struct Player {
    var name: String
    var highScore: Int = 0
    var history: [Int] = []

    init(_ name: String) {
        self.name = name
    }
}

var player = Player("Tomas")
```

Swift code sampleSwift

struct Player {
    var name: String
    var highScore: Int = 0
    var history: [Int] = []

    init(_ name: String) {
        self.name = name
    }
}

var player = Player("Tomas")

TypeScript

<CodeExample path="example.ts" title="TypeScript code sample" />

TypeScript code sampleTypeScript

function sayHelloToCommercetools(name: string) {
  console.log(`Hello ${name}, welcome to commercetools`);
}

YAML

<CodeExample path="example.yml" title="YAML code sample"/>

YAML code sampleyml

- title: Menu
  pages:
    - title: Home
      path: /home
    - title: About
      path: /about
    - title: Products
      path: /products
    - title: Contact
      path: /contact

Multiple languages

<MultiCodeExample title="Multilanguage code samples">
  <CodeExample path="example.js" highlightLines={[3]} />
  <CodeExample path="example.java"/>
  <CodeExample path="example.console" noPromptLines={[3, 4]} />
</MultiCodeExample>

Multilanguage code samples

// Arrow function sample
const arrowFuncSample = () => {
  console.log('this is an arrow function example');
};