Prism.languages.rest = {
table: [
{
pattern:
/(^[\t ]*)(?:\+[=-]+)+\+(?:\r?\n|\r)(?:\1[+|].+[+|](?:\r?\n|\r))+\1(?:\+[=-]+)+\+/m,
lookbehind: true,
inside: {
punctuation: /\||(?:\+[=-]+)+\+/,
},
},
{
pattern:
/(^[\t ]*)=+ [ =]*=(?:(?:\r?\n|\r)\1.+)+(?:\r?\n|\r)\1=+ [ =]*=(?=(?:\r?\n|\r){2}|\s*$)/m,
lookbehind: true,
inside: {
punctuation: /[=-]+/,
},
},
],
// Directive-like patterns
'substitution-def': {
pattern: /(^[\t ]*\.\. )\|(?:[^|\s](?:[^|]*[^|\s])?)\| [^:]+::/m,
lookbehind: true,
inside: {
substitution: {
pattern: /^\|(?:[^|\s]|[^|\s][^|]*[^|\s])\|/,
alias: 'attr-value',
inside: {
punctuation: /^\||\|$/,
},
},
directive: {
pattern: /( )(?! )[^:]+::/,
lookbehind: true,
alias: 'function',
inside: {
punctuation: /::$/,
},
},
},
},
'link-target': [
{
pattern: /(^[\t ]*\.\. )\[[^\]]+\]/m,
lookbehind: true,
alias: 'string',
inside: {
punctuation: /^\[|\]$/,
},
},
{
pattern: /(^[\t ]*\.\. )_(?:`[^`]+`|(?:[^:\\]|\\.)+):/m,
lookbehind: true,
alias: 'string',
inside: {
punctuation: /^_|:$/,
},
},
],
directive: {
pattern: /(^[\t ]*\.\. )[^:]+::/m,
lookbehind: true,
alias: 'function',
inside: {
punctuation: /::$/,
},
},
comment: {
// The two alternatives try to prevent highlighting of blank comments
pattern:
/(^[\t ]*\.\.)(?:(?: .+)?(?:(?:\r?\n|\r).+)+| .+)(?=(?:\r?\n|\r){2}|$)/m,
lookbehind: true,
},
title: [
// Overlined and underlined
{
pattern:
/^(([!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~])\2+)(?:\r?\n|\r).+(?:\r?\n|\r)\1$/m,
inside: {
punctuation:
/^[!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]+|[!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]+$/,
important: /.+/,
},
},
// Underlined only
{
pattern:
/(^|(?:\r?\n|\r){2}).+(?:\r?\n|\r)([!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~])\2+(?=\r?\n|\r|$)/,
lookbehind: true,
inside: {
punctuation: /[!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]+$/,
important: /.+/,
},
},
],
hr: {
pattern:
/((?:\r?\n|\r){2})([!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~])\2{3,}(?=(?:\r?\n|\r){2})/,
lookbehind: true,
alias: 'punctuation',
},
field: {
pattern: /(^[\t ]*):[^:\r\n]+:(?= )/m,
lookbehind: true,
alias: 'attr-name',
},
'command-line-option': {
pattern:
/(^[\t ]*)(?:[+-][a-z\d]|(?:--|\/)[a-z\d-]+)(?:[ =](?:[a-z][\w-]*|<[^<>]+>))?(?:, (?:[+-][a-z\d]|(?:--|\/)[a-z\d-]+)(?:[ =](?:[a-z][\w-]*|<[^<>]+>))?)*(?=(?:\r?\n|\r)? {2,}\S)/im,
lookbehind: true,
alias: 'symbol',
},
'literal-block': {
pattern: /::(?:\r?\n|\r){2}([ \t]+)(?![ \t]).+(?:(?:\r?\n|\r)\1.+)*/,
inside: {
'literal-block-punctuation': {
pattern: /^::/,
alias: 'punctuation',
},
},
},
'quoted-literal-block': {
pattern:
/::(?:\r?\n|\r){2}([!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]).*(?:(?:\r?\n|\r)\1.*)*/,
inside: {
'literal-block-punctuation': {
pattern: /^(?:::|([!"#$%&'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~])\1*)/m,
alias: 'punctuation',
},
},
},
'list-bullet': {
pattern:
/(^[\t ]*)(?:[*+\-•‣⁃]|\(?(?:\d+|[a-z]|[ivxdclm]+)\)|(?:\d+|[a-z]|[ivxdclm]+)\.)(?= )/im,
lookbehind: true,
alias: 'punctuation',
},
'doctest-block': {
pattern: /(^[\t ]*)>>> .+(?:(?:\r?\n|\r).+)*/m,
lookbehind: true,
inside: {
punctuation: /^>>>/,
},
},
inline: [
{
pattern:
/(^|[\s\-:\/'"<(\[{])(?::[^:]+:`.*?`|`.*?`:[^:]+:|(\*\*?|``?|\|)(?!\s)(?:(?!\2).)*\S\2(?=[\s\-.,:;!?\\\/'")\]}]|$))/m,
lookbehind: true,
inside: {
bold: {
pattern: /(^\*\*).+(?=\*\*$)/,
lookbehind: true,
},
italic: {
pattern: /(^\*).+(?=\*$)/,
lookbehind: true,
},
'inline-literal': {
pattern: /(^``).+(?=``$)/,
lookbehind: true,
alias: 'symbol',
},
role: {
pattern: /^:[^:]+:|:[^:]+:$/,
alias: 'function',
inside: {
punctuation: /^:|:$/,
},
},
'interpreted-text': {
pattern: /(^`).+(?=`$)/,
lookbehind: true,
alias: 'attr-value',
},
substitution: {
pattern: /(^\|).+(?=\|$)/,
lookbehind: true,
alias: 'attr-value',
},
punctuation: /\*\*?|``?|\|/,
},
},
],
link: [
{
pattern: /\[[^\[\]]+\]_(?=[\s\-.,:;!?\\\/'")\]}]|$)/,
alias: 'string',
inside: {
punctuation: /^\[|\]_$/,
},
},
{
pattern:
/(?:\b[a-z\d]+(?:[_.:+][a-z\d]+)*_?_|`[^`]+`_?_|_`[^`]+`)(?=[\s\-.,:;!?\\\/'")\]}]|$)/i,
alias: 'string',
inside: {
punctuation: /^_?`|`$|`?_?_$/,
},
},
],
// Line block start,
// quote attribution,
// explicit markup start,
// and anonymous hyperlink target shortcut (__)
punctuation: {
pattern: /(^[\t ]*)(?:\|(?= |$)|(?:---?|—|\.\.|__)(?= )|\.\.$)/m,
lookbehind: true,
},
};
>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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import {
type ForwardedRef,
type ReactNode,
forwardRef,
type CSSProperties,
} from 'react';
import type { Spacing } from '../../../types';
import { List, type ListProps } from '../../atoms';
import styles from './grid.module.scss';
export type GridProps<T extends boolean> = Omit<
ListProps<T, false>,
'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'spacing'
> & {
/**
* How the items should be aligned?
*
* @default undefined // The default behavior is `stretch`.
*/
alignItems?: 'center' | 'end' | 'start';
/**
* The grid items.
*/
children: ReactNode;
/**
* Control the number of column.
*
* @default 'auto-fit'
*/
col?: number | 'auto-fill' | 'auto-fit';
/**
* The gap between the items.
*
* @default null
*/
gap?: Spacing | null;
/**
* Should the grid be centered?
*
* @default false
*/
isCentered?: boolean;
/**
* Define a fixed size for each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default undefined
*/
size?: string;
/**
* Define the maximal size of each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default '1fr'
*/
sizeMax?: string;
/**
* Define the maximal size of each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default 0
*/
sizeMin?: 0 | string;
};
const GridWithRef = <T extends boolean>(
{
alignItems,
children,
className = '',
col = 'auto-fit',
gap,
isCentered = false,
size,
sizeMax,
sizeMin,
style,
...props
}: GridProps<T>,
ref?: ForwardedRef<T extends true ? HTMLOListElement : HTMLUListElement>
) => {
const gridClass = [
styles.wrapper,
styles[alignItems ? `wrapper--align-items-${alignItems}` : ''],
styles[isCentered ? 'wrapper--is-centered' : ''],
styles[size ? 'wrapper--has-fixed-size' : ''],
styles[sizeMin ? 'wrapper--has-min-size' : ''],
className,
].join(' ');
const gridStyles = {
...style,
'--col': col,
...(size ? { '--size': size } : {}),
...(sizeMax ? { '--size-max': sizeMax } : {}),
...(sizeMin ? { '--size-min': sizeMin } : {}),
...(gap ? { '--gap': `var(--spacing-${gap})` } : {}),
} as CSSProperties;
return (
<List
{...props}
className={gridClass}
hideMarker
ref={ref}
style={gridStyles}
>
{children}
</List>
);
};
export const Grid = forwardRef(GridWithRef);
|