"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", figcaption: "figcaption", figure: "figure", h1: "h1", h2: "h2", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {CodeTabs} = _components; if (!CodeTabs) _missingMdxReference("CodeTabs", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "advanced-code-block-examples", children: "Advanced Code Block Examples" }), "\n", _jsx(_components.p, { children: "This post demonstrates the advanced code block features available in our MDX setup." }), "\n", _jsx(_components.h2, { id: "basic-code-block-with-language-detection", children: "Basic Code Block with Language Detection" }), "\n", _jsx(_components.p, { children: "Here's a simple TypeScript example:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "typescript", "data-theme": "github-light dracula", __rawstring__: "interface User {\n id: number;\n name: string;\n email: string;\n createdAt: Date;\n}\n\nfunction createUser(userData: Omit): User {\n return {\n id: Math.random(),\n createdAt: new Date(),\n ...userData,\n };\n}\n\nconst newUser = createUser({\n name: \"John Doe\",\n email: \"john@example.com\"\n});\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "typescript", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "interface" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " User" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " id" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " number" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " name" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " email" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " createdAt" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " Date" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "function" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " createUser" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "userData" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " Omit" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "User" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " |" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "createdAt" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ">)" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " User" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " id" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " Math." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "random" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "()," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " createdAt" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-light-font-weight": "inherit", "--shiki-dark": "#FF79C6", "--shiki-dark-font-weight": "bold" }, children: " new" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " Date" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "()," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "userData," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#F8F8F2" }, children: " newUser" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " createUser" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " name" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " \"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "John Doe" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " email" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " \"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "john@example.com" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "});" }) })] }) }) }), "\n", _jsx(_components.h2, { id: "multi-file-code-block-example", children: "Multi-File Code Block Example" }), "\n", _jsxs(CodeTabs, { title: "React Component with Styles", children: [_jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "github-light dracula", children: "Button.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "github-light dracula", __rawstring__: "import React from 'react';\nimport './Button.css';\n\ninterface ButtonProps {\n variant?: 'primary' | 'secondary';\n size?: 'sm' | 'md' | 'lg';\n children: React.ReactNode;\n onClick?: () => void;\n}\n\nexport function Button({ \n variant = 'primary', \n size = 'md', \n children, \n onClick \n}: ButtonProps) {\n return (\n \n );\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " React " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "react" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "./Button.css" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "interface" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " ButtonProps" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " variant" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "?:" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "primary" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " |" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "secondary" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " size" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "?:" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "sm" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " |" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "md" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " |" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "lg" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-dark": "#F8F8F2" }, children: " children" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " React" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: "ReactNode" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "?:" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " () " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " void" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " Button" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "({ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: " variant" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "primary" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: " size" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "md" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: " children" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#E36209", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: " ButtonProps" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#FF79C6" }, children: "button" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "`btn btn-" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#FF79C6" }, children: "${" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "variant" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#FF79C6" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: " btn-" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#FF79C6" }, children: "${" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "size" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#FF79C6" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "`" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "{onClick}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {children}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) })] }) })] }), _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "css", "data-theme": "github-light dracula", children: "Button.css" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-light dracula", __rawstring__: ".btn {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 0.375rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary {\n background-color: #3b82f6;\n color: white;\n}\n\n.btn-primary:hover {\n background-color: #2563eb;\n}\n\n.btn-secondary {\n background-color: #6b7280;\n color: white;\n}\n\n.btn-sm {\n padding: 0.25rem 0.75rem;\n font-size: 0.875rem;\n}\n\n.btn-lg {\n padding: 0.75rem 1.5rem;\n font-size: 1.125rem;\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "css", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " padding" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.5" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " border" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " none" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " border-radius" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.375" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " font-weight" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 500" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " cursor" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " pointer" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " transition" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " all" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.2" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "s" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn-primary" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " background-color" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " #3b82f6" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " color" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " white" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn-primary" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FF79C6", "--shiki-dark-font-style": "italic" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: "hover" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " background-color" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " #2563eb" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn-secondary" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " background-color" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " #6b7280" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " color" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " white" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn-sm" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " padding" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.25" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.75" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " font-size" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.875" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: ".btn-lg" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " padding" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0.75" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1.5" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " font-size" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1.125" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "}" }) })] }) })] }), _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "github-light dracula", children: "Button.test.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "github-light dracula", __rawstring__: "import { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from './Button';\n\ndescribe('Button', () => {\n it('renders with correct text', () => {\n render();\n expect(screen.getByText('Click me')).toBeInTheDocument();\n });\n\n it('calls onClick when clicked', () => {\n const handleClick = jest.fn();\n render();\n \n fireEvent.click(screen.getByText('Click me'));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('applies correct CSS classes', () => {\n render();\n const button = screen.getByText('Test');\n \n expect(button).toHaveClass('btn', 'btn-secondary', 'btn-lg');\n });\n});\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " { render, screen, fireEvent } " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "@testing-library/react" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " { Button } " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "./Button" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "describe" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Button" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " it" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "renders with correct text" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " render" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(<" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: "Button" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ">Click me);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " expect" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(screen." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "getByText" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Click me" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "))." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "toBeInTheDocument" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " it" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "calls onClick when clicked" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#F8F8F2" }, children: " handleClick" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " jest." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "fn" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "();" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " render" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(<" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: "Button" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " onClick" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "{handleClick}>Click me);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " fireEvent." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "click" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(screen." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "getByText" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Click me" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "));" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " expect" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(handleClick)." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "toHaveBeenCalledTimes" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "1" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " it" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "applies correct CSS classes" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", () " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " render" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(<" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-light-font-style": "inherit", "--shiki-dark": "#8BE9FD", "--shiki-dark-font-style": "italic" }, children: "Button" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " variant" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "secondary" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-light-font-style": "inherit", "--shiki-dark": "#50FA7B", "--shiki-dark-font-style": "italic" }, children: " size" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "lg" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ">Test);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#F8F8F2" }, children: " button" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " screen." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "getByText" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "Test" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " expect" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(button)." }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: "toHaveClass" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "btn" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "btn-secondary" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "btn-lg" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "});" }) })] }) })] })] }), "\n", _jsx(_components.h2, { id: "python-algorithm-example", children: "Python Algorithm Example" }), "\n", _jsx(_components.p, { children: "Here's a more complex example with Python:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "python", "data-theme": "github-light dracula", __rawstring__: "def quicksort(arr, low=0, high=None):\n \"\"\"\n Sorts an array using the quicksort algorithm.\n \n Args:\n arr: List to be sorted\n low: Starting index\n high: Ending index\n \n Returns:\n None (sorts in-place)\n \"\"\"\n if high is None:\n high = len(arr) - 1\n \n if low < high:\n # Partition the array and get pivot index\n pivot_index = partition(arr, low, high)\n \n # Recursively sort elements before and after partition\n quicksort(arr, low, pivot_index - 1)\n quicksort(arr, pivot_index + 1, high)\n\ndef partition(arr, low, high):\n \"\"\"Partition function for quicksort.\"\"\"\n pivot = arr[high] # Choose rightmost element as pivot\n i = low - 1 # Index of smaller element\n \n for j in range(low, high):\n if arr[j] <= pivot:\n i += 1\n arr[i], arr[j] = arr[j], arr[i]\n \n arr[i + 1], arr[high] = arr[high], arr[i + 1]\n return i + 1\n\n# Example usage\nif __name__ == \"__main__\":\n numbers = [64, 34, 25, 12, 22, 11, 90]\n print(f\"Original array: {numbers}\")\n \n quicksort(numbers)\n print(f\"Sorted array: {numbers}\")\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "python", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "def" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " quicksort" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "arr" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "low" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "0" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "high" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "None" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "):" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " \"\"\"" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " Sorts an array using the quicksort algorithm." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " Args:" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " arr: List to be sorted" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " low: Starting index" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " high: Ending index" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " Returns:" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " None (sorts in-place)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " \"\"\"" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " high " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "is" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " None" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " high " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " len" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(arr) " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "-" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " low " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " high:" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: " # Partition the array and get pivot index" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " pivot_index " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " partition(arr, low, high)" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: " # Recursively sort elements before and after partition" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " quicksort(arr, low, pivot_index " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "-" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " quicksort(arr, pivot_index " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "+" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", high)" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "def" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#50FA7B" }, children: " partition" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "arr" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "low" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-light-font-style": "inherit", "--shiki-dark": "#FFB86C", "--shiki-dark-font-style": "italic" }, children: "high" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "):" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#6272A4" }, children: " \"\"\"Partition function for quicksort.\"\"\"" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " pivot " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[high] " }), _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: "# Choose rightmost element as pivot" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " i " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " low " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "-" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: " # Index of smaller element" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " for" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " j " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "in" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " range" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(low, high):" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " if" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[j] " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "<=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " pivot:" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " i " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "+=" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[i], arr[j] " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[j], arr[i]" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[i " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "+" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "], arr[high] " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " arr[high], arr[i " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "+" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " i " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "+" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 1" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: "# Example usage" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "if" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " __name__" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " ==" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " \"" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "__main__" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " numbers " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " [" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "64" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "34" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "25" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "12" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "22" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "11" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "90" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " print" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "f" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "\"Original array: " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "numbers" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " quicksort(numbers)" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " print" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "f" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "\"Sorted array: " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "numbers" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ")" })] })] }) }) }), "\n", _jsx(_components.h2, { id: "sql-query-example", children: "SQL Query Example" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "sql", "data-theme": "github-light dracula", __rawstring__: "-- Complex query with joins and aggregations\nSELECT \n u.id,\n u.name,\n u.email,\n COUNT(p.id) as post_count,\n AVG(p.views) as avg_views,\n MAX(p.created_at) as last_post_date\nFROM users u\nLEFT JOIN posts p ON u.id = p.author_id\nWHERE u.active = true\n AND u.created_at >= '2024-01-01'\nGROUP BY u.id, u.name, u.email\nHAVING COUNT(p.id) > 0\nORDER BY post_count DESC, avg_views DESC\nLIMIT 10;\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "sql", "data-theme": "github-light dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#6A737D", "--shiki-dark": "#6272A4" }, children: "-- Complex query with joins and aggregations" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "SELECT" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "name" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "email" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " COUNT" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "as" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " post_count," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " AVG" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "views" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "as" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " avg_views," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " MAX" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "created_at" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "as" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " last_post_date" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "FROM" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " users u" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "LEFT JOIN" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " posts p " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "ON" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " p" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "author_id" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "WHERE" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "active" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " true" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " AND" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "created_at" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: " >=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#F1FA8C" }, children: "2024-01-01" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#E9F284" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "GROUP BY" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "name" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "u" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "email" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "HAVING" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#8BE9FD" }, children: " COUNT" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: "." }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: "id" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: ">" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 0" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "ORDER BY" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: " post_count " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "DESC" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ", avg_views " }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "DESC" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#FF79C6" }, children: "LIMIT" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#BD93F9" }, children: " 10" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#F8F8F2" }, children: ";" })] })] }) }) }), "\n", _jsx(_components.h2, { id: "inline-code-examples", children: "Inline Code Examples" }), "\n", _jsxs(_components.p, { children: ["You can also use inline code like ", _jsx(_components.code, { children: "const greeting = \"Hello World\"" }), " or ", _jsx(_components.code, { children: "npm install react" }), " within paragraphs. The styling automatically adapts to provide proper contrast and readability."] }), "\n", _jsx(_components.p, { children: "These advanced code block features make technical documentation much more engaging and easier to follow!" }), "\n", _jsx(_components.pre, { "data-language": "text", __rawstring__: "", children: _jsx(_components.code, { className: "code-fence", "data-language": "text" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Advanced Code Block Examples

Advanced rehype-pretty-code & Shiki Examples

Advanced Code Block Examples

Advanced rehype-pretty-code & Shiki Examples