CodeBlock

Der CodeBlock wird verwendet, um Code als Block mit Syntax-Highlighting darzustellen.GitHub

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

Beispiel

Gib über das language Property an um welche Programmiersprache es sich handelt, um das korrekte Syntax-Highlighting zu erhalten. (s. unterstütze language imports)

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

import CodeBlock from "@mittwald/flow-react-components/CodeBlock";

<CodeBlock
  language="json"
  code={`{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}`}
/>

Mit Zeilennummern

1{
2    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
3    "name": "My Project"
4}

import CodeBlock from "@mittwald/flow-react-components/CodeBlock";

<CodeBlock
  showLineNumbers
  language="json"
  code={`{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}`}
/>

Kopierbar

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

import CodeBlock from "@mittwald/flow-react-components/CodeBlock";

<CodeBlock
  copyable
  language="json"
  code={`{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}`}
/>

Color Light und Dark

Dark

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

import CodeBlock from "@mittwald/flow-react-components/CodeBlock";

<CodeBlock
  color="dark"
  language="json"
  code={`{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}`}
/>

Light

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

import CodeBlock from "@mittwald/flow-react-components/CodeBlock";

<CodeBlock
  color="light"
  language="json"
  code={`{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}`}
/>

Feedback geben

Flow