컴포넌트

이 곳에서 문서에 들어가는 모든 컴포넌트를 확인할 수 있어요

Bold 그리고 이탤릭

This is some bold and italics text.

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu.

<UL/>

문서 디자인에 의미가 있는 글을 담으면 사람들은 양식을 보지 않고 글의 내용에 집중하는 경향이 있다. 예를 들어 "나무위키의 서버는 파라과이에 있다."라는 문장을 적으면 대부분의 사람들은 글씨체에 집중하지 않고 글의 내용에 집중하게 될 것이다. 그렇다고 의미 없이 아무런 글자를 무작위로 입력해도 안 된다. 그런 텍스트는 아름답지도 않고 폰트나 레이아웃은 글 내용의 무질서함에 가려져 보이지 않을 것이다. 예를 들어 "askfiofsikf"같이 아무렇게나 입력한 문자열로 폰트를 평가한다면 폰트, 레이아웃은 보이지 않고 애들 장난같이 보일 것이다.
그렇기 때문에 로렘 입숨처럼 적당히 정갈하면서도 전세계 어떤 화자도 무슨 내용인지 이해할 수 없는(달리 말해 주의를 빼앗기지 않을) 문장을 사용한다.
로렘 입숨 생성 기능이 없더라도 플러그인을 지원하는 소프트웨어에는 로렘 입숨을 생성해 주는 플러그인이 존재하기도 한다.

링크 그리고 ...

링크

Heading 4는 사이즈가 같지만 font weight이 다릅니다. 그리고 마진이 있네요.

Heading 5는 p와 같습니다.

Heading 6도 마찬가지....

폰트 사이즈

Font 폰트

Mixed: English와 한국어가 함께 사용됩니다.

This is a regular English text and 이것은 보통 한국어 문장입니다.

This is a bold English text and 굵은 한국어 텍스트.

This is a semi-bold English sentence. 이것은 세미볼드 한국어 문장입니다.

This is a light English sentence. 이것은 라이트 한국어 문장입니다.

This is an italic English sentence.이탤릭 한국어 문장입니다.

This is a semi-bold italic English sentence. 중간 굵기의 이탤릭 한국어 문장입니다.

This is a bold italic English sentence. 굵은 이탤릭 한국어 문장입니다.

Image

Local

이 사진은 로컬에서..

Remote

remote 이 사진은 외부에서 가져왔습니다.

Quotes

“Two “front-end web developers” can be standing right next to each other and have little, if any, skill sets in common. That’s downright bizarre to me for a job title so specific and ubiquitous. I’m sure that’s already the case with a job title like designer, but front-end web developer is a niche within a niche already.”
— Jhon Doe

"마음속에서 천명과 인욕이 싸워 옳은 판단을 내리듯 인욕을 이겨내면 사람은 저절로 그 허물을 알게 된다."
— 다산 정약용

Callout

NOTE TITLE HERE

그렇기 때문에 로렘 입숨처럼 적당히 정갈하면서도 전세계 어떤 화자도 무슨 내용인지 이해할 수 없는(달리 말해 주의를 빼앗기지 않을) 문장을 사용한다.

NOTE

Two “front-end web developers” can be standing right next to each other and have little, if any, skill sets in common. That’s downright bizarre to me for a job title so specific and ubiquitous. I’m sure that’s already the case with a job title like designer, but front-end web developer is a niche within a niche already.

Code

() => This is inline code Hello World

Javascrpt with lines highlighted

hello


import process from "node:process";
Object.assign(process.env, { NEXT_TELEMETRY_DISABLED: "1" });

/**
 * @typedef {import('next').NextConfig} NextConfig
 * @typedef {Array<((config: NextConfig) => NextConfig)>} NextConfigPlugins
 */
import nextMDX from "@next/mdx";
import rehypeSlug from "rehype-slug";
import rehypePrettyCode from "rehype-pretty-code";
import moonlightTheme from "./assets/moonlight-ii.json" with { type: "json" }; 

/** @type {NextConfigPlugins} */
const plugins = [];

/** @type {NextConfig} */
const nextConfig = {
  output: "export",
  cleanDistDir: true,
  reactStrictMode: true,
  poweredByHeader: false,
  pageExtensions: ["md", "mdx", "tsx", "ts", "jsx", "js"],
  env: {
    NEXT_TELEMETRY_DISABLED: "1",
  },
};

/** @type {import('rehype-pretty-code').Options} */
const options = {
  keepBackground: false,
  theme: moonlightTheme,
};

plugins.push(
  nextMDX({
    extension: /\.(md|mdx)$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [[rehypePrettyCode, options], rehypeSlug],
    },
  }),
);

export default () => plugins.reduce((_, plugin) => plugin(_), nextConfig);

JSX with lines Added

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading; 
  if (count > 0) {
    const noun = count > 1 ? "Videos" : "Video";
    heading = count + " " + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map((video) => (
        <Video key={video.id} video={video} />
      ))}
    </section>
  );
}
이건 참고하지 마세요

TSX with lines removed

import type { Metadata } from "next";

import "./globals.css";


export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`localFonts antialiased`}>{children}</body>
    </html>
  );
}

Dart with lines focused

void main() {
  diSetup();
  runApp(DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MultiProvider( 
      providers: [
        ChangeNotifierProvider(
          create: (_) => SymbolProvider(),
        ),
      ],
      child: const App(),
    ),
  ));
}

Python with a word highlighted


prompt = PromptTemplate(
    template=prompt_template, input_variables=["context", "question"]
)

# 체인 정의
chain = (
    {
        "context": retriever,
        "question": RunnablePassthrough(),
    }
    | prompt
    | llm
)