Fancy Code Block

Line Number

console.log('No line number!');

Copy Button

1console.log('No copy button!');

Lines Highlight

1import type { Parent } from 'mdast';
2import { visit } from 'unist-util-visit';
3
4/**
5 * Markdown abstract syntax tree node definition.
6 * @see https://github.com/syntax-tree/mdast
7 */
8interface ContainerDirective extends Parent {
9  name: string;
10  attributes: Record<string, string>;
11  value?: string;
12}
13
14export default function remarkAdmonitions() {
15  return (tree: any) => {
16    visit(tree, (node: ContainerDirective) => {
17      if (node.type === 'containerDirective') {
18        node.data = {
19          hName: 'aside',
20          hProperties: {
21            type: node.name,
22            title: Object.keys(node.attributes).join(' '),
23            className: `admonition admonition-${node.name}`,
24          },
25        };
26      }
27    });
28  };
29}

Code Title

console.log('Awesome!');

Live Code

export default function App() {
  const [count, setCount] = useState(0);


  return (
    <div
      onClick={() => setCount(count => count + 1)}
      style={{
        padding: '3rem',
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      {count}
    </div>
  );
};
export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div
      onClick={() => setCount(count => count + 1)}
      style={{
        padding: '3rem',
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      {count}
    </div>
  );
};
0

import Greet from './Greet';

export default function MyApp() {
  return (
    <div>
      <h1>My App</h1>
      <Greet />
    </div>
  );
}

Language

Markup Code

1<h2>JSX Heading 2</h2>
2
3<abbr title="HyperText Markup Language">HTML</abbr> is a lovely language.
4
5<section>And here is *markdown* in **JSX**!</section>

1<div># this is not a heading but *this* is emphasis</div>
2
3<div>This is a `p`.</div>

CSS Code

1:root {
2  --primary: #1677ff;
3  --secondary: #40a9ff;
4  --light: #f8f9fa;
5  --dark: #343a40;
6  --font-stack: 'Raleway', 'Spectral', 'Noto Serif SC', 'Noto Sans SC',
7    'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
8    'Open Sans', 'Helvetica Neue', arial, sans-serif, serif;
9  --font-size: 18px;
10}
11
12body {
13  width: 100%;
14  font-family: var(--font-stack);
15  font-size: var(--font-size);
16}

TypeScript Code

1const foo = function (bar) {
2  return bar++;
3};
4
5foo(5);
6
7some.code();

1{
2  (function () {
3    const guess = 0.44;
4
5    if (guess > 0.66) {
6      return <span style={{ color: 'tomato' }}>Look at us.</span>;
7    }
8
9    if (guess > 0.33) {
10      return <span style={{ color: 'violet' }}>Who would have guessed?!</span>;
11    }
12
13    return <span style={{ color: 'goldenrod' }}>Not me.</span>;
14  })();
15}