'}),"\u3068\u3044\u3046\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u8FD4\u3057\u3066\u3044\u307E\u3059\u3002"]}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"toc",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"ol"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"toc-list",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"}),` ... `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{children:"4"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{children:"5"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u5B9F\u969B\u306E html \u306B\u5909\u63DB\u3055\u308C\u308B\u3068\u69CB\u9020\u306F\u4E0A\u8A18\u306E\u3088\u3046\u306B",(0,e.jsx)(n.code,{children:'

...

'}),"\u3067\u56F2\u3046\u7D50\u679C\u306B\u306A\u308A\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.h4,{id:"contentselector",children:[(0,e.jsx)(n.a,{className:"anchor","aria-hidden":!0,tabIndex:"-1",href:"#contentselector",children:(0,e.jsx)(n.span,{className:"anchor-text","aria-hidden":!0})}),"contentSelector"]}),` `,(0,e.jsxs)(n.p,{children:["\u76EE\u6B21\u3092\u751F\u6210\u3059\u308B\u5BFE\u8C61\u306E heading \u8981\u7D20\u3092\u6301\u3064 DOM \u306E CSS \u30AF\u30E9\u30B9\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002\u3053\u306E\u5834\u5408\u306F",(0,e.jsx)(n.code,{children:".post"}),"\u3067\u3059\u3002"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"post.tsx"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Layout"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"article"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"headingXl"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"meta",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"title"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{children:"4"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"LightText"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"lightText"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{children:"5"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"meta",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"tags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"t",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{children:"6"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Tag"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"t",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"tag"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"t",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{children:"7"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{children:"8"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"br"]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{children:"9"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Date"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"date"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"meta",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"date"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{children:"10"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{children:"11"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"post",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{children:"12"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MDXProvider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"components"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponents"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{children:"13"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{children:"14"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{children:"15"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"ImageOverlay"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[(0,e.jsx)(n.span,{children:"16"}),(0,e.jsx)(n.span,{className:"token plain-text"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u3053\u306E",(0,e.jsx)(n.a,{href:"https://github.com/kimizuy/blog.kimizuy.dev/blob/main/src/components/post.tsx",children:"\u30D6\u30ED\u30B0\u306E\u5B9F\u88C5"}),"\u3092\u4F8B\u306B\u3059\u308B\u3068\u3001\u8A18\u4E8B\u30B3\u30F3\u30C6\u30F3\u30C4\u306F",(0,e.jsx)(n.code,{children:"{children}"}),"\u3067\u8868\u793A\u3055\u308C\u307E\u3059\u3002\u305D\u306E\u76F4\u4E0A\u306B",(0,e.jsx)(n.code,{children:'

'}),"\u3092\u914D\u7F6E\u3059\u308B\u3053\u3068\u3067 tocbot \u306B\u8A18\u4E8B\u30B3\u30F3\u30C6\u30F3\u30C4\u306E heading \u30BF\u30B0\u3092\u8A8D\u8B58\u3057\u3066\u3082\u3089\u3044\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:""})," \u306F\u30B9\u30BF\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3067\u3059\u3002\u3072\u3068\u307E\u305A\u7121\u8996\u3057\u3066\u5927\u4E08\u592B\u3067\u3059\u3002"]}),` `,(0,e.jsxs)(n.h4,{id:"headingselector",children:[(0,e.jsx)(n.a,{className:"anchor","aria-hidden":!0,tabIndex:"-1",href:"#headingselector",children:(0,e.jsx)(n.span,{className:"anchor-text","aria-hidden":!0})}),"headingSelector"]}),` `,(0,e.jsxs)(n.p,{children:["\u3069\u306E heading \u30BF\u30B0\u3092\u76EE\u6B21\u3068\u3057\u3066\u751F\u6210\u3059\u308B\u304B\u3092\u6307\u5B9A\u3057\u307E\u3059\u3002\u4F8B\u3048\u3070",(0,e.jsx)(n.code,{children:"'h2, h3, h4'"}),"\u3068\u3059\u308B\u3068 h1 \u3084 h5 \u306F\u7121\u8996\u3055\u308C\u307E\u3059\u3002"]}),` `,(0,e.jsxs)(n.h2,{id:"heading-\u30BF\u30B0\u306E-id-\u5C5E\u6027\u306B\u898B\u51FA\u3057\u6587\u5B57\u5217\u3092\u8A2D\u5B9A\u3059\u308B",children:[(0,e.jsx)(n.a,{className:"anchor","aria-hidden":!0,tabIndex:"-1",href:"#heading-\u30BF\u30B0\u306E-id-\u5C5E\u6027\u306B\u898B\u51FA\u3057\u6587\u5B57\u5217\u3092\u8A2D\u5B9A\u3059\u308B",children:(0,e.jsx)(n.span,{className:"anchor-text","aria-hidden":!0})}),"heading \u30BF\u30B0\u306E id \u5C5E\u6027\u306B\u898B\u51FA\u3057\u6587\u5B57\u5217\u3092\u8A2D\u5B9A\u3059\u308B"]}),` `,(0,e.jsxs)(n.p,{children:[`\u76EE\u6B21\u306B\u30DA\u30FC\u30B8\u5185\u30EA\u30F3\u30AF\u3068\u3057\u3066\u306E\u6A5F\u80FD\u3092\u6301\u305F\u305B\u308B\u305F\u3081\u306B\u5FC5\u8981\u3067\u3059\u3002 \u4ED6\u306E\u30DE\u30FC\u30AF\u30C0\u30A6\u30F3\u5909\u63DB\u30E9\u30A4\u30D6\u30E9\u30EA\u3001\u4F8B\u3048\u3070 `,(0,e.jsx)(n.a,{href:"https://github.com/remarkjs/remark",children:"remark"})," \u3092\u5229\u7528\u3057\u3066\u3044\u308B\u5834\u5408\u306F ",(0,e.jsx)(n.a,{href:"https://github.com/remarkjs/remark-autolink-headings",children:"remark-autolink-headings"}),` \u306A\u3069\u3092\u4F7F\u3046\u3068\u826F\u3044\u3067\u3057\u3087\u3046\u3002 \u4ECA\u56DE\u306F MDX \u3092\u5229\u7528\u3057\u3066\u3044\u308B\u5834\u5408\u3092\u7D39\u4ECB\u3057\u307E\u3059\u3002`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"mdxComponents.tsx"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponents"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Components"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"h1"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{children:"4"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{children:"5"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"h1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{children:"6"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{children:"7"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{children:"8"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{children:"9"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{children:"10"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"h2"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{children:"11"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{children:"12"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h2"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"h2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{children:"13"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{children:"14"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{children:"15"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[(0,e.jsx)(n.span,{children:"16"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{children:"17"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"h3"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{children:"18"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{children:"19"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h3"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"h3"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[(0,e.jsx)(n.span,{children:"20"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{children:"21"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{children:"22"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{children:"23"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[(0,e.jsx)(n.span,{children:"24"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{children:"25"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"post.tsx"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"post",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MDXProvider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"components"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponents"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"}),(0,e.jsx)(n.span,{className:"token plain-text"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"props.children"}),"\u306B\u898B\u51FA\u3057\u306E\u6587\u5B57\u5217\u304C\u6E21\u3055\u308C\u307E\u3059\u3002\u305D\u308C\u3092 id \u306B\u8A2D\u5B9A\u3057\u3066\u3044\u307E\u3059\u3002"]}),` `,(0,e.jsx)(n.p,{children:"\u4F8B\u3048\u3070\u6B21\u306E\u3088\u3046\u306B\u30DE\u30FC\u30AF\u30C0\u30A6\u30F3\u30D5\u30A1\u30A4\u30EB\u306F HTML \u306B\u5909\u63DB\u3055\u308C\u307E\u3059\u3002"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"mdx"}),(0,e.jsx)(n.pre,{className:"language-md",children:(0,e.jsxs)(n.code,{className:"language-md code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token title important",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"##"})," \u898B\u51FA\u3057"]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"}),`\u672C\u6587\u3067\u3059\u3002 `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{children:"4"}),` `]})]})}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"\u898B\u51FA\u3057",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"mdxComponents_h1__2IZ3_",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\u898B\u51FA\u3057",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\u672C\u6587\u3067\u3059",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"\u3053\u308C\u3092 tocbot \u304C\u3044\u3044\u611F\u3058\u306B\u8AAD\u307F\u8FBC\u307E\u3059\u3002"}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsx)(n.code,{className:"language-html code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"a"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"#\u898B\u51FA\u3057",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"toc-link node-name--H1 ",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\u898B\u51FA\u3057",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"\u3068\u3044\u3046\u30EA\u30F3\u30AF\u3092\u751F\u6210\u3057\u307E\u3059\u3002"}),` `,(0,e.jsxs)(n.h2,{id:"\u4F8B",children:[(0,e.jsx)(n.a,{className:"anchor","aria-hidden":!0,tabIndex:"-1",href:"#\u4F8B",children:(0,e.jsx)(n.span,{className:"anchor-text","aria-hidden":!0})}),"\u4F8B"]}),` `,(0,e.jsx)(n.p,{children:"\u624B\u524D\u5473\u564C\u306A\u304C\u3089\u3001\u3053\u306E\u30D6\u30ED\u30B0\u306E\u5B9F\u88C5\u3092\u7D39\u4ECB\u3057\u307E\u3059\u3002"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"toc.tsx"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{children:"1"}),(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useEffect ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{children:"2"}),(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"tocbot"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'tocbot'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{children:"3"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{children:"4"}),(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Toc"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method-variable function-variable method function property-access",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"VFC"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{children:"5"})," ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{children:"6"})," tocbot",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"init"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{children:"7"})," tocSelector",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'.toc'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{children:"8"})," contentSelector",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'.post'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{children:"9"})," headingSelector",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'h1, h2, h3'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{children:"10"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{children:"11"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{children:"12"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," tocbot",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"destroy"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{children:"13"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{children:"14"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{children:"15"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[(0,e.jsx)(n.span,{children:"16"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{children:"17"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"toc",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{children:"18"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"style"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"jsx"})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"global"}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"{`\n"})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{children:"19"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .toc { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[(0,e.jsx)(n.span,{children:"20"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` background-color: var(--content-bg-primary); `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{children:"21"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` border: 1px solid var(--content-border); `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{children:"22"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` border-radius: 0.25rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{children:"23"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` padding: 1rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[(0,e.jsx)(n.span,{children:"24"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` font-size: 0.875rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{children:"25"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[(0,e.jsx)(n.span,{children:"26"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[(0,e.jsx)(n.span,{children:"27"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .toc-list .toc-list { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[(0,e.jsx)(n.span,{children:"28"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` padding-left: 1rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[(0,e.jsx)(n.span,{children:"29"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` padding-top: 0.5rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[(0,e.jsx)(n.span,{children:"30"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"31",children:[(0,e.jsx)(n.span,{children:"31"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"32",children:[(0,e.jsx)(n.span,{children:"32"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .toc-list-item { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"33",children:[(0,e.jsx)(n.span,{children:"33"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` padding-bottom: 0.5rem; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"34",children:[(0,e.jsx)(n.span,{children:"34"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"35",children:[(0,e.jsx)(n.span,{children:"35"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"36",children:[(0,e.jsx)(n.span,{children:"36"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .toc-list-item:last-child { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"37",children:[(0,e.jsx)(n.span,{children:"37"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` padding-bottom: 0; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"38",children:[(0,e.jsx)(n.span,{children:"38"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"39",children:[(0,e.jsx)(n.span,{children:"39"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"40",children:[(0,e.jsx)(n.span,{children:"40"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .toc-link { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"41",children:[(0,e.jsx)(n.span,{children:"41"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` color: var(--text-secondary); `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"42",children:[(0,e.jsx)(n.span,{children:"42"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"43",children:[(0,e.jsx)(n.span,{children:"43"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"44",children:[(0,e.jsx)(n.span,{children:"44"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` .is-active-link { `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"45",children:[(0,e.jsx)(n.span,{children:"45"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` color: var(--text-primary); `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"46",children:[(0,e.jsx)(n.span,{children:"46"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` font-weight: 700; `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"47",children:[(0,e.jsx)(n.span,{children:"47"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` } `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"48",children:[(0,e.jsx)(n.span,{children:"48"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" `}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"49",children:[(0,e.jsx)(n.span,{children:"49"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"50",children:[(0,e.jsx)(n.span,{children:"50"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"51",children:[(0,e.jsx)(n.span,{children:"51"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"\u8272\u306B CSS \u5909\u6570\u3092\u4F7F\u3063\u3066\u3044\u308B\u306E\u3067\u30B3\u30D4\u30DA\u3067\u306F\u4F7F\u3048\u307E\u305B\u3093\u3002\u9069\u5B9C\u7F6E\u304D\u63DB\u3048\u3066\u304F\u3060\u3055\u3044\u3002"}),` `,(0,e.jsxs)(n.h2,{id:"\u307E\u3068\u3081",children:[(0,e.jsx)(n.a,{className:"anchor","aria-hidden":!0,tabIndex:"-1",href:"#\u307E\u3068\u3081",children:(0,e.jsx)(n.span,{className:"anchor-text","aria-hidden":!0})}),"\u307E\u3068\u3081"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"tocbot.init()"}),"\u6642\u306B\u76EE\u6B21\u306E DOM \u3068\u30B3\u30F3\u30C6\u30F3\u30C4\u306E DOM \u306E CSS \u30AF\u30E9\u30B9\u3092\u6307\u5B9A\u3059\u308B"]}),` `,(0,e.jsx)(n.li,{children:"heading \u30BF\u30B0\u306B\u3061\u3083\u3093\u3068 id \u5C5E\u6027\u3092\u8A2D\u5B9A\u3059\u308B"}),` `]})]})}function v(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var w=v;return y(D);})(); ;return Component;

#mdx