Features

Table

name	type	description
name john	type data: Object	description Lorem ipsum dolor sit amet, consectetur adipiscing elit.
name foo	type isVisible: boolean	description Integer sed faucibus nunc.
name buz	type disabled: boolean	description Integer sed faucibus nunc. Nulla odio enim, molestie id mauris in, efficitur placerat ex.

Text bold decorations

Some italic text with bold text also with bold and italic together

List with items

You can see the list with items below

Item 1
One more item
Some other item with very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed faucibus nunc. Nulla odio enim, molestie id mauris in, efficitur placerat ex. Nam eget finibus ex.

Bloquote

There is an example of blockquote below

If you pass this prop, ensure that the index or defaultIndex prop is an array.

About the default value: The ch unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.

If you are curious about the reason for this default value of 60 characters, consider this explanation about line length from Better Web Type.

Inline code values

If you set foo as true, and you will have foo=true;

Divider

After this text you will see a divider

Template strings

There is 2023 now that generated by template string

Code blocks

Codeblocks supports many languages and you can see the example below

example.sh

some code string;

And there is an example of jsx code with highlighting

Accordion.tsx

1import React from 'react';
2import BaseHighlight, { Language, PrismTheme, defaultProps } from 'prism-react-renderer';
3import { EDITOR_LIVE_STYLES } from '@/features/Mdx/constants';
4import { calculateLinesToHighlight } from '@/features/Mdx/utils';
5
6interface CodeStaticProps {
7    code: string;
8    language: Language;
9    theme: PrismTheme;
10    meta?: string;
11    showLines?: boolean;
12}
13
14const CodeStatic: React.FC<CodeStaticProps> = ({ code, language, meta, showLines, ...props }) => {
15    const shouldHighlightLine = calculateLinesToHighlight(meta);
16
17    return (
18        <BaseHighlight {...defaultProps} code={code} language={language} {...props}>
19            {({ className, style, tokens, getLineProps, getTokenProps }): JSX.Element => (
20                <div style={EDITOR_LIVE_STYLES} data-language={language}>
21                    <pre className={className} style={style}>
22                        {tokens.map((line, index) => {
23                            
24                            const lineProps = getLineProps({ line, key: index });
25                            return (
26                                <div
27                                    key={`line-${index.toString()}`}
28                                    // px="5"
29                                    // bg={shouldHighlightLine(i) ? 'whiteAlpha.200' : undefined}
30                                    {...lineProps}
31                                >
32                                    {showLines && (
33                                        <span className={styles.line}>{index + 1}</span>
34                                    )}
35                                    {line.map((token, key) => (
36                                        <span key={`key-${key.toString()}`} {...getTokenProps({ token, key })} />
37                                    ))}
38                                </div>
39                            );
40                        })}
41                    </pre>
42                </div>
43            )}
44        </BaseHighlight>
45    );
46};
47
48export default CodeStatic;

Also supports styles highlighting

example.scss

@import "helpers";

// $code-background: #19243c;
// $header-background: #0c162d;
// $border-color: #31363C;

$code-background: $dark-100;
$header-background: $dark-200;
$border-color: $dark-300;

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: auto;
  border-radius: 12px;
  background: $code-background;
  border: 1px solid $border-color;
  margin: rem(16px) 0;
}

.header {
  position: relative;
  display: flex;
  height: rem(45px);
  padding: rem(8px);
  padding-bottom: 0;
  background: $header-background;
  color: $dark-700;
  border-bottom: 1px solid $border-color;
}

Even bash

example.bash

npm install @chakra-ui/react

And plain jsx

example.jsx

<Accordion allowToggle>
  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex='1' textAlign='left'>
          Section 1 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex='1' textAlign='left'>
          Section 2 title
        </Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Live editor

There is a live editor below.

example.jsx

<div>
  <h1>Title</h1>
  <span style={{color:'red'}}>subtitle</span>
</div>

Tasklist

to do
done

Autolink literals

www.example.com, https://example.com, and contact@example.com and Named link

Strikethrough

~~one~~ or ~~two~~ tildes.