-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmarkdown-guide.html
More file actions
101 lines (81 loc) · 52 KB
/
markdown-guide.html
File metadata and controls
101 lines (81 loc) · 52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html><html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><title>ReScript Documentation</title><meta charSet="utf-8"/><meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui" name="viewport"/><meta content="The ReScript language and ecosystem docs" name="description"/><meta content="" name="keywords"/><link href="/static/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/><link href="/static/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/><link href="/static/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/><link href="/static/favicon/site.webmanifest" rel="manifest"/><meta content="ReScript Documentation" property="og:site_name"/><meta content="en_US" property="og:locale"/><meta content="ReScript Documentation" property="og:title"/><meta content="The ReScript language and ecosystem docs" property="og:description"/><meta content="ReScript Documentation" name="twitter:title"/><meta content="The ReScript language and ecosystem docs" name="twitter:description"/><meta content="@reasonml" name="twitter:site"/><meta content="@ReasonAssoc" name="twitter:creator"/><meta content="image/jpeg" property="og:image:type"/><meta content="summary_large_image" name="twitter:card"/><link title="ReScript Blog" href="/blog/feed.xml" rel="alternate" type="application/rss+xml"/><meta name="next-head-count" content="20"/><link rel="preload" href="/_next/static/css/2b269719632b344a478b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2b269719632b344a478b.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/markdown-guide-a4845fe99e419e228792.js" as="script"/></head><body><div id="__next"><div class="mt-4 xs:mt-16"><div class="text-gray-80"><nav class="fixed top-0 z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14" id="header" style="min-width:20rem"><div class="flex justify-between items-center h-full w-full max-w-1280"><div class="h-8 w-8 lg:h-10 lg:w-32"><a class="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold" href="/"><img class="lg:hidden" src="/static/nav-logo@2x.png"/><img class="hidden lg:block" src="/static/nav-logo-full@2x.png"/></a></div><div class="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative"><div class="flex ml-10 space-x-5 w-full max-w-320" style="max-width:26rem"><div class="relative"><div class="flex items-center"><button class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px border-none flex items-center hover:cursor-pointer " tabindex="0"><span class="">文档</span></button></div><div class="hidden fixed left-0 overflow-y-scroll overflow-x-hidden border-gray-80 border-gray-40 min-w-320 w-full h-full bg-white sm:overflow-y-auto sm:bg-transparent sm:h-auto sm:justify-center sm:rounded-bl-xl sm:rounded-br-xl sm:shadow" style="margin-top:1rem"><div class="w-full"><div class="relative w-full bg-white pb-32 min-h-full sm:pb-0 text-gray-60 text-14 rounded-bl-xl rounded-br-xl"><div class="flex justify-center"><div class="w-full sm:grid sm:grid-cols-3 max-w-1280"><div class="flex px-4 sm:justify-center border-r border-gray-10 pt-8 pb-10"><div><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">快速跳转</div><div><ul class="space-y-2 ml-2 mt-6"><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/introduction">概览</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/overview">语言特性</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/embed-raw-javascript">与 JS 互操作</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/build-overview">构建系统</a></li></ul></div></div></div><div class="flex px-4 sm:h-full sm:justify-center border-r border-gray-10 pt-8"><div class="w-full pb-16" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Documentation</div><div><div class="mt-6"><a class="" href="/docs-cn/manual/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_manual@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语言手册</span></div><div class="block text-14 text-gray-60 text-gray-60">所有的语言特性的参考指南</div></div></div></a><a class="" href="/docs/react/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_rescript_react@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>ReScript & React</span></div><div class="block text-14 text-gray-60 text-gray-60">ReactJS 的一等公民绑定</div></div></div></a><a class="" href="/docs/gentype/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_gentype@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>GenType</span></div><div class="block text-14 text-gray-60 text-gray-60">无缝衔接 TypeScript & Flow 集成</div></div></div></a><a class="" href="https://github.com/reason-association/reanalyze" rel="noopener noreferrer"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_reanalyze@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>Reanalyze</span><svg class="stroke-current inline-block ml-2 w-4 h-4" height="16" width="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"></path></svg></div><div class="block text-14 text-gray-60 text-gray-60">死代码消除 & 停机分析</div></div></div></a></div></div></div></div><div class="flex px-4 sm:h-full sm:justify-center pb-12 pt-8 pb-10"><div class="w-full" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Exploration</div><div class="mt-6"><a class="" href="/syntax-lookup"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><div class="-mr-2 flex w-6 h-6 justify-center items-center"><img class="w-4 h-4" src="/static/ic_search.svg"/></div><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语法查找</span></div><div class="block text-14 text-gray-60 text-gray-60">探索所有语法结构</div></div></div></a></div></div></div></div></div><img class="hidden xl:block absolute bottom-0 right-0" style="max-width:27.8rem" src="/static/illu_index_rescript@2x.png"/></div></div></div></div><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/docs-cn/manual/latest/api">API</a><a class="hidden xs:block no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></div><div class="hidden md:flex items-center"><div class="hidden sm:block mr-6"><div class=" bg-gray-100 border border-gray-70 hover:text-white hover:cursor-pointer flex justify-center p-2 px-3 rounded-lg"><input type="text" class="transition-all ease-in-out duration-150 text-white bg-gray-100 border-none focus:outline-none w-0" id="docsearch"/><svg class="stroke-current text-gray-60 w-5 h-5" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg></div></div><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" height="17.79" width="18.236" viewBox="0 0 18.236 17.79"><g transform="translate(8 -5.365)"><path d="M17.013,9.906a9.078,9.078,0,0,0-3.318-3.318A8.918,8.918,0,0,0,9.118,5.365,8.919,8.919,0,0,0,4.541,6.588,9.077,9.077,0,0,0,1.223,9.906,8.919,8.919,0,0,0,0,14.483a8.861,8.861,0,0,0,1.739,5.36,8.93,8.93,0,0,0,4.493,3.294.531.531,0,0,0,.475-.083.464.464,0,0,0,.154-.356q0-.036-.006-.641T6.85,21l-.273.047a3.484,3.484,0,0,1-.659.042,5.02,5.02,0,0,1-.825-.083,1.844,1.844,0,0,1-.8-.356,1.506,1.506,0,0,1-.522-.73l-.119-.273a2.966,2.966,0,0,0-.374-.605,1.432,1.432,0,0,0-.516-.451l-.083-.06a.871.871,0,0,1-.154-.143.651.651,0,0,1-.107-.166q-.036-.083.059-.137a.77.77,0,0,1,.344-.053l.237.035a1.733,1.733,0,0,1,.588.285,1.916,1.916,0,0,1,.576.617,2.093,2.093,0,0,0,.659.742,1.4,1.4,0,0,0,.778.255,3.376,3.376,0,0,0,.677-.059,2.362,2.362,0,0,0,.534-.178,1.924,1.924,0,0,1,.582-1.223,8.129,8.129,0,0,1-1.217-.214,4.845,4.845,0,0,1-1.116-.463,3.2,3.2,0,0,1-.956-.8,3.822,3.822,0,0,1-.623-1.247A5.928,5.928,0,0,1,3.3,14.007a3.463,3.463,0,0,1,.938-2.446A3.192,3.192,0,0,1,4.321,9.14a1.664,1.664,0,0,1,1.021.16,7.138,7.138,0,0,1,.991.457q.315.19.5.321a8.574,8.574,0,0,1,4.559,0l.451-.285a6.389,6.389,0,0,1,1.092-.522,1.556,1.556,0,0,1,.962-.13A3.161,3.161,0,0,1,14,11.562a3.463,3.463,0,0,1,.938,2.446,5.994,5.994,0,0,1-.243,1.787,3.674,3.674,0,0,1-.629,1.247,3.319,3.319,0,0,1-.962.789,4.855,4.855,0,0,1-1.116.463,8.121,8.121,0,0,1-1.217.214,2.115,2.115,0,0,1,.617,1.686v2.5a.473.473,0,0,0,.149.356.516.516,0,0,0,.469.083A8.929,8.929,0,0,0,16.5,19.842a8.863,8.863,0,0,0,1.739-5.36A8.926,8.926,0,0,0,17.013,9.906Z" transform="translate(-8 0)"></path></g></svg></a><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://twitter.com/rescriptlang" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 15.53 12.71"><path d="M5.794,12.711a13.325,13.325,0,0,1-2.058-.163A9.659,9.659,0,0,1,.92,11.523L0,11.02l1-.328c1.089-.358,1.751-.58,2.571-.928A3.421,3.421,0,0,1,1.809,7.726l-.232-.7.19.029a3.456,3.456,0,0,1-.433-.534A3.276,3.276,0,0,1,.779,4.57l.044-.614L1.19,4.1a3.437,3.437,0,0,1-.333-.934A3.552,3.552,0,0,1,1.235.774l.32-.588L1.984.7A7.883,7.883,0,0,0,7.091,3.575a3.054,3.054,0,0,1,.185-1.623A3.038,3.038,0,0,1,8.511.536,3.71,3.71,0,0,1,10.664.008a3.439,3.439,0,0,1,2.114.872,7.1,7.1,0,0,0,.774-.258c.17-.064.362-.136.6-.219L15.042.1l-.579,1.652.119-.008L15.53,1.7l-.56.765c-.032.044-.04.056-.052.073-.045.068-.1.153-.87,1.179a1.448,1.448,0,0,0-.271.943,8.916,8.916,0,0,1-.487,3.586,6.346,6.346,0,0,1-1.7,2.524,7.524,7.524,0,0,1-3.566,1.724A10.979,10.979,0,0,1,5.794,12.711Zm0,0" transform="translate(0 -0.001)"></path></svg></a><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://forum.rescript-lang.org" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 24 24"><path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 00-6.337 3.57 7.247 7.247 0 00-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 008.136-1.39 7.256 7.256 0 001.737-7.997 7.375 7.375 0 00-6.84-4.585h-.008z"></path></svg></a></div></div></div><button class="h-full px-4 xs:hidden flex items-center hover:text-white"><svg class="fill-current h-1 w-auto block text-gray-60" height="4" width="22" stroke="none" viewBox="0 0 22 4"><circle cx="2" cy="2" r="2"></circle><circle cx="2" cy="2" r="2" transform="translate(9)"></circle><circle cx="2" cy="2" r="2" transform="translate(18)"></circle></svg></button><div class="hidden sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between" style="min-width:20rem;top:4rem"><div class="border-gray-80 border-t"><ul><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><div class="opacity-75 hover:text-white hover:cursor-pointer bg-gray-80 flex items-center p-2 px-3 rounded"><svg class="stroke-current w-5 h-5 mr-3" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg><input type="text" class="w-32 bg-gray-80 focus:outline-none " id="docsearch-mobile"/></div></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/blog">Blog</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://twitter.com/rescriptlang" rel="noopener noreferrer">Twitter</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer">GitHub</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://forum.rescript-lang.org" rel="noopener noreferrer">Forum</a></li></ul></div></div></nav><div class="hidden z-40 bg-gray-10-tr w-full h-full bottom-0" style="backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)"></div><div class="flex xs:justify-center overflow-hidden pb-48"><main class="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280 "><div class="flex justify-center"><div class="max-w-740 w-full"><h1 class="hl-1 mb-6 ">Markdown Guide</h1><div class="text-24 mt-8 mb-4"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">rescript-lang.org</code> defines a set of markdown components to be able to provide a nice
looking document when rendered to a webpage. This document gives an overview over
all available components and demonstrates some use-cases.</p></div><h2 class="group mt-16 mb-3 hl-3">How does it work?<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#how-does-it-work"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="how-does-it-work" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">We use a toolset called <a class="no-underline text-fire hover:underline" href="https://mdxjs.com" rel="noopener noreferrer">mdxjs</a> to parse and interpret
<code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">.mdx</code> files within the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">pages/</code> directory. The default set for our markdown
components is defined in the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">Markdown.default</code> binding. Each layout in our
codebase injects the components via the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">Mdx.Provider</code> component, kinda like
this:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30">RE</div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-re "><span class="hljs-keyword">let</span> components = <span class="hljs-module-identifier">Markdown</span>.default;
<<span class="hljs-module-identifier">Mdx</span>.<span class="hljs-constructor">Provider</span> components>
{<span class="hljs-comment">/*...*/</span>}
</<span class="hljs-module-identifier">Mdx</span>>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">So the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">Mdx.Provider</code> makes sure that our markdown document looks pretty. Make
sure to make use of them!</p><h2 class="group mt-16 mb-3 hl-3">Markdown JSX Basics<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#markdown-jsx-basics"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="markdown-jsx-basics" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">You can use <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">JSX</code> notation inside every <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">.md</code> / <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">.mdx</code> file. We also inject some
useful components in there to give your document more visual appeal. There's two
ways on how you can pass in JSX children within the markdown syntax:</p><ul class="md-ul mt-12 mb-16"><li class="md-li mt-3 leading-4 ml-2"><p>As a markdown string</p></li><li class="md-li mt-3 leading-4 ml-2"><p>As a plain string</p></li></ul><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Whenever you <strong class="font-semibold">insert a newline</strong> after the beginning tag and before the closing tag,
the content will be interpreted as <strong class="font-semibold">nested markdown</strong>:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><div>
This **thing** will be parsed as markdown, "thing" will therefore be bold
</div>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">If you leave them out, the content will be a <strong class="font-semibold">plain string</strong> without further formatting:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><div>
**this will not be bold**
</div>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Keep this in mind when editing content.</p><h2 class="group mt-16 mb-3 hl-3">Text Components<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#text-components"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="text-components" style="position:absolute;top:-7rem"></a></span></span></h2><h3 class="group mt-8 mb-1 hl-4">Info / Blockquote<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#info--blockquote"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="info--blockquote" style="position:absolute;top:-7rem"></a></span></span></h3><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">The <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5"><Info/></code> component is useful for putting notes into a highlighted
section. You can use it via JSX syntax...</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><Info> This is a info box </Info>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">...or via blockquote syntax:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text ">> This is
> a info box
</code></div></div></div></pre><div class="infobox my-5 py-6 pl-8 pr-10 rounded-lg bg-sky-5"> This is a info box </div><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">The <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">Info</code> component is also really useful if you want its children to be
parsed as markdown. You can even pass in html elements.</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><Info>
**Note:** Some text
</Info>
</code></div></div></div></pre><blockquote class="md-blockquote"><div class="infobox my-5 py-6 pl-8 pr-10 rounded-lg bg-sky-5"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><strong class="font-semibold">Note:</strong> If you want to use markdown content within a component, make sure to
add a newline between the content and the opening / closing JSX tag!</p></div></blockquote><h3 class="group mt-8 mb-1 hl-4">Warn<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#warn"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="warn" style="position:absolute;top:-7rem"></a></span></span></h3><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">The <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5"><Warn/></code> component is a useful tool to point out version issues and
similar information.</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><Warn>
**Warning:** This might look dangerous
</Warn>
</code></div></div></div></pre><div class="my-6 py-6 pl-8 pr-10 rounded-lg bg-orange-10"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><strong class="font-semibold">Warning:</strong> This might look dangerous</p></div><h3 class="group mt-8 mb-1 hl-4">UrlBox<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#urlbox"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="urlbox" style="position:absolute;top:-7rem"></a></span></span></h3><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><UrlBox href="/docs/manual/latest/introduction" text="Language Manual">
This is how you define a UrlBox
</Url>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><strong class="font-semibold">Examples:</strong></p><div class="md-url-box text-16 border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5"><p><img class="mr-2 inline-block" src="/static/hyperlink.svg"/>Check out the officially deployed version of this website (via absolute URL)</p><div class="mt-4 text-sky hover:text-sky-30"><a class="flex items-center" href="https://rescript-lang.org" rel="noopener noreferrer">rescript-lang.org<svg class="fill-current ml-1" height="11.769" width="18" viewBox="0 0 18 11.769"><defs><clipPath id="prefix__a"><path clip-rule="evenodd" d="M12.121-16.823a.67.67 0 00-.907 0 .566.566 0 000 .835l4.6 4.277H.635A.611.611 0 000-11.12a.617.617 0 00.635.6h15.179l-4.6 4.269a.576.576 0 000 .844.67.67 0 00.907 0L17.81-10.7a.553.553 0 000-.835z" fill="current" transform="translate(0 17)"></path></clipPath><clipPath id="prefix__b"><path class="prefix__b" d="M-297 336.231h747.692V-534H-297z" transform="translate(297 534)"></path></clipPath></defs><g clip-path="url(#prefix__a)"><g clip-path="url(#prefix__b)" transform="translate(-205.615 -357.923)"><path class="prefix__b" d="M202.154 354.462h24.923v18.692h-24.923z"></path></g></g></svg></a></div></div><div class="md-url-box text-16 border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><img class="mr-2 inline-block" src="/static/hyperlink.svg"/>We also support markdown inside this component.
Relative links will be handled by NextJS Links.</p><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Try <strong class="font-semibold">multiple paragraphs</strong> for instance!</p><div class="mt-4 text-sky hover:text-sky-30"><a class="flex items-center" href="/md-kitchensink">This is a link<svg class="fill-current ml-1" height="11.769" width="18" viewBox="0 0 18 11.769"><defs><clipPath id="prefix__a"><path clip-rule="evenodd" d="M12.121-16.823a.67.67 0 00-.907 0 .566.566 0 000 .835l4.6 4.277H.635A.611.611 0 000-11.12a.617.617 0 00.635.6h15.179l-4.6 4.269a.576.576 0 000 .844.67.67 0 00.907 0L17.81-10.7a.553.553 0 000-.835z" fill="current" transform="translate(0 17)"></path></clipPath><clipPath id="prefix__b"><path class="prefix__b" d="M-297 336.231h747.692V-534H-297z" transform="translate(297 534)"></path></clipPath></defs><g clip-path="url(#prefix__a)"><g clip-path="url(#prefix__b)" transform="translate(-205.615 -357.923)"><path class="prefix__b" d="M202.154 354.462h24.923v18.692h-24.923z"></path></g></g></svg></a></div></div><h3 class="group mt-8 mb-1 hl-4">Cite<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#cite"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="cite" style="position:absolute;top:-7rem"></a></span></span></h3><div class="my-10 border-l-2 border-fire font-normal pl-10 py-1 text-fire" style="max-width:30rem"><blockquote class="text-32 italic mb-2"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">"Always, always make the logo bigger, no matter what."</p></blockquote><figcaption class="font-semibold text-14">No Designer Ever</figcaption></div><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><Cite author="No Designer Ever">
"Always, always make the logo bigger, no matter what."
</Cite>
</code></div></div></div></pre><h3 class="group mt-8 mb-1 hl-4">Intro / Chapter Hero<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#intro--chapter-hero"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="intro--chapter-hero" style="position:absolute;top:-7rem"></a></span></span></h3><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">This component is useful to ease the user into the topic. Use it for the first
paragraph and give a quick overview on what the document is about. </p><div class="text-24 mt-8 mb-4"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Hinter eines Baumes Rinde wohnt die Made mit dem Kinde, sie ist Witwe, denn der
Gatte, den sie hatte, viel vom Blatte. Diente so auf dieser Weise einer Ameise
als Speise.</p></div><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><Intro>
Your hero text
</Intro>
</code></div></div></div></pre><h2 class="group mt-16 mb-3 hl-3">Codeblocks<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#codeblocks"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="codeblocks" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Codeblocks are represented via <!-- -->`<!-- -->`<!-- -->`<!-- --> codefences.
Following languages are available: <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">res</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">re</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">js</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">ml</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">text</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">json</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">sh</code></p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30">RES</div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-res "><span class="hljs-keyword">let</span> a <span class="hljs-operator">=</span> <span class="hljs-string">"This is a Reason codeblock"</span>
</code></div></div></div></pre><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text ">The default language is set to `text` and will not provide any syntax
highlighting
</code></div></div></div></pre><h3 class="group mt-8 mb-1 hl-4">Highlighting lines<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#highlighting-lines"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="highlighting-lines" style="position:absolute;top:-7rem"></a></span></span></h3><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">To highlight codelines in your code snippet, use the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">{range}</code> meta parameter:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text ">```res {1,4-5}
let a = 1
let b = 2
switch a => {
| 1 => a + b
| 2 => a - b
| _ => b
}
```
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">which will render:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30">RES</div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-res "><span class="inline-block"><span class="hljs-keyword">let</span> a <span class="hljs-operator">=</span> <span class="hljs-number">1</span></span>
<span class="inline-block text-inherit opacity-50"><span class="hljs-keyword">let</span> b <span class="hljs-operator">=</span> <span class="hljs-number">2</span></span>
<span class="inline-block text-inherit opacity-50"></span>
<span class="inline-block"><span class="hljs-keyword">switch</span> a <span class="hljs-function">=></span> <span class="hljs-literal">{</span></span>
<span class="inline-block">| <span class="hljs-number">1</span> <span class="hljs-function">=></span> a <span class="hljs-operator">+</span> b</span>
<span class="inline-block text-inherit opacity-50">| <span class="hljs-number">2</span> <span class="hljs-function">=></span> a <span class="hljs-operator">-</span> b</span>
<span class="inline-block text-inherit opacity-50">| _ <span class="hljs-function">=></span> b</span>
<span class="inline-block text-inherit opacity-50"><span class="hljs-literal">}</span></span>
<span class="inline-block text-inherit opacity-50"></span></code></div></div></div></pre><h2 class="group mt-16 mb-3 hl-3">CodeTabs<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#codetabs"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="codetabs" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">For cases where you want to show a single codeblock with multiple syntaxes, use the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5"><CodeToggle></code> component.
Make sure to leave a newline between the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5"><CodeToggle></code> JSX tags, otherwise codeblock children won't be recognized!</p><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><strong class="font-semibold">Example:</strong></p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text "><CodeTab labels={["ReScript", "JS Output"]}>
```res
let a = "Some ReScript code"
```
```js {3}
var a = "Some JavaScript code";
var highlighted = "yep"
```
</CodeTab>
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Renders to following output:</p><div class="md-codetab mt-8 mb-8 -mx-6 xs:mx-0"><div class="relative pt-6 w-full rounded-none text-gray-80"><div class="absolute flex w-full font-sans bg-transparent text-14 text-gray-40 " style="margin-top:-26px"><div class="flex ml-2 xs:ml-0"><span class="sm:px-4 flex-none px-5 inline-block p-1 first:rounded-tl font-medium text-12 text-gray-40 bg-gray-5 border-t-2 first:border-l" style="border-color:#696B7D #EDF0F2">ReScript</span><span class="sm:px-4 flex-none px-5 inline-block p-1 first:rounded-tl font-medium text-12 hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer" style="border-color:transparent">JS Output</span></div><div class="flex-1 w-full bg-gray-20 border-b rounded-tr border-gray-20 items-center"><div class="flex items-center justify-end h-full pr-4 space-x-2"><a target="_blank" href="/try?code=DYUwLgBAhhC8ECIDKB7AtiCAlESDGATgJYAOkeKAJiAgFADOA7kWHgBYRoCeAalMAFdMAb1q0AvrSA}"><svg class="stroke-current text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out" height="16" width="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"></path></svg></a><button class="relative"><svg class="stroke-current text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out" height="16" width="16" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"></path><rect height="4" width="8" rx="1" ry="1" x="8" y="2"></rect></svg></button></div></div></div><div class="px-4 lg:px-5 text-14 pb-4 pt-4 overflow-x-auto bg-gray-10 border-gray-20 xs:rounded-b border"><pre><code class="hljs lang-res "><span class="hljs-keyword">let</span> a <span class="hljs-operator">=</span> <span class="hljs-string">"Some ReScript code"</span>
<span class="hljs-keyword">switch</span> myValue <span class="hljs-literal">{</span>
<span class="hljs-literal">}</span>
</code></pre></div></div></div></div></div></main></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/markdown-guide","query":{},"buildId":"azkpStclBMlbyu6nwP73h","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/_next/static/chunks/polyfills-9def993fe817cc057038.js"></script><script src="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" async=""></script><script src="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" async=""></script><script src="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" async=""></script><script src="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" async=""></script><script src="/_next/static/chunks/pages/markdown-guide-a4845fe99e419e228792.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_buildManifest.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_ssgManifest.js" async=""></script><script async="" defer="" src="https://scripts.simpleanalyticscdn.com/latest.js"></script><noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/></noscript></body></html>