Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 19x 19x 19x 19x 19x 19x 5x 5x 5x 19x 11x 11x 19x 10x 10x 9x 19x 4x 1x 19x 8x 8x 8x 8x 19x | interface IHighlightJS {
highlightBlock(element: HTMLElement): void;
}
declare const hljs: void | IHighlightJS;
import * as classNames from 'classnames';
import * as React from 'react';
const MATCHES_INITIAL_INDENTATION = /^([^\S\n]*)\S/;
const MATCHES_BLANK_FIRST_LINE = /^\s*\n/;
const MATCHES_BLANK_LAST_LINE = /\n\s*$/;
export interface IProps extends React.HTMLProps<HTMLDivElement> {
children?: string;
language?: string;
}
export function formatCode (code: string) {
const codeWithoutLeadingOrTrailingEmptyLines = code
.replace(MATCHES_BLANK_FIRST_LINE, '')
.replace(MATCHES_BLANK_LAST_LINE, '');
const initialIndentation: RegExpExecArray | null =
MATCHES_INITIAL_INDENTATION.exec(codeWithoutLeadingOrTrailingEmptyLines);
return initialIndentation ?
codeWithoutLeadingOrTrailingEmptyLines.replace(new RegExp(`^${initialIndentation[1]}`, 'gm'), '') :
codeWithoutLeadingOrTrailingEmptyLines;
}
export class CodeBlock extends React.Component<IProps, any> {
public element: HTMLPreElement;
public constructor (props: IProps) {
super(props);
this.highlightBlock = this.highlightBlock.bind(this);
}
public highlightBlock (element: HTMLPreElement) {
this.element = element;
if (hljs && typeof hljs.highlightBlock === 'function') {
hljs.highlightBlock(this.element);
}
}
public componentDidUpdate (prevProps: IProps) {
if (
hljs && typeof hljs.highlightBlock === 'function' &&
prevProps.children !== this.props.children
) {
hljs.highlightBlock(this.element);
}
}
public render () {
const { children, className, language, name, ...remainingProps } = this.props;
const languageClassName = language && `language-${language}`;
const content = typeof children === 'string' ? formatCode(children) : children;
return (
<div {...remainingProps} className={classNames('code-block-wrapper', className)}>
{
typeof name !== 'undefined' && (
<div className="code-block-name">
{
typeof language !== 'undefined' && (
<div className="code-block-language">
{language}
</div>
)
}
{name}
</div>
)
}
<pre
ref={this.highlightBlock}
className={classNames('code-block', languageClassName)}
>
{content}
</pre>
</div>
);
}
}
|