Skip to content

⬅️ Back to Table of Contents

📄 Layout

📊 Analysis Summary

Metric Count
🔧 Functions 1
📦 Imports 12
💠 JSX Elements 7
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/theme/CodeBlock/Layout/index.tsx

📦 Imports

Name Source
Props @theme/CodeBlock/Layout
useCodeBlockContext @docusaurus/theme-common/internal
Buttons @theme/CodeBlock/Buttons
Container @theme/CodeBlock/Container
Content @theme/CodeBlock/Content
Title @theme/CodeBlock/Title
clsx clsx
React react
TryInPlayground ../../MDXComponents/TryInPlayground
getVisibleCodeLines ../utils
custom ./custom.module.css
styles ./styles.module.css

JSX Elements

Component Type Props Children
Container component as="div", className={clsx(className, metadata.className)} {metadata.title && ( <div className={clsx(styles.codeBlockTitle, custom.codeB...
div element className={clsx(styles.codeBlockTitle, custom.codeBlockTitle)} </td> </tr> <tr> <td><code>Title</code></td> <td>component</td> <td><em>none</em></td> <td>{metadata.title}</td> </tr> <tr> <td><code>div</code></td> <td>element</td> <td>className={clsx( styles.codeBlockContent, custom.codeBlockContent, eslintrcHa...</td> <td><Content>, {eslintrcHash && ( <TryInPlayground className={clsx( 'button butto...</td> </tr> <tr> <td><code>Content</code></td> <td>component</td> <td><em>none</em></td> <td><em>none</em></td> </tr> <tr> <td><code>TryInPlayground</code></td> <td>component</td> <td>className={clsx( 'button button--primary button--outline', custom.playgroundB...</td> <td>text: "Open in Playground"</td> </tr> <tr> <td><code>Buttons</code></td> <td>component</td> <td><em>none</em></td> <td><em>none</em></td> </tr> </tbody> </table> <hr /> <h2 id="functions">Functions<a class="headerlink" href="#functions" title="Permanent link">¶</a></h2> <h3 id="codeblocklayout-classname-eslintrchash-props-reactjsxelement"><code>CodeBlockLayout({ className, eslintrcHash, }: Props): React.JSX.Element</code><a class="headerlink" href="#codeblocklayout-classname-eslintrchash-props-reactjsxelement" title="Permanent link">¶</a></h3> <p><strong>Parameters:</strong></p> <ul> <li><strong><code>{ className, eslintrcHash, }</code></strong> <code>Props</code></li> </ul> <p><strong>Returns:</strong> <code>React.JSX.Element</code></p> <p><strong>Calls:</strong></p> <ul> <li><code>useCodeBlockContext (from @docusaurus/theme-common/internal)</code></li> <li><code>getVisibleCodeLines (from ../utils)</code></li> <li><code>lz.compressToEncodedURIComponent</code></li> <li><code>codeLines.join</code></li> <li><code>codeLines.at</code></li> <li><code>clsx (from clsx)</code></li> </ul> <details><summary>Code</summary> <div class="language-typescript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">CodeBlockLayout</span><span class="p">({</span> </span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w"> </span><span class="nx">className</span><span class="p">,</span> </span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w"> </span><span class="nx">eslintrcHash</span><span class="p">,</span> </span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Props</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">React</span><span class="p">.</span><span class="nx">JSX</span><span class="p">.</span><span class="nx">Element</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">metadata</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useCodeBlockContext</span><span class="p">();</span> </span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> </span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">codeLines</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getVisibleCodeLines</span><span class="p">(</span><span class="nx">metadata</span><span class="p">);</span> </span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">codeHash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lz</span><span class="p">.</span><span class="nx">compressToEncodedURIComponent</span><span class="p">(</span><span class="nx">codeLines</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'\n'</span><span class="p">));</span> </span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">needsMorePadding</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">codeLines</span><span class="p">.</span><span class="nx">at</span><span class="p">(</span><span class="o">-</span><span class="mf">1</span><span class="p">)</span><span class="o">?</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">??</span><span class="w"> </span><span class="mf">0</span><span class="p">)</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="mf">50</span><span class="p">;</span> </span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a> </span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> </span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a><span class="w"> </span><span class="o"><</span><span class="nx">Container</span><span class="w"> </span><span class="kr">as</span><span class="o">=</span><span class="s2">"div"</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">clsx</span><span class="p">(</span><span class="nx">className</span><span class="p">,</span><span class="w"> </span><span class="nx">metadata</span><span class="p">.</span><span class="nx">className</span><span class="p">)}</span><span class="o">></span> </span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="w"> </span><span class="p">{</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">title</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="p">(</span> </span><span id="__span-0-14"><a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a><span class="w"> </span><span class="o"><</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">clsx</span><span class="p">(</span><span class="nx">styles</span><span class="p">.</span><span class="nx">codeBlockTitle</span><span class="p">,</span><span class="w"> </span><span class="nx">custom</span><span class="p">.</span><span class="nx">codeBlockTitle</span><span class="p">)}</span><span class="o">></span> </span><span id="__span-0-15"><a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a><span class="w"> </span><span class="o"><</span><span class="nx">Title</span><span class="o">></span><span class="p">{</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="o"><</span><span class="err">/Title></span> </span><span id="__span-0-16"><a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a><span class="w"> </span><span class="o"><</span><span class="err">/div></span> </span><span id="__span-0-17"><a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a><span class="w"> </span><span class="p">)}</span> </span><span id="__span-0-18"><a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a><span class="w"> </span><span class="o"><</span><span class="nx">div</span> </span><span id="__span-0-19"><a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">clsx</span><span class="p">(</span> </span><span id="__span-0-20"><a id="__codelineno-0-20" name="__codelineno-0-20" href="#__codelineno-0-20"></a><span class="w"> </span><span class="nx">styles</span><span class="p">.</span><span class="nx">codeBlockContent</span><span class="p">,</span> </span><span id="__span-0-21"><a id="__codelineno-0-21" name="__codelineno-0-21" href="#__codelineno-0-21"></a><span class="w"> </span><span class="nx">custom</span><span class="p">.</span><span class="nx">codeBlockContent</span><span class="p">,</span> </span><span id="__span-0-22"><a id="__codelineno-0-22" name="__codelineno-0-22" href="#__codelineno-0-22"></a><span class="w"> </span><span class="nx">eslintrcHash</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="nx">custom</span><span class="p">.</span><span class="nx">codeBlockContentWithPlayground</span><span class="p">,</span> </span><span id="__span-0-23"><a id="__codelineno-0-23" name="__codelineno-0-23" href="#__codelineno-0-23"></a><span class="w"> </span><span class="nx">eslintrcHash</span><span class="w"> </span><span class="o">&&</span> </span><span id="__span-0-24"><a id="__codelineno-0-24" name="__codelineno-0-24" href="#__codelineno-0-24"></a><span class="w"> </span><span class="nx">needsMorePadding</span><span class="w"> </span><span class="o">&&</span> </span><span id="__span-0-25"><a id="__codelineno-0-25" name="__codelineno-0-25" href="#__codelineno-0-25"></a><span class="w"> </span><span class="nx">custom</span><span class="p">.</span><span class="nx">codeBlockContentMorePadding</span><span class="p">,</span> </span><span id="__span-0-26"><a id="__codelineno-0-26" name="__codelineno-0-26" href="#__codelineno-0-26"></a><span class="w"> </span><span class="p">)}</span> </span><span id="__span-0-27"><a id="__codelineno-0-27" name="__codelineno-0-27" href="#__codelineno-0-27"></a><span class="w"> </span><span class="o">></span> </span><span id="__span-0-28"><a id="__codelineno-0-28" name="__codelineno-0-28" href="#__codelineno-0-28"></a><span class="w"> </span><span class="o"><</span><span class="nx">Content</span><span class="w"> </span><span class="o">/></span> </span><span id="__span-0-29"><a id="__codelineno-0-29" name="__codelineno-0-29" href="#__codelineno-0-29"></a><span class="w"> </span><span class="p">{</span><span class="nx">eslintrcHash</span><span class="w"> </span><span class="o">&&</span><span class="w"> </span><span class="p">(</span> </span><span id="__span-0-30"><a id="__codelineno-0-30" name="__codelineno-0-30" href="#__codelineno-0-30"></a><span class="w"> </span><span class="o"><</span><span class="nx">TryInPlayground</span> </span><span id="__span-0-31"><a id="__codelineno-0-31" name="__codelineno-0-31" href="#__codelineno-0-31"></a><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">clsx</span><span class="p">(</span> </span><span id="__span-0-32"><a id="__codelineno-0-32" name="__codelineno-0-32" href="#__codelineno-0-32"></a><span class="w"> </span><span class="s1">'button button--primary button--outline'</span><span class="p">,</span> </span><span id="__span-0-33"><a id="__codelineno-0-33" name="__codelineno-0-33" href="#__codelineno-0-33"></a><span class="w"> </span><span class="nx">custom</span><span class="p">.</span><span class="nx">playgroundButton</span><span class="p">,</span> </span><span id="__span-0-34"><a id="__codelineno-0-34" name="__codelineno-0-34" href="#__codelineno-0-34"></a><span class="w"> </span><span class="p">)}</span> </span><span id="__span-0-35"><a id="__codelineno-0-35" name="__codelineno-0-35" href="#__codelineno-0-35"></a><span class="w"> </span><span class="nx">codeHash</span><span class="o">=</span><span class="p">{</span><span class="nx">codeHash</span><span class="p">}</span> </span><span id="__span-0-36"><a id="__codelineno-0-36" name="__codelineno-0-36" href="#__codelineno-0-36"></a><span class="w"> </span><span class="nx">eslintrcHash</span><span class="o">=</span><span class="p">{</span><span class="nx">eslintrcHash</span><span class="p">}</span> </span><span id="__span-0-37"><a id="__codelineno-0-37" name="__codelineno-0-37" href="#__codelineno-0-37"></a><span class="w"> </span><span class="nx">language</span><span class="o">=</span><span class="p">{</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">language</span><span class="p">}</span> </span><span id="__span-0-38"><a id="__codelineno-0-38" name="__codelineno-0-38" href="#__codelineno-0-38"></a><span class="w"> </span><span class="o">></span> </span><span id="__span-0-39"><a id="__codelineno-0-39" name="__codelineno-0-39" href="#__codelineno-0-39"></a><span class="w"> </span><span class="nx">Open</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">Playground</span> </span><span id="__span-0-40"><a id="__codelineno-0-40" name="__codelineno-0-40" href="#__codelineno-0-40"></a><span class="w"> </span><span class="o"><</span><span class="err">/TryInPlayground></span> </span><span id="__span-0-41"><a id="__codelineno-0-41" name="__codelineno-0-41" href="#__codelineno-0-41"></a><span class="w"> </span><span class="p">)}</span> </span><span id="__span-0-42"><a id="__codelineno-0-42" name="__codelineno-0-42" href="#__codelineno-0-42"></a><span class="w"> </span><span class="o"><</span><span class="nx">Buttons</span><span class="w"> </span><span class="o">/></span> </span><span id="__span-0-43"><a id="__codelineno-0-43" name="__codelineno-0-43" href="#__codelineno-0-43"></a><span class="w"> </span><span class="o"><</span><span class="err">/div></span> </span><span id="__span-0-44"><a id="__codelineno-0-44" name="__codelineno-0-44" href="#__codelineno-0-44"></a><span class="w"> </span><span class="o"><</span><span class="err">/Container></span> </span><span id="__span-0-45"><a id="__codelineno-0-45" name="__codelineno-0-45" href="#__codelineno-0-45"></a><span class="w"> </span><span class="p">);</span> </span><span id="__span-0-46"><a id="__codelineno-0-46" name="__codelineno-0-46" href="#__codelineno-0-46"></a><span class="p">}</span> </span></code></pre></div> </details> <hr /> <h2 id="interfaces">Interfaces<a class="headerlink" href="#interfaces" title="Permanent link">¶</a></h2> <h3 id="props"><code>Props</code><a class="headerlink" href="#props" title="Permanent link">¶</a></h3> <details><summary>Interface Code</summary> <div class="language-ts highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="kd">interface</span><span class="w"> </span><span class="nx">Props</span><span class="w"> </span><span class="p">{</span> </span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="w"> </span><span class="k">readonly</span><span class="w"> </span><span class="nx">eslintrcHash?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span> </span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="w"> </span><span class="p">}</span> </span></code></pre></div> </details> <h4 id="properties">Properties<a class="headerlink" href="#properties" title="Permanent link">¶</a></h4> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Optional</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>eslintrcHash</code></td> <td><code>string</code></td> <td>✓</td> <td><em>not shown</em></td> </tr> </tbody> </table> <hr /> <p><em>Generated by <a href="https://syntaxscribe.com">Syntax Scribe</a></em></p> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> </main> <footer class="md-footer"> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Documentation generated by <a href="https://syntaxscribe.com">Syntax Scribe</a> </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs </a> </div> <div class="md-social"> <a href="https://x.com/wright_code" target="_blank" rel="noopener" title="x.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5.3 9.1.3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53C87.4 130.8 165 172.4 252.1 176.9c-1.6-7.8-2.6-15.9-2.6-24C249.5 95.1 296.3 48 354.4 48c30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"annotate": null, "base": "../../../../../..", "features": ["navigation.expand", "navigation.instant", "search.highlight", "search.suggest", "toc.integrate", "content.code.annotate"], "search": "../../../../../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script> <script src="../../../../../../assets/javascripts/bundle.d7400e89.min.js"></script> </body> </html>