Fancy Code Block

Markup Code Block

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 Block

1:root {
2  --primary: #1890ff;
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 Block

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}

Code Block Configuration

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        // Change container html element to `<aside type="*" title="*" class="admonition admonition-*">`,
19        node.data = {
20          hName: 'aside',
21          hProperties: {
22            type: node.name,
23            title: Object.keys(node.attributes).join(' '),
24            className: `admonition admonition-${node.name}`,
25          },
26        };
27      }
28    });
29  };
30}

Code Title

console.log('Awesome!');

Live Code

console.log('Live!');