The code component displays its styled contents, usually a short fragment of computer code in a monospace font.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| children | string | - | - | The code within the component |
| className | string | - | - | className provide the possibility for extra classNames |
| hasCopyButton | bool | - | - | Adds a copy button to code examples |
| isHighlighted | bool | - | - | Apply syntax highlighting to the code |
| language | oneOf 'cs' | 'css' | 'diff' | 'html' | 'java' | 'javascript' | 'js' | 'jsx' | 'markdown' | 'md' | 'objectivec' | 'php' | 'python' | 'ruby' | 'scss' | 'swift' | - | - | Specify a language for the syntax highlighter |
| ouiStyle | bool | - | - | ouiStyle |
| testSection | string | - | - | Hook for automated JavaScript tests |
| type | oneOf 'inline' | 'block' | yes | - | How the code should be displayed |
Inline Example
Usage
Use to display code to the user, both inline and block, with syntax highlighting for many languages.
Best Practices
Do
If the user needs to reference or interact with the text, consider the hasCopyButton prop
Don't
Avoid overloading a single code block with a wall of text, instead consider breaking up your content with headings and multiple code components
Don't expect interactivity with this component, for that you'll need to use the CodeMirror component in Optimizely.git