var Component=(()=>{var g=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),C=(a,e)=>{for(var t in e)d(a,t,{get:e[t],enumerable:!0})},r=(a,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let h of B(e))!u.call(a,h)&&h!==t&&d(a,h,{get:()=>e[h],enumerable:!(l=y(e,h))||l.enumerable});return a};var A=(a,e,t)=>(t=a!=null?g(F(a)):{},r(e||!a||!a.__esModule?d(t,"default",{value:a,enumerable:!0}):t,a)),f=a=>r(d({},"__esModule",{value:!0}),a);var k=m((v,c)=>{c.exports=_jsx_runtime});var b={};C(b,{default:()=>o,frontmatter:()=>E});var i=A(k()),E={published:!0,icon:"\u270D\uFE0F",title:"MDX Sample",description:"This is a sample of MDX that can be used on this site.",date:"2025-02-03T00:00:00+09:00",lastupdated:"2025-05-06T04:10:00+09:00",categories:["news"],tags:["mdx","sample"]};function p(a){let e={a:"a",blockquote:"blockquote",code:"code",del:"del",div:"div",em:"em",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",hr:"hr",iframe:"iframe",img:"img",li:"li","link-card":"link-card",mark:"mark",oembed:"oembed",ol:"ol",p:"p",pre:"pre",section:"section",span:"span",strong:"strong",sup:"sup",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...a.components},t=e["link-card"],{Counter:l,TabLayout:h,TwoGridLayout:n}=e;return l||s("Counter",!0),h||s("TabLayout",!0),n||s("TwoGridLayout",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.h2,{id:"overview",className:"content-header",children:["Overview",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#overview",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"This site provides sample MDX usage. More samples will be added sequentially."}),` `,(0,i.jsx)(e.p,{children:"Below, MDX syntax examples are presented."}),` `,(0,i.jsxs)(e.h2,{id:"headings",className:"content-header",children:["Headings",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#headings",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#FE640B"},children:"##"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#FE640B"},children:" Heading 2"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#DF8E1D"},children:"###"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#DF8E1D"},children:" Heading 3"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#40A02B"},children:"####"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#40A02B"},children:" Heading 4"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#209FB5"},children:"#####"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#209FB5"},children:" Heading 5"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#7287FD"},children:"######"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#7287FD"},children:" Heading 6"})]})]})})})}),(0,i.jsxs)("div",{children:[(0,i.jsxs)(e.h2,{id:"heading-2",className:"content-header",children:["Heading 2",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#heading-2",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),(0,i.jsxs)(e.h3,{id:"heading-3",className:"content-header",children:["Heading 3",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#heading-3",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),(0,i.jsxs)(e.h4,{id:"heading-4",className:"content-header",children:["Heading 4",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#heading-4",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),(0,i.jsxs)(e.h5,{id:"heading-5",className:"content-header",children:["Heading 5",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#heading-5",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),(0,i.jsxs)(e.h6,{id:"heading-6",className:"content-header",children:["Heading 6",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#heading-6",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]})]})]}),` `,(0,i.jsx)(e.p,{children:"Heading 1 is not used."}),` `,(0,i.jsx)(e.p,{children:`For SEO and usability reasons, start with h2 for headings. Also, avoid using headings beyond h5 as much as possible.`}),` `,(0,i.jsxs)(e.h2,{id:"styling",className:"content-header",children:["Styling",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#styling",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"**"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Bold"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"**"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"_"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Italic"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"_"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"**_"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Bold Italic"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"_**"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"~~"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Strikethrough"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"~~"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"`"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"inline code"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"`"})]})]})})})}),(0,i.jsxs)("div",{children:[(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Bold"})}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.em,{children:"Italic"})}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.em,{children:"Bold Italic"})})}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.del,{children:"Strikethrough"})}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"inline code"})})})})})]})]}),` `,(0,i.jsxs)(e.h2,{id:"lists",className:"content-header",children:["Lists",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#lists",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.h3,{id:"unordered-list",className:"content-header",children:["Unordered List",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#unordered-list",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"-"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" item 1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" item 1-1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" item 1-2"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"-"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" item 2"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" "})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" Text inside the item"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsxs)(e.li,{children:[` `,(0,i.jsx)(e.p,{children:"item 1"}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:"item 1-1"}),` `,(0,i.jsx)(e.li,{children:"item 1-2"}),` `]}),` `]}),` `,(0,i.jsxs)(e.li,{children:[` `,(0,i.jsx)(e.p,{children:"item 2"}),` `,(0,i.jsx)(e.p,{children:"Text inside the item"}),` `]}),` `]})})]}),` `,(0,i.jsxs)(e.h2,{id:"links",className:"content-header",children:["Links",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#links",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.h3,{id:"internal-link",className:"content-header",children:["Internal Link",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#internal-link",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"["}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Home"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"](/)"})]})})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.p,{children:(0,i.jsx)(e.a,{href:"/",children:"Home"})})})]}),` `,(0,i.jsxs)(e.h3,{id:"external-link",className:"content-header",children:["External Link",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#external-link",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"["}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Google"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"](https://google.com)"})]})})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.p,{children:(0,i.jsx)(e.a,{href:"https://google.com",children:"Google"})})})]}),` `,(0,i.jsxs)(e.h3,{id:"link-card",className:"content-header",children:["Link Card",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#link-card",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"A link card is a component that displays information about the linked destination. By simply writing the URL, a link card is automatically generated."}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"https://github.com/"})})})})})}),(0,i.jsxs)("div",{children:[(0,i.jsx)(t,{href:"https://github.com/",url:"https://github.com/",children:"https://github.com/"}),(0,i.jsx)(e.p,{})]})]}),` `,(0,i.jsxs)(e.h2,{id:"images",className:"content-header",children:["Images",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#images",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"!["}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Dev placeholder Image"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"](/dev-placeholder.png)"})]})})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"/dev-placeholder.png",alt:"Dev placeholder Image"})})})]}),` `,(0,i.jsxs)(e.h2,{id:"tables",className:"content-header",children:["Tables",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#tables",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"| Header 1 | Header 2 | Header 3 |"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"| :------- | :------: | -------: |"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"| 1-1 | 1-2 | 1-3 |"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"| 2-1 | 2-2 | 2-3 |"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.div,{className:"overflow-x-auto my-5",children:(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{style:{textAlign:"left"},children:"Header 1"}),(0,i.jsx)(e.th,{style:{textAlign:"center"},children:"Header 2"}),(0,i.jsx)(e.th,{style:{textAlign:"right"},children:"Header 3"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"left"},children:"1-1"}),(0,i.jsx)(e.td,{style:{textAlign:"center"},children:"1-2"}),(0,i.jsx)(e.td,{style:{textAlign:"right"},children:"1-3"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"left"},children:"2-1"}),(0,i.jsx)(e.td,{style:{textAlign:"center"},children:"2-2"}),(0,i.jsx)(e.td,{style:{textAlign:"right"},children:"2-3"})]})]})]})})})]}),` `,(0,i.jsxs)(e.h2,{id:"code-blocks",className:"content-header",children:["Code Blocks",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#code-blocks",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.h3,{id:"basic",className:"content-header",children:["Basic",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#basic",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can write a code block by enclosing it with three backticks."}),` `,(0,i.jsxs)(e.p,{children:["By specifying the language, syntax highlighting by ",(0,i.jsx)(e.a,{href:"https://shiki.matsu.io/",children:"Shiki"})," will be applied."]}),` `,(0,i.jsx)(e.p,{children:"If no language is specified, it will be displayed as plain text."}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:'console.log("Hello World!!");'})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"console.log('Hello World!!');"})})})})})})]}),` `,(0,i.jsxs)(e.h3,{id:"title",className:"content-header",children:["Title",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#title",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"js"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:' title="sample.tsx"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"Hello World!!"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:"sample.tsx"}),(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"js","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]})})})]})})]}),` `,(0,i.jsxs)(e.h3,{id:"line-numbers",className:"content-header",children:["Line Numbers",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#line-numbers",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"js"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" showLineNumbers"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"Hello World!!"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-line-numbers":"","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]})})})})})]}),` `,(0,i.jsxs)(e.h3,{id:"highlight-lines",className:"content-header",children:["Highlight Lines",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#highlight-lines",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"js"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" {1}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"Hello World!!"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"js","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"","data-highlighted-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]})})})})})]}),` `,(0,i.jsxs)(e.h3,{id:"highlight-words",className:"content-header",children:["Highlight Words",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#highlight-words",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"js"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" /Hello/ /Apple/ /World/3-3"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello, World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello, Apple!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'GoodNight, World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"js","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'"}),(0,i.jsx)(e.mark,{"data-highlighted-chars":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"Hello"})}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:", World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'"}),(0,i.jsx)(e.mark,{"data-highlighted-chars":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"Hello"})}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:", "}),(0,i.jsx)(e.mark,{"data-highlighted-chars":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"Apple"})}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'GoodNight, "}),(0,i.jsx)(e.mark,{"data-highlighted-chars":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"World"})}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]})]})})})})]}),` `,(0,i.jsxs)(e.h3,{id:"diff",className:"content-header",children:["Diff",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#diff",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"plaintext"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"// js is written, but the comment is removed, so it is written in plaintext"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"console.log('Hello'); // [!code --]"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"console.log('World!!'); // [!code ++]"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"console.log('Diff!!');"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"has-diff",tabIndex:"0","data-language":"js","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"js","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{className:"diff remove","data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Hello'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{className:"diff add","data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'World!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#4C4F69"},children:"console"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"log"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'Diff!!'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]})]})})})})]}),` `,(0,i.jsxs)(e.h3,{id:"multiple-attributes",className:"content-header",children:["Multiple Attributes",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#multiple-attributes",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"Multiple attributes can be specified simultaneously."}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"tsx"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:' title="hello.tsx" showLineNumbers {1-2}'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" Hello"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-dark-font-style":"italic","--shiki-light":"#E64553","--shiki-light-font-style":"italic"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-dark-font-style":"inherit","--shiki-light":"#4C4F69","--shiki-light-font-style":"italic"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#8839EF"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" })"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Hello, "}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"!"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"```"})})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",children:"hello.tsx"}),(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,i.jsxs)(e.span,{"data-line":"","data-highlighted-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" Hello"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" ({"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-dark-font-style":"italic","--shiki-light":"#E64553","--shiki-light-font-style":"italic"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-dark-font-style":"inherit","--shiki-light":"#4C4F69","--shiki-light-font-style":"italic"},children:" name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#8839EF"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" })"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"","data-highlighted-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Hello, "}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"name"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"!"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"};"})})]})})]})})]}),` `,(0,i.jsxs)(e.h2,{id:"math",className:"content-header",children:["Math",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#math",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"Can be written mathematic formulas."}),` `,(0,i.jsx)(e.p,{children:"To be added."}),` `,(0,i.jsxs)(e.h3,{id:"inline-math",className:"content-header",children:["Inline Math",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#inline-math",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.h3,{id:"block-math",className:"content-header",children:["Block Math",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#block-math",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.h2,{id:"blockquotes",className:"content-header",children:["Blockquotes",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#blockquotes",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#EA76CB"},children:"> Blockquote 1"})})})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(e.blockquote,{children:[` `,(0,i.jsx)(e.p,{children:"Blockquote 1"}),` `]})})]}),` `,(0,i.jsxs)(e.h2,{id:"footnotes",className:"content-header",children:["Footnotes",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#footnotes",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Footnotes 1"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"[^"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"1"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"]"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"[^"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"1"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:": Footnotes text"})]})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(e.p,{children:["Footnotes 1",(0,i.jsx)(e.sup,{children:(0,i.jsx)(e.a,{href:"#user-content-fn-1",id:"user-content-fnref-1","data-footnote-ref":!0,"aria-describedby":"footnote-label",children:"1"})})]})})]}),` `,(0,i.jsxs)(e.h2,{id:"horizontal-line",className:"content-header",children:["Horizontal Line",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#horizontal-line",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"---"})})})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.hr,{})})]}),` `,(0,i.jsxs)(e.h2,{id:"comment-out",className:"content-header",children:["Comment Out",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#comment-out",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:"/* Comment Out */"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"}"})]})})})})}),(0,i.jsx)("div",{})]}),` `,(0,i.jsxs)(e.h2,{id:"about-front-matter",className:"content-header",children:["About Front Matter",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#about-front-matter",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"Front matter is YAML-formatted metadata written at the beginning of an MDX file."}),` `,(0,i.jsx)(e.p,{children:"Specify information such as the title of the article and the date and time of posting."}),` `,(0,i.jsxs)(e.h3,{id:"example",className:"content-header",children:["Example",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#example",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.p,{children:["Describe the content in the following format, similar to the example enclosed by ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"---"})})})})," at the beginning of the file."]}),` `,(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"yaml","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"yaml","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#EA76CB"},children:"---"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"published"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-light":"#FE640B"},children:" true"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"icon"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" '\u270D\uFE0F'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'MDX Sample'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"description"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'This is a sample of MDX that can be used on this site.'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"date"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" '2025-02-03T00:00:00+09:00'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"lastupdated"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" '2025-02-15T23:50:00+09:00'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"categories"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'news'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"tags"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'mdx'"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'sample'"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#EA76CB"},children:"---"})})]})})}),` `,(0,i.jsxs)(e.h3,{id:"available-properties",className:"content-header",children:["Available Properties",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#available-properties",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"The following properties are available on this site."}),` `,(0,i.jsx)(e.div,{className:"overflow-x-auto my-5",children:(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Property"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Value"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"published"})})})})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"true"})})})})," or ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"false"})})})})]}),(0,i.jsxs)(e.td,{children:["Specifies whether the article is published. If not, it's in ",(0,i.jsx)(e.em,{children:"draft mode"})]})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"icon"})})})})}),(0,i.jsx)(e.td,{}),(0,i.jsxs)(e.td,{children:["Unicode Emoji ",(0,i.jsx)("br",{})," Example: ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"🎉"})})})})," -> \u{1F389}"]}),(0,i.jsx)(e.td,{children:"Specifies the article's icon."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"title"})})})})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"string"})})})})}),(0,i.jsx)(e.td,{children:"Specifies the article title."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"date"})})})})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"YYYY-MM-DDTHH:mm:ss+09:00"})})})})}),(0,i.jsx)(e.td,{children:"Specifies the article's publication date."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"lastupdated"})})})})}),(0,i.jsx)(e.td,{}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"YYYY-MM-DDTHH:mm:ss+09:00"})})})})}),(0,i.jsx)(e.td,{children:"Specifies the article's last update date."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"categories"})})})})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsxs)(e.td,{children:["List of ",(0,i.jsx)(e.a,{href:"#Categories",children:"Categories"})]}),(0,i.jsxs)(e.td,{children:["Specifies the article's categories.",(0,i.jsx)("br",{}),"Please check available categories."]})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"tags"})})})})}),(0,i.jsx)(e.td,{children:"true"}),(0,i.jsx)(e.td,{children:"List of Tags"}),(0,i.jsx)(e.td,{children:"Specifies the article's tags."})]})]})]})}),` `,(0,i.jsxs)(e.h3,{id:"categories",className:"content-header",children:["Categories",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#categories",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"The following categories are available."}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"news"})})})})," : News"]}),` `,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"events"})})})})," : Events"]}),` `,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"activities"})})})})," : Activities"]}),` `]}),` `,(0,i.jsxs)(e.h2,{id:"callouts",className:"content-header",children:["Callouts",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#callouts",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"Callouts are styles used to highlight specific text."}),` `,(0,i.jsx)(e.p,{children:"To be added."}),` `,(0,i.jsxs)(e.h2,{id:"embedding",className:"content-header",children:["Embedding",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#embedding",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.p,{children:["Embedding is a feature that allows you to display external content within an article. By simply writing the URL of a site that supports ",(0,i.jsx)(e.a,{href:"https://oembed.com/",children:"oEmbed"}),", the embedding is automatically generated."]}),` `,(0,i.jsx)(e.p,{children:"Currently, except for YouTube embeds, the content is loaded only after the user interacts with it. This is to prevent delays in the initial page load caused by external resource loading."}),` `,(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"https://www.youtube.com/watch?v=cyFVtaLy-bA"})})})})}),` `,(0,i.jsxs)(e.h3,{id:"youtube",className:"content-header",children:["YouTube",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#youtube",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can embed YouTube videos and playlists."}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"https://www.youtube.com/watch?v=**"})})})})}),` `]}),(0,i.jsx)(e.p,{}),(0,i.jsx)(e.iframe,{href:"https://www.youtube.com/watch?v=cyFVtaLy-bA",src:"https://www.youtube.com/embed/cyFVtaLy-bA",width:"100%",style:{aspectRatio:"16/9",borderRadius:"1rem",border:"2px solid var(--border-primary)"},loading:"lazy",title:"YouTube video embed",url:"https://www.youtube.com/watch?v=cyFVtaLy-bA",children:"https://www.youtube.com/watch?v=cyFVtaLy-bA"}),(0,i.jsx)(e.p,{}),(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"https://www.youtube.com/playlist?list=**"})})})})}),` `]}),(0,i.jsx)(e.p,{}),(0,i.jsx)(e.iframe,{href:"https://www.youtube.com/playlist?list=PLBnKlKpPeagnLaepqAW11qPxJOymt0lXJ",src:"https://www.youtube.com/embed/videoseries?list=PLBnKlKpPeagnLaepqAW11qPxJOymt0lXJ",width:"100%",style:{aspectRatio:"16/9",borderRadius:"1rem",border:"2px solid var(--border-primary)"},loading:"lazy",title:"YouTube video embed",url:"https://www.youtube.com/playlist?list=PLBnKlKpPeagnLaepqAW11qPxJOymt0lXJ",children:"https://www.youtube.com/playlist?list=PLBnKlKpPeagnLaepqAW11qPxJOymt0lXJ"}),(0,i.jsx)(e.p,{}),(0,i.jsxs)(e.h3,{id:"canva",className:"content-header",children:["Canva",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#canva",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can embed Canva designs and slides."}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"https://www.canva.com/design/**"})})})})}),` `]}),(0,i.jsx)(e.p,{}),(0,i.jsx)(t,{href:"https://www.canva.com/design/DAGNnFrStoQ/ODj9paJuyINBcCqIg5tLHw/view",url:"https://www.canva.com/design/DAGNnFrStoQ/ODj9paJuyINBcCqIg5tLHw/view",children:"https://www.canva.com/design/DAGNnFrStoQ/ODj9paJuyINBcCqIg5tLHw/view"}),(0,i.jsx)(e.p,{}),(0,i.jsxs)(e.h3,{id:"codepen",className:"content-header",children:["CodePen",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#codepen",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can embed CodePen pens."}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"https://codepen.io/pen/"})})})})}),` `]}),(0,i.jsx)(e.p,{}),(0,i.jsx)(e.oembed,{href:"https://codepen.io/rcyou/pen/QEObEZ",oEmbed:'{"type":"rich","version":"1.0","provider_name":"CodePen","provider_url":"https://codepen.io","title":"A Simple CodePen Example (feat. HTML, CSS, & JavaScript)","author_name":"Ryan Young","author_url":"https://codepen.io/rcyou","height":300,"width":800,"thumbnails":[{"width":384,"height":225,"url":"https://shots.codepen.io/username/pen/QEObEZ-512.jpg?version=1468346461"}],"html":""}',url:"https://codepen.io/rcyou/pen/QEObEZ",children:"https://codepen.io/rcyou/pen/QEObEZ"}),(0,i.jsx)(e.p,{}),(0,i.jsxs)(e.h3,{id:"spotify",className:"content-header",children:["Spotify",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#spotify",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can embed Spotify playlists."}),` `,(0,i.jsxs)(e.ul,{children:[` `,(0,i.jsx)(e.li,{children:(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"https://open.spotify.com/playlist/"})})})})}),` `]}),(0,i.jsx)(e.p,{}),(0,i.jsx)(e.oembed,{href:"https://open.spotify.com/playlist/37i9dQZEVXbKXQ4mDTEBXq",oEmbed:'{"html":"","width":456,"height":352,"version":"1.0","provider_name":"Spotify","provider_url":"https://spotify.com","type":"rich","title":"Top 50 - Japan","thumbnails":[{"url":"https://charts-images.scdn.co/assets/locale_en/regional/daily/region_jp_default.jpg","width":300,"height":300}]}',url:"https://open.spotify.com/playlist/37i9dQZEVXbKXQ4mDTEBXq",children:"https://open.spotify.com/playlist/37i9dQZEVXbKXQ4mDTEBXq"}),(0,i.jsx)(e.p,{}),(0,i.jsxs)(e.h2,{id:"mdx--jsx",className:"content-header",children:["MDX / JSX",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#mdx--jsx",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"MDX is a format that allows embedding React Components and JSX inside Markdown."}),` `,(0,i.jsx)(e.p,{children:"This site provides the following custom components by default."}),` `,(0,i.jsxs)(e.h3,{id:"tab-layout",className:"content-header",children:["Tab Layout",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#tab-layout",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"A component that allows switching between multiple contents using tabs."}),` `,(0,i.jsx)(e.p,{children:"\u203B This may negatively impact UX."}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:"/* prettier-ignore */"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#EA76CB"},children:"TabLayout"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"TSX"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"tsx"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:' title="Counter.tsx" showLineNumbers'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'use client'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:" // ..."})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"Result"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#EA76CB"},children:"Counter"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"Image"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" !["}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Sample Image"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"](/dev-placeholder.png)"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""})]})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(h,{children:[(0,i.jsx)("div",{title:"TSX",children:(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",children:"Counter.tsx"}),(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"'use client'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" 'react'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" Counter"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#FE640B"},children:"count"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#FE640B"},children:" setCount"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-light":"#FE640B"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"p"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"text-2xl font-bold"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"Counter"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"flex items-center gap-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"button"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"rounded-md bg-card p-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" setCount"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"count"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-light":"#FE640B"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" -"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"count"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"button"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:'"rounded-md bg-card p-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-dark-font-style":"italic","--shiki-light":"#DF8E1D","--shiki-light-font-style":"inherit"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:" setCount"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:"count"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#D19A66","--shiki-light":"#FE640B"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#7C7F93"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" +"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" )"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"};"})})]})})]})}),(0,i.jsx)("div",{title:"Result",children:(0,i.jsx)(l,{})}),(0,i.jsx)("div",{title:"Image",children:(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"/dev-placeholder.png",alt:"Sample Image"})})})]})})]}),` `,(0,i.jsxs)(e.h3,{id:"two-column-layout",className:"content-header",children:["Two-Column Layout",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#two-column-layout",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"A component that provides a two-column layout."}),` `,` `,(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"mdx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:"/* prettier-ignore */"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#EA76CB"},children:"TwoGridLayout"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"plaintext"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" Left"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#1E66F5"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#61AFEF","--shiki-dark-font-style":"inherit","--shiki-light":"#1E66F5","--shiki-light-font-style":"italic"},children:"plaintext"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#4C4F69"},children:" Right"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" ```"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#179299"},children:""})]})]})})})}),(0,i.jsx)("div",{children:(0,i.jsxs)(n,{children:[(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"Left"})})})})})}),(0,i.jsx)("div",{children:(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"Right"})})})})})})]})})]}),` `,(0,i.jsxs)(e.h3,{id:"adding-custom-components",className:"content-header",children:["Adding Custom Components",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#adding-custom-components",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsx)(e.p,{children:"You can add your own custom components."}),` `,(0,i.jsxs)(e.p,{children:["Currently, due to the pre-processing of articles into JSON dynamically, components cannot be imported within MDX files using ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"import"})})})}),"."]}),` `,(0,i.jsx)(e.p,{children:(0,i.jsx)(e.strong,{children:"Implementation Steps"})}),` `,(0,i.jsxs)(e.ol,{children:[` `,(0,i.jsxs)(e.li,{children:[` `,(0,i.jsxs)(e.p,{children:["Create a component file inside ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"contents/components"})})})})]}),` `]}),` `,(0,i.jsxs)(e.li,{children:[` `,(0,i.jsxs)(e.p,{children:["Add the component to ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"contents/components/index.tsx"})})})})]}),` `,(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"one-dark-pro catppuccin-latte",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:" Counter"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#40A02B"},children:" './Counter'"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:"/**"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:" * Content components"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:" * An object that aggregates components used in Posts and Pages."})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:" */"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#C678DD","--shiki-light":"#8839EF"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#FE640B"},children:" ContentComponents"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#179299"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:" {"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#7F848E","--shiki-dark-font-style":"italic","--shiki-light":"#7C7F93","--shiki-light-font-style":"italic"},children:" // Below add your components"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#4C4F69"},children:" Counter"}),(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-dark":"#ABB2BF","--shiki-light":"#7C7F93"},children:"};"})})]})})}),` `]}),` `,(0,i.jsxs)(e.li,{children:[` `,(0,i.jsxs)(e.p,{children:["The component will now be available across ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"posts"})})})})," and ",(0,i.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.code,{"data-language":"plaintext","data-theme":"one-dark-pro catppuccin-latte",children:(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{children:"pages"})})})}),"."]}),` `]}),` `]}),` `,(0,i.jsxs)(e.section,{"data-footnotes":!0,className:"footnotes",children:[(0,i.jsxs)(e.h2,{className:"content-header",id:"footnote-label",children:["Footnotes",(0,i.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#footnote-label",children:(0,i.jsx)(e.span,{className:"content-header-icon"})})]}),` `,(0,i.jsxs)(e.ol,{children:[` `,(0,i.jsxs)(e.li,{id:"user-content-fn-1",children:[` `,(0,i.jsxs)(e.p,{children:["Footnotes text ",(0,i.jsx)(e.a,{href:"#user-content-fnref-1","data-footnote-backref":"","aria-label":"Back to reference 1",className:"data-footnote-backref",children:"\u21A9"})]}),` `]}),` `]}),` `]})]})}function o(a={}){let{wrapper:e}=a.components||{};return e?(0,i.jsx)(e,{...a,children:(0,i.jsx)(p,{...a})}):p(a)}function s(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(b);})(); ;return Component;

📢News.

May 2025

Announcing "riku-mono.me"

February 2025

MDX Sample

News.