Default

Use BpkCode for inline code blocks.

Alternate

Use the alternate prop for displaying on dark backgrounds.

Block

For a block of code, use BpkCodeBlock.

Block alternate

Use the alternate prop for displaying on dark backgrounds.

                                                
                                                import { BpkCode, BpkCodeBlock } from '@skyscanner/backpack-web/bpk-component-code';
                                                import BpkText from '@skyscanner/backpack-web/bpk-component-text';
                                                
                                                const codeBlock = `import React from 'react';
                                                import ReactDOM from 'react-dom';
                                                
                                                ReactDOM.render(<App />, ...);`;
                                                
                                                export default () => (
                                                  <div>
                                                    <BpkText tagName='p'>
                                                      We recommend using React from npm with a bundler like webpack. You can use
                                                      the <BpkCode>react</BpkCode> and <BpkCode>react-dom</BpkCode> packages. After installing it
                                                      using <BpkCode>npm install --save react react-dom</BpkCode>, you can use:
                                                    </BpkText>
                                                    <BpkCodeBlock>{codeBlock}</BpkCodeBlock>
                                                  </div>
                                                );