This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Code

To add the Code component to your app:

1
2
import { Code } from '@forge/react';

Description

An entire block of formatted code, highlighted in the body text.

Props

Name	Type	Required	Description
`children`	`string`	Yes	The code to be formatted.
`language`	`string`		The language in which the code is written. Refer to Supported languages for a list of valid values.

Supported languages

The Code component currently supports the following programming languages:

"abap", "actionscript", "ada", "arduino", "autoit", "c", "c++", "coffeescript", "csharp", "css", "cuda", "d", "dart", "delphi", "elixir", "erlang", "fortran", "foxpro", "go", "graphql", "groovy", "haskell", "haxe", "html", "java", "javascript", "json", "julia", "kotlin", "latex", "livescript", "lua", "mathematica", "matlab", "objective-c", "objective-j", "objectpascal", "ocaml", "octave", "perl", "php", "powershell", "prolog", "puppet", "python", "qml", "r", "racket", "restructuredtext", "ruby", "rust", "sass", "scala", "scheme", "shell", "smalltalk", "sql", "standardml", "swift", "tcl", "tex", "text", "typescript", "vala", "vbnet", "verilog", "vhdl", "xml", "xquery"

Examples

Code block

1
2
const App = () => {
  const exampleCodeBlock = `  // React Component
    class HelloMessage extends React.Component {
      render() {
        return (
          <div>
            Hello {this.props.name}
          </div>
        );
      }
    }

    ReactDOM.render(
      <HelloMessage name="Taylor" />,
      mountNode
    );
  `;
  return (
    <Code language="javascript">
      {exampleCodeBlock}
    </Code>
  );
};

Output

Example image of rendered code

Inline code

1
2
const App = () => {
  return (
    <Text>
      To start creating a changeset, run <Code>yarn changeset</Code>. Then
      you'll be prompted to select packages for release.
    </Text>
  );
};

Output

Example image of rendered inline code