CodeViewer

Links: NPM · GitHub

Install

• yarn add @propellerads/code-viewer or
• npm install @propellerads/code-viewer --save

Usage

import CodeViewer from '@propellerads/code-viewer';

<CodeViewer
  elementId="example-code"
  language="js"
  copyingEnabled
  tipCodeCopied="Copied!"
  onCopyClick={() => console.log('Code copied')}
>
  {`const sum = (a, b) => a + b;`}
</CodeViewer>;

Props

• elementId (string, required): unique id for the component instance
• language (string, default: "markup"): Prism language id, e.g. "js", "javascript", "ts", "css". more at PrismJS languages
• copyingEnabled (boolean, default: true): shows the copy-to-clipboard button
• tipCodeCopied (ReactNode, default: "Copied!"): text or node for the tooltip on copy
• highlightCode (boolean, default: true): enables Prism highlighting
• onCopyClick (() => void, optional): called after text is copied
• children (string | ReactNode): code to render; only string children are copied

Notes

• Highlighting is powered by PrismJS. For languages beyond the core set, import the language definition once in your app, e.g.:
  • import 'prismjs/components/prism-json';
• Since v2, the component is written in TypeScript and ships type definitions.