[{"data":1,"prerenderedAt":1047},["ShallowReactive",2],{"guide-markdown-code-blocks":3},{"id":4,"title":5,"body":6,"date":1039,"description":1040,"extension":1041,"meta":1042,"navigation":744,"path":1043,"readingTime":495,"seo":1044,"stem":1045,"__hash__":1046},"guides\u002Fguides\u002Fmarkdown-code-blocks.md","Markdown to HTML: Handling Code Blocks Correctly",{"type":7,"value":8,"toc":1017},"minimark",[9,14,18,21,25,30,33,63,71,75,82,159,162,166,169,184,187,231,235,264,267,271,274,283,285,313,317,320,329,333,336,362,368,382,550,564,568,572,649,660,664,667,878,882,885,966,970,974,977,1001,1007,1013],[10,11,13],"h2",{"id":12},"code-blocks-are-the-trickiest-markdown-element","Code Blocks Are the Trickiest Markdown Element",[15,16,17],"p",{},"Paragraphs, headings, and lists convert predictably from Markdown to HTML. Code blocks do not. Between fenced blocks, indented blocks, language hints, syntax highlighting, and HTML escaping, there are plenty of ways the conversion can go wrong.",[15,19,20],{},"Understanding how Markdown parsers handle code blocks helps you write correct Markdown and debug unexpected HTML output.",[10,22,24],{"id":23},"fenced-code-blocks","Fenced Code Blocks",[26,27,29],"h3",{"id":28},"basic-syntax","Basic Syntax",[15,31,32],{},"Fenced code blocks use triple backticks or tildes. This is the most common and recommended syntax.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-markdown shiki shiki-themes github-light github-dark","```javascript\nconst greeting = \"Hello, world!\";\nconsole.log(greeting);\n","markdown","",[41,42,43,51,57],"code",{"__ignoreMap":39},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,50],{},"```javascript\n",[44,52,54],{"class":46,"line":53},2,[44,55,56],{},"const greeting = \"Hello, world!\";\n",[44,58,60],{"class":46,"line":59},3,[44,61,62],{},"console.log(greeting);\n",[34,64,69],{"className":65,"code":67,"language":68},[66],"language-text","\nProduces:\n\n```html\n\u003Cpre>\u003Ccode class=\"language-javascript\">const greeting = \"Hello, world!\";\nconsole.log(greeting);\n\u003C\u002Fcode>\u003C\u002Fpre>\n","text",[41,70,67],{"__ignoreMap":39},[26,72,74],{"id":73},"language-hints","Language Hints",[15,76,77,78,81],{},"The text after the opening fence is the info string. Most parsers pass it as a CSS class with the ",[41,79,80],{},"language-"," prefix:",[83,84,85,101],"table",{},[86,87,88],"thead",{},[89,90,91,95,98],"tr",{},[92,93,94],"th",{},"Info String",[92,96,97],{},"HTML Class",[92,99,100],{},"Purpose",[102,103,104,120,134,148],"tbody",{},[89,105,106,112,117],{},[107,108,109],"td",{},[41,110,111],{},"javascript",[107,113,114],{},[41,115,116],{},"language-javascript",[107,118,119],{},"Syntax highlighting hint",[89,121,122,127,132],{},[107,123,124],{},[41,125,126],{},"python",[107,128,129],{},[41,130,131],{},"language-python",[107,133,119],{},[89,135,136,141,146],{},[107,137,138],{},[41,139,140],{},"json",[107,142,143],{},[41,144,145],{},"language-json",[107,147,119],{},[89,149,150,153,156],{},[107,151,152],{},"``",[107,154,155],{},"(none)",[107,157,158],{},"No language specified",[15,160,161],{},"The info string does not enable highlighting by itself. You need a syntax highlighting library like Prism.js, Highlight.js, or Shiki to read the class and apply colors.",[10,163,165],{"id":164},"indented-code-blocks","Indented Code Blocks",[15,167,168],{},"Code indented by four spaces (or one tab) is treated as a code block in standard Markdown:",[34,170,172],{"className":36,"code":171,"language":38,"meta":39,"style":39},"    const x = 42;\n    console.log(x);\n",[41,173,174,179],{"__ignoreMap":39},[44,175,176],{"class":46,"line":47},[44,177,178],{},"    const x = 42;\n",[44,180,181],{"class":46,"line":53},[44,182,183],{},"    console.log(x);\n",[15,185,186],{},"Produces:",[34,188,192],{"className":189,"code":190,"language":191,"meta":39,"style":39},"language-html shiki shiki-themes github-light github-dark","\u003Cpre>\u003Ccode>const x = 42;\nconsole.log(x);\n\u003C\u002Fcode>\u003C\u002Fpre>\n","html",[41,193,194,211,216],{"__ignoreMap":39},[44,195,196,200,203,206,208],{"class":46,"line":47},[44,197,199],{"class":198},"sVt8B","\u003C",[44,201,34],{"class":202},"s9eBZ",[44,204,205],{"class":198},">\u003C",[44,207,41],{"class":202},[44,209,210],{"class":198},">const x = 42;\n",[44,212,213],{"class":46,"line":53},[44,214,215],{"class":198},"console.log(x);\n",[44,217,218,221,223,226,228],{"class":46,"line":59},[44,219,220],{"class":198},"\u003C\u002F",[44,222,41],{"class":202},[44,224,225],{"class":198},">\u003C\u002F",[44,227,34],{"class":202},[44,229,230],{"class":198},">\n",[26,232,234],{"id":233},"problems-with-indented-blocks","Problems with Indented Blocks",[236,237,238,246,252,258],"ul",{},[239,240,241,245],"li",{},[242,243,244],"strong",{},"No language hint",": There is no way to specify the language",[239,247,248,251],{},[242,249,250],{},"Easy to trigger accidentally",": Four spaces at the start of a paragraph converts it to code",[239,253,254,257],{},[242,255,256],{},"Hard to read in source",": The indentation is not visually distinctive",[239,259,260,263],{},[242,261,262],{},"Removed in some flavors",": GitHub Flavored Markdown deprecates indented code blocks in lists",[15,265,266],{},"Prefer fenced code blocks in all new Markdown content.",[10,268,270],{"id":269},"inline-code","Inline Code",[15,272,273],{},"Single backticks wrap inline code:",[34,275,277],{"className":36,"code":276,"language":38,"meta":39,"style":39},"Use the `console.log()` function to debug.\n",[41,278,279],{"__ignoreMap":39},[44,280,281],{"class":46,"line":47},[44,282,276],{},[15,284,186],{},[34,286,288],{"className":189,"code":287,"language":191,"meta":39,"style":39},"\u003Cp>Use the \u003Ccode>console.log()\u003C\u002Fcode> function to debug.\u003C\u002Fp>\n",[41,289,290],{"__ignoreMap":39},[44,291,292,294,296,299,301,304,306,309,311],{"class":46,"line":47},[44,293,199],{"class":198},[44,295,15],{"class":202},[44,297,298],{"class":198},">Use the \u003C",[44,300,41],{"class":202},[44,302,303],{"class":198},">console.log()\u003C\u002F",[44,305,41],{"class":202},[44,307,308],{"class":198},"> function to debug.\u003C\u002F",[44,310,15],{"class":202},[44,312,230],{"class":198},[26,314,316],{"id":315},"escaping-inside-inline-code","Escaping Inside Inline Code",[15,318,319],{},"Backticks inside inline code require double backtick delimiters:",[34,321,323],{"className":36,"code":322,"language":38,"meta":39,"style":39},"`` `nested` `` — renders as: `nested`\n",[41,324,325],{"__ignoreMap":39},[44,326,327],{"class":46,"line":47},[44,328,322],{},[10,330,332],{"id":331},"html-escaping-in-code-blocks","HTML Escaping in Code Blocks",[15,334,335],{},"Code blocks must escape HTML special characters. Without escaping, the browser interprets tags inside the code instead of displaying them.",[34,337,339],{"className":36,"code":338,"language":38,"meta":39,"style":39},"```html\n\u003Cdiv class=\"container\">\n  \u003Cp>Hello\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[41,340,341,346,351,356],{"__ignoreMap":39},[44,342,343],{"class":46,"line":47},[44,344,345],{},"```html\n",[44,347,348],{"class":46,"line":53},[44,349,350],{},"\u003Cdiv class=\"container\">\n",[44,352,353],{"class":46,"line":59},[44,354,355],{},"  \u003Cp>Hello\u003C\u002Fp>\n",[44,357,359],{"class":46,"line":358},4,[44,360,361],{},"\u003C\u002Fdiv>\n",[34,363,366],{"className":364,"code":365,"language":68},[66],"\nProduces:\n\n```html\n\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"container\">\n  <p>Hello<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n",[41,367,365],{"__ignoreMap":39},[15,369,370,371,373,374,377,378,381],{},"The Markdown parser handles this escaping automatically. But if you are building a custom converter, you must escape ",[41,372,199],{},", ",[41,375,376],{},">",", and ",[41,379,380],{},"&"," yourself:",[34,383,386],{"className":384,"code":385,"language":111,"meta":39,"style":39},"language-javascript shiki shiki-themes github-light github-dark","function escapeHtml(str) {\n  return str\n    .replace(\u002F&\u002Fg, '&')\n    .replace(\u002F\u003C\u002Fg, '<')\n    .replace(\u002F>\u002Fg, '>')\n    .replace(\u002F\"\u002Fg, '"')\n    .replace(\u002F'\u002Fg, ''');\n}\n",[41,387,388,408,416,446,469,493,518,544],{"__ignoreMap":39},[44,389,390,394,398,401,405],{"class":46,"line":47},[44,391,393],{"class":392},"szBVR","function",[44,395,397],{"class":396},"sScJk"," escapeHtml",[44,399,400],{"class":198},"(",[44,402,404],{"class":403},"s4XuR","str",[44,406,407],{"class":198},") {\n",[44,409,410,413],{"class":46,"line":53},[44,411,412],{"class":392},"  return",[44,414,415],{"class":198}," str\n",[44,417,418,421,424,426,430,433,435,438,440,443],{"class":46,"line":59},[44,419,420],{"class":198},"    .",[44,422,423],{"class":396},"replace",[44,425,400],{"class":198},[44,427,429],{"class":428},"sZZnC","\u002F",[44,431,380],{"class":432},"sA_wV",[44,434,429],{"class":428},[44,436,437],{"class":392},"g",[44,439,373],{"class":198},[44,441,442],{"class":428},"'&'",[44,444,445],{"class":198},")\n",[44,447,448,450,452,454,456,458,460,462,464,467],{"class":46,"line":358},[44,449,420],{"class":198},[44,451,423],{"class":396},[44,453,400],{"class":198},[44,455,429],{"class":428},[44,457,199],{"class":432},[44,459,429],{"class":428},[44,461,437],{"class":392},[44,463,373],{"class":198},[44,465,466],{"class":428},"'<'",[44,468,445],{"class":198},[44,470,472,474,476,478,480,482,484,486,488,491],{"class":46,"line":471},5,[44,473,420],{"class":198},[44,475,423],{"class":396},[44,477,400],{"class":198},[44,479,429],{"class":428},[44,481,376],{"class":432},[44,483,429],{"class":428},[44,485,437],{"class":392},[44,487,373],{"class":198},[44,489,490],{"class":428},"'>'",[44,492,445],{"class":198},[44,494,496,498,500,502,504,507,509,511,513,516],{"class":46,"line":495},6,[44,497,420],{"class":198},[44,499,423],{"class":396},[44,501,400],{"class":198},[44,503,429],{"class":428},[44,505,506],{"class":432},"\"",[44,508,429],{"class":428},[44,510,437],{"class":392},[44,512,373],{"class":198},[44,514,515],{"class":428},"'"'",[44,517,445],{"class":198},[44,519,521,523,525,527,529,532,534,536,538,541],{"class":46,"line":520},7,[44,522,420],{"class":198},[44,524,423],{"class":396},[44,526,400],{"class":198},[44,528,429],{"class":428},[44,530,531],{"class":432},"'",[44,533,429],{"class":428},[44,535,437],{"class":392},[44,537,373],{"class":198},[44,539,540],{"class":428},"'''",[44,542,543],{"class":198},");\n",[44,545,547],{"class":46,"line":546},8,[44,548,549],{"class":198},"}\n",[15,551,552,553,555,556,559,560,563],{},"Always escape ",[41,554,380],{}," first — otherwise ",[41,557,558],{},"<"," becomes ",[41,561,562],{},"<",".",[10,565,567],{"id":566},"syntax-highlighting-options","Syntax Highlighting Options",[26,569,571],{"id":570},"client-side-browser","Client-Side (Browser)",[34,573,575],{"className":189,"code":574,"language":191,"meta":39,"style":39},"\u003C!-- Include Highlight.js -->\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.9.0\u002Fstyles\u002Fgithub.min.css\">\n\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.9.0\u002Fhighlight.min.js\">\u003C\u002Fscript>\n\u003Cscript>hljs.highlightAll();\u003C\u002Fscript>\n",[41,576,577,583,609,630],{"__ignoreMap":39},[44,578,579],{"class":46,"line":47},[44,580,582],{"class":581},"sJ8bj","\u003C!-- Include Highlight.js -->\n",[44,584,585,587,590,593,596,599,602,604,607],{"class":46,"line":53},[44,586,199],{"class":198},[44,588,589],{"class":202},"link",[44,591,592],{"class":396}," rel",[44,594,595],{"class":198},"=",[44,597,598],{"class":428},"\"stylesheet\"",[44,600,601],{"class":396}," href",[44,603,595],{"class":198},[44,605,606],{"class":428},"\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.9.0\u002Fstyles\u002Fgithub.min.css\"",[44,608,230],{"class":198},[44,610,611,613,616,619,621,624,626,628],{"class":46,"line":59},[44,612,199],{"class":198},[44,614,615],{"class":202},"script",[44,617,618],{"class":396}," src",[44,620,595],{"class":198},[44,622,623],{"class":428},"\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.9.0\u002Fhighlight.min.js\"",[44,625,225],{"class":198},[44,627,615],{"class":202},[44,629,230],{"class":198},[44,631,632,634,636,639,642,645,647],{"class":46,"line":358},[44,633,199],{"class":198},[44,635,615],{"class":202},[44,637,638],{"class":198},">hljs.",[44,640,641],{"class":396},"highlightAll",[44,643,644],{"class":198},"();\u003C\u002F",[44,646,615],{"class":202},[44,648,230],{"class":198},[15,650,651,652,655,656,659],{},"Highlight.js reads the ",[41,653,654],{},"language-xxx"," class from Markdown output and applies ",[41,657,658],{},"\u003Cspan>"," elements with color classes.",[26,661,663],{"id":662},"build-time-ssgssr","Build-Time (SSG\u002FSSR)",[15,665,666],{},"For static sites, highlight at build time to avoid client-side JavaScript:",[34,668,670],{"className":384,"code":669,"language":111,"meta":39,"style":39},"const { marked } = require('marked');\nconst { markedHighlight } = require('marked-highlight');\nconst hljs = require('highlight.js');\n\nmarked.use(markedHighlight({\n  langPrefix: 'hljs language-',\n  highlight(code, lang) {\n    const language = hljs.getLanguage(lang) ? lang : 'plaintext';\n    return hljs.highlight(code, { language }).value;\n  }\n}));\n\nconst html = marked.parse(markdown);\n\u002F\u002F Output already contains highlighted spans\n",[41,671,672,699,721,740,746,761,772,788,822,836,842,848,853,872],{"__ignoreMap":39},[44,673,674,677,680,684,687,689,692,694,697],{"class":46,"line":47},[44,675,676],{"class":392},"const",[44,678,679],{"class":198}," { ",[44,681,683],{"class":682},"sj4cs","marked",[44,685,686],{"class":198}," } ",[44,688,595],{"class":392},[44,690,691],{"class":396}," require",[44,693,400],{"class":198},[44,695,696],{"class":428},"'marked'",[44,698,543],{"class":198},[44,700,701,703,705,708,710,712,714,716,719],{"class":46,"line":53},[44,702,676],{"class":392},[44,704,679],{"class":198},[44,706,707],{"class":682},"markedHighlight",[44,709,686],{"class":198},[44,711,595],{"class":392},[44,713,691],{"class":396},[44,715,400],{"class":198},[44,717,718],{"class":428},"'marked-highlight'",[44,720,543],{"class":198},[44,722,723,725,728,731,733,735,738],{"class":46,"line":59},[44,724,676],{"class":392},[44,726,727],{"class":682}," hljs",[44,729,730],{"class":392}," =",[44,732,691],{"class":396},[44,734,400],{"class":198},[44,736,737],{"class":428},"'highlight.js'",[44,739,543],{"class":198},[44,741,742],{"class":46,"line":358},[44,743,745],{"emptyLinePlaceholder":744},true,"\n",[44,747,748,751,754,756,758],{"class":46,"line":471},[44,749,750],{"class":198},"marked.",[44,752,753],{"class":396},"use",[44,755,400],{"class":198},[44,757,707],{"class":396},[44,759,760],{"class":198},"({\n",[44,762,763,766,769],{"class":46,"line":495},[44,764,765],{"class":198},"  langPrefix: ",[44,767,768],{"class":428},"'hljs language-'",[44,770,771],{"class":198},",\n",[44,773,774,777,779,781,783,786],{"class":46,"line":520},[44,775,776],{"class":396},"  highlight",[44,778,400],{"class":198},[44,780,41],{"class":403},[44,782,373],{"class":198},[44,784,785],{"class":403},"lang",[44,787,407],{"class":198},[44,789,790,793,796,798,801,804,807,810,813,816,819],{"class":46,"line":546},[44,791,792],{"class":392},"    const",[44,794,795],{"class":682}," language",[44,797,730],{"class":392},[44,799,800],{"class":198}," hljs.",[44,802,803],{"class":396},"getLanguage",[44,805,806],{"class":198},"(lang) ",[44,808,809],{"class":392},"?",[44,811,812],{"class":198}," lang ",[44,814,815],{"class":392},":",[44,817,818],{"class":428}," 'plaintext'",[44,820,821],{"class":198},";\n",[44,823,825,828,830,833],{"class":46,"line":824},9,[44,826,827],{"class":392},"    return",[44,829,800],{"class":198},[44,831,832],{"class":396},"highlight",[44,834,835],{"class":198},"(code, { language }).value;\n",[44,837,839],{"class":46,"line":838},10,[44,840,841],{"class":198},"  }\n",[44,843,845],{"class":46,"line":844},11,[44,846,847],{"class":198},"}));\n",[44,849,851],{"class":46,"line":850},12,[44,852,745],{"emptyLinePlaceholder":744},[44,854,856,858,861,863,866,869],{"class":46,"line":855},13,[44,857,676],{"class":392},[44,859,860],{"class":682}," html",[44,862,730],{"class":392},[44,864,865],{"class":198}," marked.",[44,867,868],{"class":396},"parse",[44,870,871],{"class":198},"(markdown);\n",[44,873,875],{"class":46,"line":874},14,[44,876,877],{"class":581},"\u002F\u002F Output already contains highlighted spans\n",[26,879,881],{"id":880},"shiki-vs-code-themes","Shiki (VS Code Themes)",[15,883,884],{},"Shiki uses TextMate grammars for accurate highlighting with VS Code themes:",[34,886,888],{"className":384,"code":887,"language":111,"meta":39,"style":39},"const shiki = require('shiki');\n\nconst highlighter = await shiki.getHighlighter({ theme: 'github-dark' });\nconst html = highlighter.codeToHtml(code, { lang: 'javascript' });\n\u002F\u002F Produces inline-styled spans — no CSS stylesheet needed\n",[41,889,890,908,912,939,961],{"__ignoreMap":39},[44,891,892,894,897,899,901,903,906],{"class":46,"line":47},[44,893,676],{"class":392},[44,895,896],{"class":682}," shiki",[44,898,730],{"class":392},[44,900,691],{"class":396},[44,902,400],{"class":198},[44,904,905],{"class":428},"'shiki'",[44,907,543],{"class":198},[44,909,910],{"class":46,"line":53},[44,911,745],{"emptyLinePlaceholder":744},[44,913,914,916,919,921,924,927,930,933,936],{"class":46,"line":59},[44,915,676],{"class":392},[44,917,918],{"class":682}," highlighter",[44,920,730],{"class":392},[44,922,923],{"class":392}," await",[44,925,926],{"class":198}," shiki.",[44,928,929],{"class":396},"getHighlighter",[44,931,932],{"class":198},"({ theme: ",[44,934,935],{"class":428},"'github-dark'",[44,937,938],{"class":198}," });\n",[44,940,941,943,945,947,950,953,956,959],{"class":46,"line":358},[44,942,676],{"class":392},[44,944,860],{"class":682},[44,946,730],{"class":392},[44,948,949],{"class":198}," highlighter.",[44,951,952],{"class":396},"codeToHtml",[44,954,955],{"class":198},"(code, { lang: ",[44,957,958],{"class":428},"'javascript'",[44,960,938],{"class":198},[44,962,963],{"class":46,"line":471},[44,964,965],{"class":581},"\u002F\u002F Produces inline-styled spans — no CSS stylesheet needed\n",[10,967,969],{"id":968},"common-problems","Common Problems",[26,971,973],{"id":972},"code-blocks-inside-lists","Code Blocks Inside Lists",[15,975,976],{},"Fenced code blocks inside list items require the fence to be indented to the list item level:",[34,978,980],{"className":36,"code":979,"language":38,"meta":39,"style":39},"1. Install the package:\n\n   ```bash\n   npm install my-package\n",[41,981,982,987,991,996],{"__ignoreMap":39},[44,983,984],{"class":46,"line":47},[44,985,986],{},"1. Install the package:\n",[44,988,989],{"class":46,"line":53},[44,990,745],{"emptyLinePlaceholder":744},[44,992,993],{"class":46,"line":59},[44,994,995],{},"   ```bash\n",[44,997,998],{"class":46,"line":358},[44,999,1000],{},"   npm install my-package\n",[1002,1003,1004],"ol",{"start":53},[239,1005,1006],{},"Import it:\n...",[34,1008,1011],{"className":1009,"code":1010,"language":68},[66],"\nThe fence must align with the list content indentation (3 spaces for numbered lists in CommonMark).\n\n### Empty Code Blocks\n\nAn empty fenced block renders as an empty `\u003Cpre>\u003Ccode>\u003C\u002Fcode>\u003C\u002Fpre>`. Some CSS frameworks give this zero height, making it invisible. Add `min-height` to `\u003Cpre>` as a safeguard.\n\n## Key Takeaways\n\n- Use fenced code blocks (triple backticks) instead of indented blocks\n- The info string after the fence becomes a `language-xxx` CSS class for syntax highlighting\n- HTML special characters in code blocks are escaped automatically by parsers\n- Escape `&` before `\u003C` and `>` when doing manual escaping\n- Choose between client-side (Highlight.js), build-time (marked-highlight), or inline-styled (Shiki) highlighting\n- Indent fenced blocks to match list item nesting when embedding code in lists\n\n## Try It Yourself\n\nConvert Markdown with code blocks to highlighted HTML instantly using our free [Markdown to HTML Converter](\u002Ftools\u002Fmarkdown-to-html). Paste any Markdown to see properly escaped and formatted output — all processing happens locally in your browser.\n\n[Try the Markdown to HTML Converter →](\u002Ftools\u002Fmarkdown-to-html)\n",[41,1012,1010],{"__ignoreMap":39},[1014,1015,1016],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":39,"searchDepth":53,"depth":53,"links":1018},[1019,1020,1024,1027,1030,1031,1036],{"id":12,"depth":53,"text":13},{"id":23,"depth":53,"text":24,"children":1021},[1022,1023],{"id":28,"depth":59,"text":29},{"id":73,"depth":59,"text":74},{"id":164,"depth":53,"text":165,"children":1025},[1026],{"id":233,"depth":59,"text":234},{"id":269,"depth":53,"text":270,"children":1028},[1029],{"id":315,"depth":59,"text":316},{"id":331,"depth":53,"text":332},{"id":566,"depth":53,"text":567,"children":1032},[1033,1034,1035],{"id":570,"depth":59,"text":571},{"id":662,"depth":59,"text":663},{"id":880,"depth":59,"text":881},{"id":968,"depth":53,"text":969,"children":1037},[1038],{"id":972,"depth":59,"text":973},"2026-05-28","Master Markdown code block conversion to HTML. Learn fenced blocks, syntax highlighting, inline code, and escaping for reliable rendering.","md",{"immutable":744},"\u002Fguides\u002Fmarkdown-code-blocks",{"title":5,"description":1040},"guides\u002Fmarkdown-code-blocks","6p-n-jdr915taG1I2JBjHXOGmcTV9h3QjiTjEhMoAeo",1780401335054]