@handbook/code-block

CodeBlock React components

Use React component.

import { CodeBlock } from '@handbook/code-block';

function Component(sourceCode: string) {
  return <CodeBlock language="js">{sourceCode}</CodeBlock>;
}

Set default code block for mdx documents.

import { MDXCodeBlock } from '@handbook/code-block';

const components = {
  pre: (props) => <div {...props} />,
  code: MDXCodeBlock,
};

API

components/CodeBlock.tsx

export function CodeBlock({ children, language, theme }: CodeBlockProps) {}

export interface CodeBlockProps {
  /**
   * your code block theme
   *
   * you can choose one of dracula, duotoneDark, duotoneLight, github, nightOwl, nightOwlLight, oceanicNext, palenight, shadesOfPurple, synthwave84, ultramin and vsDark
   *
   * @example import github from 'prism-react-renderer/themes/github'
   *
   * @see <rootDir>/node_modules/prism-react-renderer/themes
   */
  theme?: PrismTheme;
  /** source code */
  children: string;
  /** language */
  language: Language;
}

components/MDXCodeBlock.tsx

export function MDXCodeBlock({
  theme = vsDark,
  children,
  className = 'language-javascript',
}: MDXCodeBlockProps) {}

export interface MDXCodeBlockProps {
  /**
   * your code block theme
   *
   * you can choose one of dracula, duotoneDark, duotoneLight, github, nightOwl, nightOwlLight, oceanicNext, palenight, shadesOfPurple, synthwave84, ultramin and vsDark
   *
   * @example import github from 'prism-react-renderer/themes/github'
   *
   * @see <rootDir>/node_modules/prism-react-renderer/themes
   */
  theme?: PrismTheme;
  /** source string */
  children: string;
  /** css className */
  className?: string;
}

How to get source codes

These code block components print source codes only.

If you want to get source codes into your Web App use @handbook/source, @handbook/babel-plugin and @handbook/typescript-source-sampler.

You can print your source code on your Web App easier.

import React from 'react';
import { render } from 'react-dom';
import { source } from '@handbook/source';
import { sampling } from '@handbook/typescript-source-sampler';
import { CodeBlock } from '@handbook/code-block';

const module = source(require('./source/hello'));
const samples = sampling({ source: module.source, samples: ['Class', 'func'] });

function App() {
  return <CodeBlock language="typescript" children={samples.get('Class')} />;
}

render(<App />, document.querySelector('#app'));

See more

• @handbook/* This package is one of @handbook/* packages. Go to the project home and see more details.