마크다운 예제2

여기에 샘플 텍스트...

const foo = function (bar) {
  return bar++;
};
 
console.log(foo(5));

const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');

export function foo() {
  console.log('hewwo'); 
  console.log('hello'); 
}

export function foo() {
  console.log('hewwo'); 
}

export function foo() {
  console.log('hewwo'); 
  console.log('hello'); 
}

import { useFloating, offset } from '@floating-ui/react';
 
interface Props {
  open: boolean;
  onOpenChange(open: boolean): void;
}
 
export function App({ open, onOpenChange }: Props) {
  const { refs, floatingStyles } = useFloating({
    open,
    onOpenChange,
    placement: 'left',
    middleware: [offset(10)],
  });
 
  return (
    <Container>
      <div ref={refs.setReference} />
      {open && <div ref={refs.setFloating} style={floatingStyles} />}
    </Container>
  );
}

import { useFloating } from '@floating-ui/react';
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

import { useFloating } from '@floating-ui/react';
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

function getStringLength(str) {
  return str.length;
}

  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

npm install rehype-pretty-code shikiji@^0.9.0

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypePrettyCode from 'rehype-pretty-code';
 
async function main() {
  const file = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      // See Options section below.
    })
    .use(rehypeStringify)
    .process('`const numbers = [1, 2, 3]{:js}`');
 
  console.log(String(file));
}
 
main();

import fs from 'node:fs';
import nextMDX from '@next/mdx';
import rehypePrettyCode from 'rehype-pretty-code';
 
/** @type {import('rehype-pretty-code').Options} */
const options = {
  // See Options section below.
};
 
const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [[rehypePrettyCode, options]],
  },
});
 
/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true };
 
export default withMDX(nextConfig);

interface Options {
  grid?: boolean;
  theme?: Theme | Record<string, Theme>;
  keepBackground?: boolean;
  defaultLang?: string | { block?: string; inline?: string };
  tokensMap?: Record<string, string>;
  transformers?: ShikijiTransformer[];
  filterMetaString?(str: string): string;
  getHighlighter?(options: BundledHighlighterOptions): Promise<Highlighter>;
  onVisitLine?(element: LineElement): void;
  onVisitHighlightedLine?(element: LineElement): void;
  onVisitHighlightedChars?(element: CharsElement, id: string | undefined): void;
  onVisitTitle?(element: Element): void;
  onVisitCaption?(element: Element): void;
}

const options = {
  grid: false,
};

const options = {
  theme: 'one-dark-pro',
};

const options = {
  theme: JSON.parse(fs.readFileSync('./themes/moonlight-ii.json', 'utf-8')),
};

const options = {
  keepBackground: false,
};

const options = {
  defaultLang: 'plaintext',
};

const options = {
  defaultLang: {
    block: 'plaintext',
    inline: 'plaintext',
  },
};

import { transformerNotationDiff } from 'shikiji-transformers';
 
const options = {
  transformers: [transformerNotationDiff()],
};

```js {1-3,4}
 
```

```js {1,2}#a {3,4}#b
 
```

```js /carrot/
 
```

```js "carrot"
 
```

```js /carrot/ /apple/
 
```

```js /carrot/3-5
 
```

```js /carrot/3-5 /apple/
 
```

```js /age/#v /name/#v /setAge/#s /setName/#s /50/#i /'Taylor'/#i
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```

const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');

This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.

The name of the function is `getStringLength{:.entity.name.function}`.

const options = {
  tokensMap: {
    fn: 'entity.name.function',
  },
};

The name of the function is `getStringLength{:.fn}`.

```js title="..."
 
```

```js caption="..."
 
```

code {
  counter-reset: line;
}
 
code > [data-line]::before {
  counter-increment: line;
  content: counter(line);
 
  /* Other styling */
  display: inline-block;
  width: 1rem;
  margin-right: 2rem;
  text-align: right;
  color: gray;
}
 
code[data-line-numbers-max-digits='2'] > [data-line]::before {
  width: 2rem;
}
 
code[data-line-numbers-max-digits='3'] > [data-line]::before {
  width: 3rem;
}

```js showLineNumbers
 
```

```js showLineNumbers{number}
 
```

const options = {
  theme: {
    dark: 'github-dark-dimmed',
    light: 'github-light',
  },
};

code[data-theme*=' '],
code[data-theme*=' '] span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}
 
@media (prefers-color-scheme: dark) {
  code[data-theme*=' '],
  code[data-theme*=' '] span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
}

<code data-theme="github-dark-dimmed github-light"></code>

const options = {
  onVisitLine(element) {
    console.log('Visited line');
  },
  onVisitHighlightedLine(element) {
    console.log('Visited highlighted line');
  },
  onVisitHighlightedChars(element) {
    console.log('Visited highlighted chars');
  },
  onVisitTitle(element) {
    console.log('Visited title');
  },
  onVisitCaption(element) {
    console.log('Visited caption');
  },
};

import { getHighlighter } from 'shikiji';
 
const options = {
  getHighlighter: (options) =>
    getHighlighter({
      ...options,
      langs: [
        'plaintext',
        async () => JSON.parse(await readFile('my-grammar.json', 'utf-8')),
      ],
    }),
};