Logo
MDXMarkdownPrismCode PlaygroundCode EditorReactNext.jsFrontend DevelopmentWeb Development

Implement Fancy Code Block

Sun May 01 2022Sun May 08 20222 minutes

Fancy Code Block

Line Number

Disable line number noline:
console.log('No line number!');

Copy Button

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

Lines Highlight

Set highlight lines lines="2,5,8-10,12,14..16,19,22...25":
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

Show code title title="Awesome Code":
console.log('Awesome!');

Live Code

Live code editor live:
0
Live code editor <Editor>:
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: #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

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}
Copyright © Sabertaz Built with React and NextLast Built Time