mirror of
https://github.com/facebook/docusaurus.git
synced 2025-12-31 07:32:53 +00:00
212 lines
239 KiB
HTML
212 lines
239 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-guides/markdown-features/code-blocks" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.2.1">
|
||
<title data-rh="true">Code blocks | Docusaurus</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://docusaurus.io/docs/markdown-features/code-blocks"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="fr"><meta data-rh="true" property="og:locale:alternate" content="pt_BR"><meta data-rh="true" property="og:locale:alternate" content="ko"><meta data-rh="true" property="og:locale:alternate" content="zh_CN"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Code blocks | Docusaurus"><meta data-rh="true" name="description" content="Handling code blocks in Docusaurus Markdown"><meta data-rh="true" property="og:description" content="Handling code blocks in Docusaurus Markdown"><link data-rh="true" rel="icon" href="/img/docusaurus.ico"><link data-rh="true" rel="canonical" href="https://docusaurus.io/docs/markdown-features/code-blocks"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/markdown-features/code-blocks" hreflang="en"><link data-rh="true" rel="alternate" href="https://docusaurus.io/fr/docs/markdown-features/code-blocks" hreflang="fr"><link data-rh="true" rel="alternate" href="https://docusaurus.io/pt-BR/docs/markdown-features/code-blocks" hreflang="pt-BR"><link data-rh="true" rel="alternate" href="https://docusaurus.io/ko/docs/markdown-features/code-blocks" hreflang="ko"><link data-rh="true" rel="alternate" href="https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks" hreflang="zh-CN"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/markdown-features/code-blocks" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://X1Z85QJPUV-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/blog/feed.json" title="Docusaurus JSON Feed">
|
||
|
||
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E5CR2Q1NRE"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-E5CR2Q1NRE",{})</script>
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Docusaurus" href="/opensearch.xml">
|
||
<link rel="alternate" type="application/rss+xml" href="/changelog/rss.xml" title="Docusaurus changelog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/changelog/atom.xml" title="Docusaurus changelog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/changelog/feed.json" title="Docusaurus changelog JSON Feed">
|
||
|
||
|
||
|
||
<link rel="icon" href="/img/docusaurus.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="rgb(37, 194, 160)">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
|
||
<link rel="apple-touch-icon" href="/img/docusaurus.png">
|
||
<link rel="mask-icon" href="/img/docusaurus.png" color="rgb(62, 204, 94)">
|
||
<meta name="msapplication-TileImage" content="/img/docusaurus.png">
|
||
<meta name="msapplication-TileColor" content="#000">
|
||
|
||
|
||
|
||
<link rel="alternate" type="application/rss+xml" href="/tests/blog/rss.xml" title="Docusaurus Tests Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/tests/blog/atom.xml" title="Docusaurus Tests Blog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/tests/blog/feed.json" title="Docusaurus Tests Blog JSON Feed">
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/katex/katex.min.css"><link rel="stylesheet" href="/assets/css/styles.76313542.css">
|
||
<script src="/assets/js/runtime~main.e1b4125a.js" defer="defer"></script>
|
||
<script src="/assets/js/main.5c3bbcf1.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_UHvc" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_cTOO" role="banner"><div class="announcementBarPlaceholder_Lqfg"></div><div class="content_ttnW announcementBarContent_PjqA">🎉️ <b><a target="_blank" href="https://docusaurus.io/blog/releases/3.2">Docusaurus v3.2</a> is out!</b> 🥳️</div><button type="button" aria-label="Close" class="clean-btn close closeButton_nmpN announcementBarClose_UFLi"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_uAgx"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"></div><b class="navbar__title text--truncate">Docusaurus</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Docs</a><a class="navbar__item navbar__link" href="/docs/cli">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/community/support">Community</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs">Canary 🚧</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/markdown-features/code-blocks">Canary 🚧</a></li><li><hr class="dropdown-separator"></li><li class="dropdown-archived-versions"><b>Archived versions</b></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.3.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.3.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.2.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.2.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.1.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.1.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.0.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.0.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://v1.docusaurus.io" target="_blank" rel="noopener noreferrer" class="dropdown__link">1.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><hr class="dropdown-separator"></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_tqOs"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/docs/markdown-features/code-blocks" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/fr/docs/markdown-features/code-blocks" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="fr">Français</a></li><li><a href="/pt-BR/docs/markdown-features/code-blocks" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="pt-BR">Português (Brasil)</a></li><li><a href="/ko/docs/markdown-features/code-blocks" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ko">한국어</a></li><li><a href="/zh-CN/docs/markdown-features/code-blocks" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="zh-CN">中文（中国）</a></li><li><hr style="margin: 0.3rem 0;"></li><li><a href="https://github.com/facebook/docusaurus/issues/3526" target="_blank" rel="noopener noreferrer" class="dropdown__link">Help Us Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_bT41 colorModeToggle_UolE"><button class="clean-btn toggleButton_x9TT toggleButtonDisabled_Dj8q" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_dnYY"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_OBbf"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_dDCC"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_PEsc"><div class="docsWrapper_lLmf"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_PuQw" type="button"></button><div class="docRoot_kBZ6"><aside class="theme-doc-sidebar-container docSidebarContainer_S51O"><div class="sidebarViewport_K3q9"><div class="sidebar_vtcw sidebarWithHideableNavbar_tZ9s"><a tabindex="-1" class="sidebarLogo_UK0N" href="/"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"><b>Docusaurus</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_rWGR menuWithAnnouncementBar_Pf08"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/getting-started">Getting Started</a><button aria-label="Collapse sidebar category 'Getting Started'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/configuration">Configuration</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/typescript-support">TypeScript Support</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/category/guides">Guides</a><button aria-label="Collapse sidebar category 'Guides'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/creating-pages">Pages</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/docs-introduction">Docs</a><button aria-label="Expand sidebar category 'Docs'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/blog">Blog</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/docs/markdown-features">Markdown Features</a><button aria-label="Collapse sidebar category 'Markdown Features'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/react">MDX and React</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/tabs">Tabs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/markdown-features/code-blocks">Code blocks</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/admonitions">Admonitions</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/toc">Headings and Table of contents</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/assets">Assets</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/links">Markdown links</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/plugins">MDX Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/math-equations">Math Equations</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/diagrams">Diagrams</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/markdown-features/head-metadata">Head metadata</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/styling-layout">Styling and Layout</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/swizzling">Swizzling</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/static-assets">Static Assets</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/search">Search</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/browser-support">Browser support</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/seo">SEO</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/using-plugins">Using Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/deployment">Deployment</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/docs/i18n/introduction">Internationalization</a><button aria-label="Expand sidebar category 'Internationalization'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/whats-next">What's next?</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/advanced">Advanced Guides</a><button aria-label="Expand sidebar category 'Advanced Guides'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/migration">Upgrading</a><button aria-label="Expand sidebar category 'Upgrading'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PUyN"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_DI0B"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_EfwR"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_n6xZ"><div class="docItemContainer_RhpI"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Wvrh" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_uaSn"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/category/guides"><span itemprop="name">Guides</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/markdown-features"><span itemprop="name">Markdown Features</span></a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Code blocks</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_BEWm theme-doc-toc-mobile tocMobile_NSfz"><button type="button" class="clean-btn tocCollapsibleButton_IbtT">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Code blocks</h1>
|
||
<!-- -->
|
||
<p>Code blocks within documentation are super-powered 💪.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="code-title">Code title<a href="#code-title" class="hash-link" aria-label="Direct link to Code title" title="Direct link to Code title"></a></h2>
|
||
<p>You can add a title to the code block by adding a <code>title</code> key after the language (leave a space between them).</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">jsx title="/src/components/HelloCodeTitle.js"</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-jsx">function HelloCodeTitle(props) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return <h1>Hello, {props.name}</h1>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">}</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">/src/components/HelloCodeTitle.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">HelloCodeTitle</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">h1</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Hello, </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">h1</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="syntax-highlighting">Syntax highlighting<a href="#syntax-highlighting" class="hash-link" aria-label="Direct link to Syntax highlighting" title="Direct link to Syntax highlighting"></a></h2>
|
||
<p>Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out <a href="https://github.com/mdx-js/specification" target="_blank" rel="noopener noreferrer">this reference</a> for the specifications of MDX.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">js</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-js">console.log('Every repo must come with a mascot.');</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by <a href="https://github.com/FormidableLabs/prism-react-renderer" target="_blank" rel="noopener noreferrer">Prism React Renderer</a>.</p>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token console class-name" style="color:#116329">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'Every repo must come with a mascot.'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="theming">Theming<a href="#theming" class="hash-link" aria-label="Direct link to Theming" title="Direct link to Theming"></a></h3>
|
||
<p>By default, the Prism <a href="https://github.com/FormidableLabs/prism-react-renderer#theming" target="_blank" rel="noopener noreferrer">syntax highlighting theme</a> we use is <a href="https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts" target="_blank" rel="noopener noreferrer">Palenight</a>. You can change this to another theme by passing <code>theme</code> field in <code>prism</code> as <code>themeConfig</code> in your docusaurus.config.js.</p>
|
||
<p>For example, if you prefer to use the <code>dracula</code> highlighting theme:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus.config.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">themes </span><span class="token imports keyword module" style="color:#CF222E">as</span><span class="token imports"> prismThemes</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'prism-react-renderer'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">themeConfig</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">prism</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">theme</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> prismThemes</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">dracula</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Because a Prism theme is just a JS object, you can also write your own theme if you are not satisfied with the default. Docusaurus enhances the <code>github</code> and <code>vsDark</code> themes to provide richer highlight, and you can check our implementations for the <a href="https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.ts" target="_blank" rel="noopener noreferrer">light</a> and <a href="https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.ts" target="_blank" rel="noopener noreferrer">dark</a> code block themes.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="supported-languages">Supported Languages<a href="#supported-languages" class="hash-link" aria-label="Direct link to Supported Languages" title="Direct link to Supported Languages"></a></h3>
|
||
<p>By default, Docusaurus comes with a subset of <a href="https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23" target="_blank" rel="noopener noreferrer">commonly used languages</a>.</p>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_Knsx"><p>Some popular languages like Java, C#, or PHP are not enabled by default.</p></div></div>
|
||
<p>To add syntax highlighting for any of the other <a href="https://prismjs.com/#supported-languages" target="_blank" rel="noopener noreferrer">Prism-supported languages</a>, define it in an array of additional languages.</p>
|
||
<div class="theme-admonition theme-admonition-note admonition_o5H7 alert alert--secondary"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_Knsx"><p>Each additional language has to be a valid Prism component name. For example, Prism would map the <em>language</em> <code>cs</code> to <code>csharp</code>, but only <code>prism-csharp.js</code> exists as a <em>component</em>, so you need to use <code>additionalLanguages: ['csharp']</code>. You can look into <code>node_modules/prismjs/components</code> to find all components (languages) available.</p></div></div>
|
||
<p>For example, if you want to add highlighting for the PowerShell language:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus.config.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">themeConfig</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">prism</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">additionalLanguages</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#C6105F">'powershell'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>After adding <code>additionalLanguages</code>, restart Docusaurus.</p>
|
||
<p>If you want to add highlighting for languages not yet supported by Prism, you can swizzle <code>prism-include-languages</code>:</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">npm</span><span class="token plain"> run swizzle @docusaurus/theme-classic prism-include-languages</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">yarn</span><span class="token plain"> swizzle @docusaurus/theme-classic prism-include-languages</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">pnpm</span><span class="token plain"> run swizzle @docusaurus/theme-classic prism-include-languages</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<p>It will produce <code>prism-include-languages.js</code> in your <code>src/theme</code> folder. You can add highlighting support for custom languages by editing <code>prism-include-languages.js</code>:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">src/theme/prism-include-languages.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#8250DF">prismIncludeLanguages</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter maybe-class-name" style="color:#953800">Prism</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> additionalLanguages</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">forEach</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">lang</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token template-string string" style="color:#C6105F">prismjs/components/prism-</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">lang</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'/path/to/your/prism-language-definition'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>You can refer to <a href="https://github.com/PrismJS/prism/tree/master/components" target="_blank" rel="noopener noreferrer">Prism's official language definitions</a> when you are writing your own language definitions.</p>
|
||
<p>When adding a custom language definition, you do not need to add the language to the <code>additionalLanguages</code> config array, since Docusaurus only looks up the <code>additionalLanguages</code> strings in languages that Prism provides. Adding the language import in <code>prism-include-languages.js</code> is sufficient.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="line-highlighting">Line highlighting<a href="#line-highlighting" class="hash-link" aria-label="Direct link to Line highlighting" title="Direct link to Line highlighting"></a></h2>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="highlighting-with-comments">Highlighting with comments<a href="#highlighting-with-comments" class="hash-link" aria-label="Direct link to Highlighting with comments" title="Direct link to Highlighting with comments"></a></h3>
|
||
<p>You can use comments with <code>highlight-next-line</code>, <code>highlight-start</code>, and <code>highlight-end</code> to select which lines are highlighted.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">js</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-js">function HighlightSomeText(highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> if (highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> // highlight-next-line</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> return 'This text is highlighted!';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> return 'Nothing highlighted';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">function HighlightMoreText(highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> // highlight-start</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> if (highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> return 'This range is highlighted!';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> // highlight-end</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js"> return 'Nothing highlighted';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">}</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">HighlightSomeText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">highlight</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">highlight</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'This text is highlighted!'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'Nothing highlighted'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">HighlightMoreText</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">highlight</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">highlight</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'This range is highlighted!'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'Nothing highlighted'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<p>Supported commenting syntax:</p>
|
||
<table><thead><tr><th>Style</th><th>Syntax</th></tr></thead><tbody><tr><td>C-style</td><td><code>/* ... */</code> and <code>// ...</code></td></tr><tr><td>JSX-style</td><td><code>{/* ... */}</code></td></tr><tr><td>Bash-style</td><td><code># ...</code></td></tr><tr><td>HTML-style</td><td><code><!-- ... --></code></td></tr></tbody></table>
|
||
<p>We will do our best to infer which set of comment styles to use based on the language, and default to allowing <em>all</em> comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome. Note that different comment styles have no semantic difference, only their content does.</p>
|
||
<p>You can set your own background color for highlighted code line in your <code>src/css/custom.css</code> which will better fit to your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly.</p>
|
||
<div class="language-css codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">/src/css/custom.css</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-css codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token selector pseudo-class" style="color:#6F42C1">:root</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token variable" style="color:#E36209">--docusaurus-highlighted-code-line-bg</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token color function" style="color:#8250DF">rgb</span><span class="token color punctuation" style="color:#393A34">(</span><span class="token color number" style="color:#005CC5">72</span><span class="token color punctuation" style="color:#393A34">,</span><span class="token color" style="color:#005CC5"> </span><span class="token color number" style="color:#005CC5">77</span><span class="token color punctuation" style="color:#393A34">,</span><span class="token color" style="color:#005CC5"> </span><span class="token color number" style="color:#005CC5">91</span><span class="token color punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">/* If you have a different syntax highlighting theme for dark mode. */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token selector attribute punctuation" style="color:#393A34">[</span><span class="token selector attribute attr-name" style="color:#0550AE">data-theme</span><span class="token selector attribute operator" style="color:#D73A49">=</span><span class="token selector attribute attr-value" style="color:#C6105F">'dark'</span><span class="token selector attribute punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">/* Color which works with dark mode syntax highlighting theme */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token variable" style="color:#E36209">--docusaurus-highlighted-code-line-bg</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token color function" style="color:#8250DF">rgb</span><span class="token color punctuation" style="color:#393A34">(</span><span class="token color number" style="color:#005CC5">100</span><span class="token color punctuation" style="color:#393A34">,</span><span class="token color" style="color:#005CC5"> </span><span class="token color number" style="color:#005CC5">100</span><span class="token color punctuation" style="color:#393A34">,</span><span class="token color" style="color:#005CC5"> </span><span class="token color number" style="color:#005CC5">100</span><span class="token color punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>If you also need to style the highlighted code line in some other way, you can target on <code>theme-code-block-highlighted-line</code> CSS class.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="highlighting-with-metadata-string">Highlighting with metadata string<a href="#highlighting-with-metadata-string" class="hash-link" aria-label="Direct link to Highlighting with metadata string" title="Direct link to Highlighting with metadata string"></a></h3>
|
||
<p>You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the <code>parse-number-range</code> library and you can find <a href="https://www.npmjs.com/package/parse-numeric-range" target="_blank" rel="noopener noreferrer">more syntax</a> on their project details.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">jsx {1,4-6,11}</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-jsx">import React from 'react';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">function MyComponent(props) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> if (props.isBar) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return <div>Bar</div>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return <div>Foo</div>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">export default MyComponent;</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">isBar</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Bar</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Foo</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token maybe-class-name">MyComponent</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<div class="theme-admonition theme-admonition-tip admonition_o5H7 alert alert--success"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>prefer comments</div><div class="admonitionContent_Knsx"><p>Prefer highlighting with comments where you can. By inlining highlight in the code, you don't have to manually count the lines if your code block becomes long. If you add/remove lines, you also don't have to offset your line ranges.</p><div class="language-diff codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-diff codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> ```jsx {3}</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> ```jsx {4}</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> function HighlightSomeText(highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> if (highlight) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> console.log('Highlighted text found');</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> return 'This text is highlighted!';</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> return 'Nothing highlighted';</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> ```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Below, we will introduce how the magic comment system can be extended to define custom directives and their functionalities. The magic comments would only be parsed if a highlight metastring is not present.</p></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="custom-magic-comments">Custom magic comments<a href="#custom-magic-comments" class="hash-link" aria-label="Direct link to Custom magic comments" title="Direct link to Custom magic comments"></a></h3>
|
||
<p><code>// highlight-next-line</code> and <code>// highlight-start</code> etc. are called "magic comments", because they will be parsed and removed, and their purposes are to add metadata to the next line, or the section that the pair of start- and end-comments enclose.</p>
|
||
<p>You can declare custom magic comments through theme config. For example, you can register another magic comment that adds a <code>code-block-error-line</code> class name:</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">docusaurus.config.js</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">src/css/custom.css</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">myDoc.md</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">themeConfig</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">prism</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">magicComments</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Remember to extend the default highlight class name as well!</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">className</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'theme-code-block-highlighted-line'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">line</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'highlight-next-line'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">block</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">start</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'highlight-start'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">end</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'highlight-end'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">className</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'code-block-error-line'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">line</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'This will error'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-css codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-css codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token selector class" style="color:#6F42C1">.code-block-error-line</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#005CC5">background-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token hexcode color" style="color:#005CC5">#ff000020</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#005CC5">display</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> block</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#005CC5">margin</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">calc</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#005CC5">-1</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">*</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">var</span><span class="token punctuation" style="color:#393A34">(</span><span class="token variable" style="color:#E36209">--ifm-pre-padding</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#005CC5">padding</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">var</span><span class="token punctuation" style="color:#393A34">(</span><span class="token variable" style="color:#E36209">--ifm-pre-padding</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#005CC5">border-left</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">3</span><span class="token unit" style="color:#D73A49">px</span><span class="token plain"> solid </span><span class="token hexcode color" style="color:#005CC5">#ff000080</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token plain">In JavaScript, trying to access properties on </span><span class="token code-snippet code keyword" style="color:#CF222E">`null`</span><span class="token plain"> will error.</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">js</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-js">const name = null;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">// This will error</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">console.log(name.toUpperCase());</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-js">// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><p>In JavaScript, trying to access properties on <code>null</code> will error.</p><div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> name </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#CF222E">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line code-block-error-line" style="color:#393A34"><span class="token plain"></span><span class="token console class-name" style="color:#116329">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">name</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">toUpperCase</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<p>If you use number ranges in metastring (the <code>{1,3-4}</code> syntax), Docusaurus will apply the <strong>first <code>magicComments</code> entry</strong>'s class name. This, by default, is <code>theme-code-block-highlighted-line</code>, but if you change the <code>magicComments</code> config and use a different entry as the first one, the meaning of the metastring range will change as well.</p>
|
||
<p>You can disable the default line highlighting comments with <code>magicComments: []</code>. If there's no magic comment config, but Docusaurus encounters a code block containing a metastring range, it will error because there will be no class name to apply—the highlighting class name, after all, is just a magic comment entry.</p>
|
||
<p>Every magic comment entry will contain three keys: <code>className</code> (required), <code>line</code>, which applies to the directly next line, or <code>block</code> (containing <code>start</code> and <code>end</code>), which applies to the entire block enclosed by the two comments.</p>
|
||
<p>Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through <a href="/docs/swizzling">swizzling</a>.</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">npm</span><span class="token plain"> run swizzle @docusaurus/theme-classic CodeBlock/Line</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">yarn</span><span class="token plain"> swizzle @docusaurus/theme-classic CodeBlock/Line</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">pnpm</span><span class="token plain"> run swizzle @docusaurus/theme-classic CodeBlock/Line</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<p>The <code>Line</code> component will receive the list of class names, based on which you can conditionally render different markup.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="line-numbering">Line numbering<a href="#line-numbering" class="hash-link" aria-label="Direct link to Line numbering" title="Direct link to Line numbering"></a></h2>
|
||
<p>You can enable line numbering for your code block by using <code>showLineNumbers</code> key within the language meta string (don't forget to add space directly before the key).</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">jsx {1,4-6,11} showLineNumbers</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-jsx">import React from 'react';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">function MyComponent(props) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> if (props.isBar) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return <div>Bar</div>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return <div>Foo</div>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">export default MyComponent;</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf codeBlockLinesWithNumbering_FU9Q"><span class="token-line theme-code-block-highlighted-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">MyComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">isBar</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Bar</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Foo</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token maybe-class-name">MyComponent</span><span class="token punctuation" style="color:#393A34">;</span></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="interactive-code-editor">Interactive code editor<a href="#interactive-code-editor" class="hash-link" aria-label="Direct link to Interactive code editor" title="Direct link to Interactive code editor"></a></h2>
|
||
<p>(Powered by <a href="https://github.com/FormidableLabs/react-live" target="_blank" rel="noopener noreferrer">React Live</a>)</p>
|
||
<p>You can create an interactive coding editor with the <code>@docusaurus/theme-live-codeblock</code> plugin. First, add the plugin to your package.</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">npm</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:#E36209">--save</span><span class="token plain"> @docusaurus/theme-live-codeblock</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">yarn</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">add</span><span class="token plain"> @docusaurus/theme-live-codeblock</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">add</span><span class="token plain"> @docusaurus/theme-live-codeblock</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<p>You will also need to add the plugin to your <code>docusaurus.config.js</code>.</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">themes</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#C6105F">'@docusaurus/theme-live-codeblock'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>To use the plugin, create a code block with <code>live</code> attached to the language meta string.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">jsx live</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-jsx">function Clock(props) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> const [date, setDate] = useState(new Date());</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> useEffect(() => {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> const timerID = setInterval(() => tick(), 1000);</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return function cleanup() {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> clearInterval(timerID);</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> };</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> });</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> function tick() {</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> setDate(new Date());</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> return (</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> <div></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> <h2>It is {date.toLocaleTimeString()}.</h2></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> </div></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx"> );</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">}</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.</p>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="playgroundContainer_6Ior"><div class="playgroundHeader_Tvsk">Live Editor</div><div class="playgroundEditor_TySg"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#393A34;background-color:#f6f8fa" spellcheck="false"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">Clock</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">date</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> setDate</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">useState</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#CF222E">new</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> timerID </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">setInterval</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token function" style="color:#8250DF">tick</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34">
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">cleanup</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">clearInterval</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">timerID</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34">
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">tick</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">setDate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#CF222E">new</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Date</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34">
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">h2</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">It is </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">date</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">toLocaleTimeString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text">.</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">h2</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span>
|
||
</span></pre></div><div class="playgroundHeader_Tvsk">Result</div><div class="playgroundPreview_mApW"><div>Loading...</div></div></div></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="imports">Imports<a href="#imports" class="hash-link" aria-label="Direct link to Imports" title="Direct link to Imports"></a></h3>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>react-live and imports</div><div class="admonitionContent_Knsx"><p>It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.</p></div></div>
|
||
<p>By default, all React imports are available. If you need more imports available, swizzle the react-live scope:</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">npm</span><span class="token plain"> run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- </span><span class="token parameter variable" style="color:#E36209">--eject</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">yarn</span><span class="token plain"> swizzle @docusaurus/theme-live-codeblock ReactLiveScope </span><span class="token parameter variable" style="color:#E36209">--eject</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">pnpm</span><span class="token plain"> run swizzle @docusaurus/theme-live-codeblock ReactLiveScope </span><span class="token parameter variable" style="color:#E36209">--eject</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">src/theme/ReactLiveScope/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name" style="color:#8250DF">ButtonExample</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">button</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag spread punctuation" style="color:#393A34">{</span><span class="token tag spread operator" style="color:#D73A49">...</span><span class="token tag spread" style="color:#22863A">props</span><span class="token tag spread punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">backgroundColor</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript string" style="color:#C6105F">'white'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">color</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript string" style="color:#C6105F">'black'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">border</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript string" style="color:#C6105F">'solid red'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">borderRadius</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript number" style="color:#005CC5">20</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">padding</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript number" style="color:#005CC5">10</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript literal-property property" style="color:#005CC5">cursor</span><span class="token tag script language-javascript operator" style="color:#D73A49">:</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript string" style="color:#C6105F">'pointer'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript spread operator" style="color:#D73A49">...</span><span class="token tag script language-javascript" style="color:#24292E">props</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript property-access" style="color:#24292E">style</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#24292E"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Add react-live imports you need here</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token maybe-class-name">ReactLiveScope</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token spread operator" style="color:#D73A49">...</span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token maybe-class-name">ButtonExample</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token maybe-class-name">ReactLiveScope</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>The <code>ButtonExample</code> component is now available to use:</p>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="playgroundContainer_6Ior"><div class="playgroundHeader_Tvsk">Live Editor</div><div class="playgroundEditor_TySg"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#393A34;background-color:#f6f8fa" spellcheck="false"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">MyPlayground</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">ButtonExample</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript arrow operator" style="color:#D73A49">=></span><span class="token tag script language-javascript" style="color:#24292E"> </span><span class="token tag script language-javascript function" style="color:#8250DF">alert</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript string" style="color:#C6105F">'hey!'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Click me</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">ButtonExample</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span>
|
||
</span></pre></div><div class="playgroundHeader_Tvsk">Result</div><div class="playgroundPreview_mApW"><div>Loading...</div></div></div></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="imperative-rendering-noinline">Imperative Rendering (noInline)<a href="#imperative-rendering-noinline" class="hash-link" aria-label="Direct link to Imperative Rendering (noInline)" title="Direct link to Imperative Rendering (noInline)"></a></h3>
|
||
<p>The <code>noInline</code> option should be used to avoid errors when your code spans multiple components or variables.</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">jsx live noInline</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-jsx">const project = 'Docusaurus';</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">const Greeting = () => <p>Hello {project}!</p>;</span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code code-block language-jsx">render(<Greeting />);</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Unlike an ordinary interactive code block, when using <code>noInline</code> React Live won't wrap your code in an inline function to render it.</p>
|
||
<p>You will need to explicitly call <code>render()</code> at the end of your code to display the output.</p>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="playgroundContainer_6Ior"><div class="playgroundHeader_Tvsk">Live Editor</div><div class="playgroundEditor_TySg"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#393A34;background-color:#f6f8fa" spellcheck="false"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> project </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"Docusaurus"</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34">
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#8250DF">Greeting</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">p</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Hello </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">project</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text">!</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">p</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34">
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#8250DF">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">Greeting</span><span class="token tag" style="color:#22863A"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span>
|
||
</span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span>
|
||
</span></pre></div><div class="playgroundHeader_Tvsk">Result</div><div class="playgroundPreview_mApW"><div>Loading...</div></div></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="using-jsx-markup">Using JSX markup in code blocks<a href="#using-jsx-markup" class="hash-link" aria-label="Direct link to Using JSX markup in code blocks" title="Direct link to Using JSX markup in code blocks"></a></h2>
|
||
<p>Code block in Markdown always preserves its content as plain text, meaning you can't do something like:</p>
|
||
<div class="language-ts codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-ts codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">EditUrlFunction</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">params</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// This doesn't turn into a link (for good reason!)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> version</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49"><</span><span class="token plain">a href</span><span class="token operator" style="color:#D73A49">=</span><span class="token string" style="color:#C6105F">"/docs/versioning"</span><span class="token operator" style="color:#D73A49">></span><span class="token plain">Version</span><span class="token operator" style="color:#D73A49"><</span><span class="token operator" style="color:#D73A49">/</span><span class="token plain">a</span><span class="token operator" style="color:#D73A49">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> versionDocsDirPath</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> docPath</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> permalink</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> locale</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">undefined</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>If you want to embed HTML markup such as anchor links or bold type, you can use the <code><pre></code> tag, <code><code></code> tag, or <code><CodeBlock></code> component.</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">pre</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">b</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Input: </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">b</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">1 2 3 4</span><span class="token punctuation" style="color:#393A34">{</span><span class="token string" style="color:#C6105F">'\n'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">b</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Output: </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">b</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">"366300745"</span><span class="token punctuation" style="color:#393A34">{</span><span class="token string" style="color:#C6105F">'\n'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">pre</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><pre><b>Input: </b>1 2 3 4
|
||
<b>Output: </b>"366300745"
|
||
</pre></div></div>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>MDX is whitespace insensitive</div><div class="admonitionContent_Knsx"><p>MDX is in line with JSX behavior: line break characters, even when inside <code><pre></code>, are turned into spaces. You have to explicitly write the new line character for it to be printed out.</p></div></div>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_Knsx"><p>Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="multi-language-support-code-blocks">Multi-language support code blocks<a href="#multi-language-support-code-blocks" class="hash-link" aria-label="Direct link to Multi-language support code blocks" title="Direct link to Multi-language support code blocks"></a></h2>
|
||
<p>With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component.</p>
|
||
<p>Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose <a href="/docs/markdown-features/tabs"><code><Tabs></code></a> component in the classic theme so that you can use it for other non-code scenarios as well.</p>
|
||
<p>The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are <strong>intentional</strong>. This is a <a href="/docs/markdown-features/react#markdown-and-jsx-interoperability">current limitation of MDX</a>: you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Tabs</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@theme/Tabs'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">TabItem</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@theme/TabItem'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">Tabs</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">js</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">JavaScript</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```js</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">function helloWorld() {</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> console.log('Hello, world!');</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">py</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">Python</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```py</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">def hello_world():</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> print("Hello, world!")</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">value</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">java</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">Java</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```java</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">class HelloWorld {</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> public static void main(String args[]) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> System.out.println("Hello, World");</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text">```</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">TabItem</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">Tabs</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>And you will get the following:</p>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">JavaScript</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Python</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Java</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">helloWorld</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name" style="color:#116329">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'Hello, world!'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-py codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-py codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">def</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">hello_world</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">print</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"Hello, world!"</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-java codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-java codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">class</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">HelloWorld</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">public</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">static</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">void</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">main</span><span class="token punctuation" style="color:#393A34">(</span><span class="token class-name" style="color:#116329">String</span><span class="token plain"> args</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token class-name" style="color:#116329">System</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">out</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">println</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"Hello, World"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div></div>
|
||
<p>If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the <a href="/docs/markdown-features/tabs#syncing-tab-choices">Syncing tab choices section</a>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="npm2yarn-remark-plugin">Docusaurus npm2yarn remark plugin<a href="#npm2yarn-remark-plugin" class="hash-link" aria-label="Direct link to Docusaurus npm2yarn remark plugin" title="Direct link to Docusaurus npm2yarn remark plugin"></a></h3>
|
||
<p>Displaying CLI commands in both npm and Yarn is a very common need, for example:</p>
|
||
<div class="tabs-container tabList_Qoir"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_AQgk tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">Yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_AQgk">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_pnkT"><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">npm</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">install</span><span class="token plain"> @docusaurus/remark-plugin-npm2yarn</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">yarn</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">add</span><span class="token plain"> @docusaurus/remark-plugin-npm2yarn</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_pnkT" hidden=""><div class="language-bash codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-bash codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#8250DF">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">add</span><span class="token plain"> @docusaurus/remark-plugin-npm2yarn</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
|
||
<p>Docusaurus provides such a utility out of the box, freeing you from using the <code>Tabs</code> component every time. To enable this feature, first install the <code>@docusaurus/remark-plugin-npm2yarn</code> package as above, and then in <code>docusaurus.config.js</code>, for the plugins where you need this feature (doc, blog, pages, etc.), register it in the <code>remarkPlugins</code> option. (See <a href="/docs/api/plugins/@docusaurus/plugin-content-docs#ex-config">Docs configuration</a> for more details on configuration format)</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus.config.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">presets</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@docusaurus/preset-classic'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">docs</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">remarkPlugins</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'@docusaurus/remark-plugin-npm2yarn'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">sync</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token boolean" style="color:#005CC5">true</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">pages</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">remarkPlugins</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'@docusaurus/remark-plugin-npm2yarn'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">blog</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">remarkPlugins</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'@docusaurus/remark-plugin-npm2yarn'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">converters</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#C6105F">'pnpm'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>And then use it by adding the <code>npm2yarn</code> key to the code block:</p>
|
||
<div class="language-md codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-md codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token code punctuation" style="color:#393A34">```</span><span class="token code code-language">bash npm2yarn</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code code-block language-bash">npm install @docusaurus/remark-plugin-npm2yarn</span><span class="token code"></span><br></span><span class="token-line" style="color:#393A34"><span class="token code"></span><span class="token code punctuation" style="color:#393A34">```</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="npm2yarn-remark-plugin-configuration">Configuration<a href="#npm2yarn-remark-plugin-configuration" class="hash-link" aria-label="Direct link to Configuration" title="Direct link to Configuration"></a></h4>
|
||
<table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>sync</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Whether to sync the selected converter across all code blocks.</td></tr><tr><td><code>converters</code></td><td><code>array</code></td><td><code>'yarn'</code>, <code>'pnpm'</code></td><td>The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice.</td></tr></tbody></table>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="usage-in-jsx">Usage in JSX<a href="#usage-in-jsx" class="hash-link" aria-label="Direct link to Usage in JSX" title="Direct link to Usage in JSX"></a></h2>
|
||
<p>Outside of Markdown, you can use the <code>@theme/CodeBlock</code> component to get the same output.</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">CodeBlock</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@theme/CodeBlock'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">MyReactPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#116329">CodeBlock</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">language</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">jsx</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">title</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#C6105F">/src/components/HelloCodeTitle.js</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#22863A"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token tag" style="color:#22863A"> </span><span class="token tag attr-name" style="color:#0550AE">showLineNumbers</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token template-string string" style="color:#C6105F">function HelloCodeTitle(props) {</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token template-string string" style="color:#C6105F"> return <h1>Hello, {props.name}</h1>;</span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token template-string string" style="color:#C6105F">}</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#116329">CodeBlock</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="browserWindow_my1Q"><div class="browserWindowHeader_jXSR"><div class="buttons_uHc7"><span class="dot_giz1" style="background:#f25f58"></span><span class="dot_giz1" style="background:#fbbe3c"></span><span class="dot_giz1" style="background:#58cb42"></span></div><div class="browserWindowAddressBar_Pd8y text--truncate">http://localhost:3000</div><div class="browserWindowMenuIcon_Vhuh"><div><span class="bar_rrRL"></span><span class="bar_rrRL"></span><span class="bar_rrRL"></span></div></div></div><div class="browserWindowBody_Idgs"><div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">/src/components/HelloCodeTitle.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf codeBlockLinesWithNumbering_FU9Q"><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">HelloCodeTitle</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">h1</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Hello, </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">h1</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_qRmp" style="color:#393A34"><span class="codeLineNumber_dS_J"></span><span class="codeLineContent_XF5l"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
|
||
<p>The props accepted are <code>language</code>, <code>title</code> and <code>showLineNumbers</code>, in the same way as you write Markdown code blocks.</p>
|
||
<p>Although discouraged, you can also pass in a <code>metastring</code> prop like <code>metastring='{1-2} title="/src/components/HelloCodeTitle.js" showLineNumbers'</code>, which is how Markdown code blocks are handled under the hood. However, we recommend you <a href="#highlighting-with-comments">use comments for highlighting lines</a>.</p>
|
||
<p>As <a href="#using-jsx-markup">previously stated</a>, syntax highlighting is only applied when the children is a simple string.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/main/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_IMw_" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_OHCJ"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2023-10-14T00:46:03.000Z" itemprop="dateModified">Oct 14, 2023</time></b> by <b>Chongyi Zheng</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/markdown-features/tabs"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Tabs</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/markdown-features/admonitions"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Admonitions</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_RLlU thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#code-title" class="table-of-contents__link toc-highlight">Code title</a></li><li><a href="#syntax-highlighting" class="table-of-contents__link toc-highlight">Syntax highlighting</a><ul><li><a href="#theming" class="table-of-contents__link toc-highlight">Theming</a></li><li><a href="#supported-languages" class="table-of-contents__link toc-highlight">Supported Languages</a></li></ul></li><li><a href="#line-highlighting" class="table-of-contents__link toc-highlight">Line highlighting</a><ul><li><a href="#highlighting-with-comments" class="table-of-contents__link toc-highlight">Highlighting with comments</a></li><li><a href="#highlighting-with-metadata-string" class="table-of-contents__link toc-highlight">Highlighting with metadata string</a></li><li><a href="#custom-magic-comments" class="table-of-contents__link toc-highlight">Custom magic comments</a></li></ul></li><li><a href="#line-numbering" class="table-of-contents__link toc-highlight">Line numbering</a></li><li><a href="#interactive-code-editor" class="table-of-contents__link toc-highlight">Interactive code editor</a><ul><li><a href="#imports" class="table-of-contents__link toc-highlight">Imports</a></li><li><a href="#imperative-rendering-noinline" class="table-of-contents__link toc-highlight">Imperative Rendering (noInline)</a></li></ul></li><li><a href="#using-jsx-markup" class="table-of-contents__link toc-highlight">Using JSX markup in code blocks</a></li><li><a href="#multi-language-support-code-blocks" class="table-of-contents__link toc-highlight">Multi-language support code blocks</a><ul><li><a href="#npm2yarn-remark-plugin" class="table-of-contents__link toc-highlight">Docusaurus npm2yarn remark plugin</a></li></ul></li><li><a href="#usage-in-jsx" class="table-of-contents__link toc-highlight">Usage in JSX</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migration">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/feature-requests">Feature Requests</a></li><li class="footer__item"><a href="https://discordapp.com/invite/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/community/support">Help</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" href="/changelog">Changelog</a></li><li class="footer__item"><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item">
|
||
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
|
||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51">
|
||
</a>
|
||
</li><li class="footer__item">
|
||
<a href="https://argos-ci.com" target="_blank" rel="noreferrer noopener" aria-label="Covered by Argos">
|
||
<img src="https://argos-ci.com/badge.svg" alt="Covered by Argos" width="133" height="20">
|
||
</a>
|
||
</li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cookie Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.fb.com" rel="noopener noreferrer" class="footerLogoLink_CiM_"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--light_LEkC"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--dark_jnGk"></a></div><div class="footer__copyright">Copyright © 2024 Meta Platforms, Inc. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |