1.1.0 • Published 3 years ago
@handbook/code-block v1.1.0
@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
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;
}
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.
1.1.0
3 years ago
1.0.0
4 years ago
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
0.2.4
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.0
4 years ago