@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
78 lines (62 loc) • 1.77 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TSX</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Practical Example</h3>
<pre>
import React from 'react';
import * as styles from './section.module.css';
type Props = {
header: React.ReactNode;
footer: React.ReactNode;
}
class Section extends React.Component<Props, {}> {
protected readonly items: string[] = [];
render() {
const { props } = this;
return (
<div className={ styles.section }>
{ props.header && <header className={ styles.sectionBody }>{ props.header }</header> }
<div className={ styles.sectionBody }>
{ props.children }
</div>
{ props.footer && <footer className={ styles.sectionBody }>{ props.header }</footer> }
</div>
);
}
}
</pre>
<h3>Typing</h3>
<pre>
declare var process: any;
type Token = [ string, number, ...RegExp[] ];
interface CustomDivElement extends HTMLDivElement {
selectionStart: number,
selectionEnd: number,
setSelection( number, number ): void;
}
namespace Lexer {
export interface Grammar {
main: Tokenizers[];
[ key: string ]: Tokenizers[];
}
}
function Component(): React.FC {
return <span>a</span>
}
function isArray<T>( subject: T[] ): subject is T[] {
return Array.isArray( subject );
}
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/languages/tsx.min.js"></script>
<script>
const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'tsx' } );
</script>
</body>
</html>