1:"$Sreact.fragment" 2:I[31,[],""] 3:I[3331,[],""] 4:I[1730,["771","static/chunks/771-ea220fc1ce9f84f5.js","584","static/chunks/app/blog/layout-5cef4dc08b65889b.js"],"GoogleAnalytics"] 6:I[6045,[],"OutletBoundary"] 8:I[923,[],"AsyncMetadataOutlet"] a:I[6045,[],"ViewportBoundary"] c:I[6045,[],"MetadataBoundary"] d:"$Sreact.suspense" f:I[4293,[],""] :HL["/_next/static/css/46a7e12bb88c5b4f.css","style"] 0:{"P":null,"b":"aJhzzw8f2U44tx2RVd8Jd","p":"","c":["","blog","0004"],"i":false,"f":[[["",{"children":["blog",{"children":[["slug","0004","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true]}],["",["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["blog",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/46a7e12bb88c5b4f.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"children":[["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L4",null,{"gaId":"G-8HT6Z1EJBQ"}]]}]]}],{"children":[["slug","0004","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L5",null,["$","$L6",null,{"children":["$L7",["$","$L8",null,{"promise":"$@9"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$La",null,{"children":"$Lb"}],null],["$","$Lc",null,{"children":["$","div",null,{"hidden":true,"children":["$","$d",null,{"fallback":null,"children":"$Le"}]}]}]]}],false]],"m":"$undefined","G":["$f",[]],"s":false,"S":true} 10:I[4742,["742","static/chunks/742-371c6136941b441c.js","953","static/chunks/app/blog/%5Bslug%5D/page-597c8504c0e17404.js"],""] 5:["$","div",null,{"className":"text-black bg-zinc-200","children":[["$","div",null,{"className":"pt-2 pb-2 pl-3 pr-3 ","children":["$","$L10",null,{"href":"/","className":"hover:text-gray-500","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-house","aria-hidden":"true","children":[["$","path","5wwlr5",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["$","path","1d0kgt",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}],"$undefined"]}]}]}],["$","div",null,{"className":"p-3","children":[["$","div",null,{"className":"text-center text-3xl","children":"✍🏻"}],["$","div",null,{"className":"text-4xl font-bold text-center pt-2 pb-2","children":"Markdownでブログ記事を作ってみたい!"}],["$","div",null,{"className":"text-right pb-3","children":[["$","div",null,{"children":["公開日 ","2025/08/07"]}],["$","div",null,{"children":["更新日 ","2025/08/07"]}]]}],["$","div",null,{"data-slot":"card","className":"flex flex-col gap-6 border py-6 shadow-sm text-black bg-zinc-100 border-none rounded","children":[["$","div",null,{"data-slot":"card-header","className":"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 px-3 md:px-6","children":["$","div",null,{"className":"flex w-full flex-wrap gap-2","children":[["$","span","0",{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-secondary/90 bg-teal-600 text-white dark:bg-blue-600","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-badge-check","aria-hidden":"true","children":[["$","path","3c2336",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["$","path","dzmm74",{"d":"m9 12 2 2 4-4"}],"$undefined"]}],"プログラミング"]}],["$","span","1",{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-secondary/90 bg-teal-600 text-white dark:bg-blue-600","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-badge-check","aria-hidden":"true","children":[["$","path","3c2336",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["$","path","dzmm74",{"d":"m9 12 2 2 4-4"}],"$undefined"]}],"MDX"]}],["$","span","2",{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-secondary/90 bg-teal-600 text-white dark:bg-blue-600","children":["$L11","ブログ"]}]]}]}],"$L12","$L13"]}]]}],"$L14"]}] 11:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-badge-check","aria-hidden":"true","children":[["$","path","3c2336",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["$","path","dzmm74",{"d":"m9 12 2 2 4-4"}],"$undefined"]}] 12:["$","div",null,{"data-slot":"card-content","className":"px-3 md:px-6","children":[["$","div",null,{"className":"p-1","children":"開発中に学んだ新しいことをブログとして公開し、\r\n自分だけでなく色々な人にも共有したい!"}],"\n",["$","div",null,{"className":"p-1","children":"これまでパソコンでメモやノートをとる際に使ってきたMarkdown。\r\n「これでブログ記事を書くことが出来れば!」と考えていたが、\r\n遂にいい方法が見つかった。"}],"\n",["$","div",null,{"className":"p-1","children":[["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"MDX"}],"という形式である。"]}],"\n",["$","div",null,{"className":"p-1","children":["まだ使い始めたばかりで全ての機能を把握しているわけではないが、\r\n",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"是非ともこれを使ったブログを執筆したい"}],"と考えている。"]}],"\n",["$","h2",null,{"className":"text-xl font-bold pt-3 pb-3","children":"MDXってどんなもの?"}],"\n",["$","div",null,{"className":"p-1","children":"簡単に言うと、"}],"\n",["$","div",null,{"className":"p-1","children":["Reactで使われる ",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":".jsx"}]," × Markdownの ",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":".md"}]," → ",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"mdx"}]]}],"\n",["$","div",null,{"className":"p-1","children":"という感じであり、MarkdownファイルをReactで活用する事が出来るというイメージ。"}],"\n",["$","h2",null,{"className":"text-xl font-bold pt-3 pb-3","children":"使ってみた感想"}],"\n",["$","div",null,{"className":"p-1","children":["実際に触ってみた感じでは、",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"とても良い"}],"!!"]}],"\n",["$","div",null,{"className":"p-1","children":"どんな所がいいかというと、"}],"\n",["$","ul",null,{"className":"pt-2 pb-2","children":["\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"Markdownの書き方をそのまま適用させられる。"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"Reactのコードを埋め込める。"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"metaデータを持たせる事ができる"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"共通のフォーマットを適用させられる"}],"\n"]}],"\n",["$","div",null,{"className":"p-1","children":"といった感じである。"}],"\n",["$","div",null,{"className":"p-1","children":"これらの内容を少し深堀してみる。"}],"\n",["$","h3",null,{"className":"text-lg font-bold pt-2 pb-2","children":"Markdownの書き方をそのまま適用可能"}],"\n",["$","div",null,{"className":"p-1","children":"普段からMarkdownを使ってきたので、\r\nこの書き方でいいのはとてもいい。"}],"\n",["$","div",null,{"className":"p-1","children":"特にソースコードなどを載せるのがとても簡単であるので、\r\nエンジニア系の記事がとてもはかどる。"}],"\n",["$","h3",null,{"className":"text-lg font-bold pt-2 pb-2","children":"Reactのコードを埋め込め可能"}],"\n",["$","div",null,{"className":"p-1","children":"他のファイルで定義しているコンポーネントをmdxファイル内に埋め込む事ができる。"}],"\n",["$","div",null,{"className":"p-1","children":[["$","a",null,{"href":"https://mdxjs.com/","children":"公式の例"}],"ではチャート図を埋め込んだものが載せられている。"]}],"\n",["$","div",null,{"className":"p-1","children":"これにより、ブログの中に綺麗な図やグラフだけでなくオリジナルのデザインなども入れたりする事が出来そう。"}],"\n",["$","h3",null,{"className":"text-lg font-bold pt-2 pb-2","children":"metaデータの保持可能"}],"\n",["$","div",null,{"className":"p-1","children":"ブログを書く際に重要な"}],"\n",["$","ul",null,{"className":"pt-2 pb-2","children":["\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"著者"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"投稿日"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"更新日"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"タイトル"}],"\n",["$","li",null,{"className":"list-disc list-inside pl-2","children":"キーワード"}],"\n"]}],"\n",["$","div",null,{"className":"p-1","children":"...などをファイルに持たせ、そのファイルをReactコンポーネントに読み込ませた際に\r\nメタデータとして取得・処理できる。"}],"\n",["$","h3",null,{"className":"text-lg font-bold pt-2 pb-2","children":"共通のフォーマットの適用可能"}],"\n",["$","div",null,{"className":"p-1","children":"フォーマットを用意する事で、\r\nMarkdownのコンポーネント毎に独自のレイアウトを\r\n用意する事が出来る。"}],"\n",["$","div",null,{"className":"p-1","children":"ブログ記事のデザインの幅を広げられる。"}],"\n",["$","div",null,{"className":"p-1","children":["実装方法としては、\r\n以下のように",["$","div",null,{"className":"pt-3 pb-3","children":["$","pre",null,{"style":{"display":"block","overflowX":"auto","padding":"0.5em","background":"#333","color":"white"},"children":["$","code",null,{"className":"language-text","style":{"whiteSpace":"pre"},"children":[false,["$L15"]]}]}]}],"の中で\r\nMarkdownシンタックスに対してコンポーネントを定義する形になる。"]}],"\n","$L16","\n","$L17","\n","$L18","\n","$L19","\n","$L1a","\n","$L1b"]}] 13:["$","div",null,{"data-slot":"card-footer","className":"flex items-center px-6 [.border-t]:pt-6"}] 14:["$","footer",null,{"className":"bg-neutral-800 text-white mt-16 py-6","children":["$","div",null,{"className":"container mx-auto px-4","children":["$","div",null,{"className":"flex flex-col md:flex-row justify-between items-center","children":[["$","div",null,{"className":"flex space-x-4 mb-4 md:mb-0"}],["$","p",null,{"className":"text-sm text-gray-400","children":"© 2025 Shinjo Syntax. All rights reserved."}]]}]}]}] 15:["$","span","code-segement0",{"className":"$undefined","style":{},"children":["mdx-components.tsx"]}] 16:["$","pre",null,{"children":["$","div",null,{"className":"pt-3 pb-3","children":["$","pre",null,{"style":{"display":"block","overflowX":"auto","padding":"0.5em","background":"#333","color":"white"},"children":["$","code",null,{"className":"language-js","style":{"whiteSpace":"pre"},"children":[false,[["$","span","code-segement0",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["import"]}],["$","span","code-segement1",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement2",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["type"]}],["$","span","code-segement3",{"className":"$undefined","style":{},"children":[" { MDXComponents } "]}],["$","span","code-segement4",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["from"]}],["$","span","code-segement5",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement6",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["'mdx/types'"]}],["$","span","code-segement7",{"className":"$undefined","style":{},"children":["\r\n"]}],["$","span","code-segement8",{"className":"$undefined","style":{},"children":[""]}],["$","span","code-segement9",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["import"]}],["$","span","code-segement10",{"className":"$undefined","style":{},"children":[" SyntaxHighlighter "]}],["$","span","code-segement11",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["from"]}],["$","span","code-segement12",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement13",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["'react-syntax-highlighter'"]}],["$","span","code-segement14",{"className":"$undefined","style":{},"children":[";\r\n"]}],["$","span","code-segement15",{"className":"$undefined","style":{},"children":[""]}],["$","span","code-segement16",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["import"]}],["$","span","code-segement17",{"className":"$undefined","style":{},"children":[" { agate } "]}],["$","span","code-segement18",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["from"]}],["$","span","code-segement19",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement20",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["'react-syntax-highlighter/dist/esm/styles/hljs'"]}],["$","span","code-segement21",{"className":"$undefined","style":{},"children":[";\r\n"]}],"\r\n",["$","span","code-segement23",{"className":"$undefined","style":{},"children":[""]}],["$","span","code-segement24",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["const"]}],["$","span","code-segement25",{"className":"$undefined","style":{},"children":[" components: MDXComponents = {\r\n"]}],["$","span","code-segement26",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement27",{"className":"$undefined","style":{"color":"#888"},"children":["// Allows customizing built-in components, e.g. to add styling."]}],["$","span","code-segement28",{"className":"$undefined","style":{},"children":["\r\n"]}],["$","span","code-segement29",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement30",{"className":"hljs-attr","style":{},"children":["h1"]}],["$","span","code-segement31",{"className":"$undefined","style":{},"children":[": "]}],["$","span","code-segement32",{"className":"hljs-function","style":{},"children":["("]}],["$","span","code-segement33",{"className":"hljs-function hljs-params","style":{},"children":["{ children }"]}],["$","span","code-segement34",{"className":"hljs-function","style":{},"children":[") =>"]}],["$","span","code-segement35",{"className":"$undefined","style":{},"children":[" (\r\n"]}],["$","span","code-segement36",{"className":"$undefined","style":{},"children":[" "]}],["$","span","code-segement37",{"className":"xml","style":{"color":"#62c8f3"},"children":["<"]}],["$","span","code-segement38",{"className":"xml","style":{"color":"#62c8f3","fontWeight":"bold"},"children":["h1"]}],["$","span","code-segement39",{"className":"xml","style":{"color":"#62c8f3"},"children":[" "]}],["$","span","code-segement40",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["style"]}],["$","span","code-segement41",{"className":"xml","style":{"color":"#62c8f3"},"children":["="]}],["$","span","code-segement42",{"className":"xml","style":{"color":"#a2fca2"},"children":["{{"]}],["$","span","code-segement43",{"className":"xml","style":{"color":"#62c8f3"},"children":[" "]}],["$","span","code-segement44",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["color:"]}],["$","span","code-segement45",{"className":"xml","style":{"color":"#62c8f3"},"children":[" '"]}],["$","span","code-segement46",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["red"]}],["$","span","code-segement47",{"className":"xml","style":{"color":"#62c8f3"},"children":["', "]}],["$","span","code-segement48",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["fontSize:"]}],"$L1c","$L1d","$L1e","$L1f","$L20","$L21","$L22","$L23"," ),\r\n","$L24","$L25","$L26","$L27","$L28","$L29","$L2a","$L2b","$L2c","$L2d","$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36","\r\n","$L37","$L38","$L39","$L3a","$L3b","$L3c","$L3d","$L3e","$L3f","$L40","$L41","$L42","$L43","$L44","$L45","$L46","$L47","$L48","$L49","$L4a","$L4b","$L4c"," );\r\n"," },\r\n","}\r\n"," \r\n","$L4d","$L4e","$L4f","$L50","$L51","$L52","$L53","$L54","$L55","$L56","$L57","$L58","$L59","$L5a","}"]]}]}]}]}] 17:["$","div",null,{"className":"p-1","children":["上記では、Markdownの ",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"#"}]," と ",["$","strong",null,{"className":"bg-stone-300 text-stone-800 text-sm px-2 py-0.5 rounded-full","children":"`"}]," に対してレイアウトを適用させている。"]}] 18:["$","div",null,{"className":"p-1","children":["対応させるシンタックスを確認するには",["$","a",null,{"href":"https://mdxjs.com/table-of-components/","children":"公式のこちらのページ"}],"を参考にするのが良さそう。"]}] 19:["$","h2",null,{"className":"text-xl font-bold pt-3 pb-3","children":"締めくくり"}] 1a:["$","div",null,{"className":"p-1","children":"とても便利なもので、導入も簡単なのでとてもおすすめです。"}] 1b:["$","div",null,{"className":"p-1","children":"しばらくこれを使ってみて色々な機能を試してみたいです。"}] 1c:["$","span","code-segement49",{"className":"xml","style":{"color":"#62c8f3"},"children":[" '"]}] 1d:["$","span","code-segement50",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["48px"]}] 1e:["$","span","code-segement51",{"className":"xml","style":{"color":"#62c8f3"},"children":["' }}>"]}] 1f:["$","span","code-segement52",{"className":"xml","style":{},"children":["{children}"]}] 20:["$","span","code-segement53",{"className":"xml","style":{"color":"#62c8f3"},"children":[""]}] 23:["$","span","code-segement56",{"className":"$undefined","style":{},"children":["\r\n"]}] 24:["$","span","code-segement58",{"className":"$undefined","style":{},"children":[" "]}] 25:["$","span","code-segement59",{"className":"hljs-attr","style":{},"children":["code"]}] 26:["$","span","code-segement60",{"className":"$undefined","style":{},"children":[": "]}] 27:["$","span","code-segement61",{"className":"hljs-function","style":{},"children":["("]}] 28:["$","span","code-segement62",{"className":"hljs-function hljs-params","style":{},"children":["{ children, className }"]}] 29:["$","span","code-segement63",{"className":"hljs-function","style":{},"children":[") =>"]}] 2a:["$","span","code-segement64",{"className":"$undefined","style":{},"children":[" {\r\n"]}] 2b:["$","span","code-segement65",{"className":"$undefined","style":{},"children":[" "]}] 2c:["$","span","code-segement66",{"className":"$undefined","style":{"color":"#888"},"children":["// classNameが 'language-js' の形式で渡ってくるので、それを処理"]}] 2d:["$","span","code-segement67",{"className":"$undefined","style":{},"children":["\r\n"]}] 2e:["$","span","code-segement68",{"className":"$undefined","style":{},"children":[" "]}] 2f:["$","span","code-segement69",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["const"]}] 30:["$","span","code-segement70",{"className":"$undefined","style":{},"children":[" language = className?.replace("]}] 31:["$","span","code-segement71",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["'language-'"]}] 32:["$","span","code-segement72",{"className":"$undefined","style":{},"children":[", "]}] 33:["$","span","code-segement73",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["''"]}] 34:["$","span","code-segement74",{"className":"$undefined","style":{},"children":[") || "]}] 35:["$","span","code-segement75",{"className":"$undefined","style":{"color":"#a2fca2"},"children":["'text'"]}] 36:["$","span","code-segement76",{"className":"$undefined","style":{},"children":[";\r\n"]}] 37:["$","span","code-segement78",{"className":"$undefined","style":{},"children":[" "]}] 38:["$","span","code-segement79",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["return"]}] 39:["$","span","code-segement80",{"className":"$undefined","style":{},"children":[" (\r\n"]}] 3a:["$","span","code-segement81",{"className":"$undefined","style":{},"children":[" "]}] 3b:["$","span","code-segement82",{"className":"xml","style":{"color":"#62c8f3"},"children":["<"]}] 3c:["$","span","code-segement83",{"className":"xml","style":{"color":"#62c8f3","fontWeight":"bold"},"children":["SyntaxHighlighter"]}] 3d:["$","span","code-segement84",{"className":"xml","style":{"color":"#62c8f3"},"children":[" "]}] 3e:["$","span","code-segement85",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["language"]}] 3f:["$","span","code-segement86",{"className":"xml","style":{"color":"#62c8f3"},"children":["="]}] 40:["$","span","code-segement87",{"className":"xml","style":{"color":"#a2fca2"},"children":["{language}"]}] 41:["$","span","code-segement88",{"className":"xml","style":{"color":"#62c8f3"},"children":[" "]}] 42:["$","span","code-segement89",{"className":"xml hljs-attr","style":{"color":"#62c8f3"},"children":["style"]}] 43:["$","span","code-segement90",{"className":"xml","style":{"color":"#62c8f3"},"children":["="]}] 44:["$","span","code-segement91",{"className":"xml","style":{"color":"#a2fca2"},"children":["{agate}"]}] 45:["$","span","code-segement92",{"className":"xml","style":{"color":"#62c8f3"},"children":[">"]}] 46:["$","span","code-segement93",{"className":"xml","style":{},"children":["\r\n"]}] 47:["$","span","code-segement94",{"className":"xml","style":{},"children":[" {String(children).trim()}\r\n"]}] 48:["$","span","code-segement95",{"className":"xml","style":{},"children":[" "]}] 49:["$","span","code-segement96",{"className":"xml","style":{"color":"#62c8f3"},"children":[""]}] 4c:["$","span","code-segement99",{"className":"$undefined","style":{},"children":["\r\n"]}] 4d:["$","span","code-segement104",{"className":"$undefined","style":{},"children":[""]}] 4e:["$","span","code-segement105",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["export"]}] 4f:["$","span","code-segement106",{"className":"$undefined","style":{},"children":[" "]}] 50:["$","span","code-segement107",{"className":"hljs-function","style":{"color":"#fcc28c"},"children":["function"]}] 51:["$","span","code-segement108",{"className":"hljs-function","style":{},"children":[" "]}] 52:["$","span","code-segement109",{"className":"hljs-function","style":{"color":"#ffa"},"children":["useMDXComponents"]}] 53:["$","span","code-segement110",{"className":"hljs-function","style":{},"children":["("]}] 54:["$","span","code-segement111",{"className":"hljs-function","style":{},"children":["): "]}] 55:["$","span","code-segement112",{"className":"hljs-function","style":{"color":"#ffa"},"children":["MDXComponents"]}] 56:["$","span","code-segement113",{"className":"hljs-function","style":{},"children":[" "]}] 57:["$","span","code-segement114",{"className":"$undefined","style":{},"children":["{\r\n"]}] 58:["$","span","code-segement115",{"className":"$undefined","style":{},"children":[" "]}] 59:["$","span","code-segement116",{"className":"$undefined","style":{"color":"#fcc28c"},"children":["return"]}] 5a:["$","span","code-segement117",{"className":"$undefined","style":{},"children":[" components\r\n"]}] b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 7:null 5b:I[8723,[],"IconMark"] 9:{"metadata":[["$","title","0",{"children":"Markdownでブログ記事を作ってみたい!"}],["$","meta","1",{"name":"description","content":"Generated by Next.js"}],["$","link","2",{"rel":"icon","href":"/icon.png?6322cf53d61108b8","type":"image/png","sizes":"256x256"}],["$","$L5b","3",{}]],"error":null,"digest":"$undefined"} e:"$9:metadata"