var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},t=(a,n,s,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of m(n))!N.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(i=h(n,c))||i.enumerable});return a};var b=(a,n,s)=>(s=a!=null?d(u(a)):{},t(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>t(l({},"__esModule",{value:!0}),a);var r=k((I,o)=>{o.exports=_jsx_runtime});var j={};g(j,{default:()=>x,frontmatter:()=>f});var e=b(r()),f={title:"Code Samples for the syntax highlighting",date:"2023-05-07",category:"Tech",tags:["unified","sample"],subtitle:"Some code blocks to check the syntax highlighting",lastmod:"2023-05-07",draft:!1,metadescription:"",image:""};function p(a){let n=Object.assign({p:"p",br:"br",a:"a",hr:"hr",h2:"h2",span:"span",pre:"pre",code:"code",div:"div"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["Please refer to the following page for instructions on how to display code titles and line numbers and highlight lines:",(0,e.jsx)(n.br,{}),(0,e.jsx)(n.a,{href:"https://github.com/timlrx/rehype-prism-plus",children:"timlrx/rehype-prism-plus: rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers"}),(0,e.jsx)(n.br,{}),(0,e.jsx)(n.a,{href:"https://github.com/rockchalkwushock/rehype-code-rockchalkwushock/rehype-code-titles",children:"rockchalkwushock/rehype-code-titles: Rehype plugin for parsing code blocks and adding titles to code blocks"})]}),(0,e.jsx)(n.hr,{}),(0,e.jsxs)(n.h2,{id:"javascript-with-line-number",children:[(0,e.jsx)(n.a,{href:"#javascript-with-line-number","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"JavaScript with line number"]}),(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"code-highlight language-javascript",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"factorial"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"n"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"else"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token function",children:"factorial"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"8",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{className:"token class-name console",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function method property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token function",children:"factorial"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"5"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// Output: 120"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"css-with-code-title--line-number",children:[(0,e.jsx)(n.a,{href:"#css-with-code-title--line-number","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"CSS with code title & line number"]}),(0,e.jsx)(n.div,{className:"rehype-code-title",children:"title"}),(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"code-highlight language-css",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"/* Styles for a button */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".button"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"background-color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token color hexcode",children:"#3498db"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"border"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," none",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token color",children:"white"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"padding"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"12"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"})," ",(0,e.jsx)(n.span,{className:"token number",children:"24"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"text-align"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," center",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"text-decoration"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," none",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"display"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," inline-block",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"font-size"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"16"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"margin"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"4"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"cursor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," pointer",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"html-with-line-highlighting",children:[(0,e.jsx)(n.a,{href:"#html-with-line-highlighting","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"HTML with line highlighting"]}),(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"code-highlight language-html",children:[(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsxs)(n.span,{className:"token doctype",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"My Website",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"styles.css",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Welcome to my website!",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Here is some text.",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"script.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"jsx-with-line-highlighting--line-number",children:[(0,e.jsx)(n.a,{href:"#jsx-with-line-highlighting--line-number","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"JSX with line highlighting & line number"]}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"code-highlight language-jsx",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number highlight-line",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"5",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"6",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Hello, world!"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"This is a React component."}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"11",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"markup",children:[(0,e.jsx)(n.a,{href:"#markup","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Markup"]}),(0,e.jsx)(n.pre,{className:"language-markup",children:(0,e.jsxs)(n.code,{className:"code-highlight language-markup",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Hello, world!",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"This is some text.",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"bash",children:[(0,e.jsx)(n.a,{href:"#bash","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Bash"]}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"code-highlight language-bash",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token important shebang",children:"#!/bin/bash"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token class-name builtin",children:"echo"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Hello, world!"'}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"scss",children:[(0,e.jsx)(n.a,{href:"#scss","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"SCSS"]}),(0,e.jsx)(n.pre,{className:"language-scss",children:(0,e.jsxs)(n.code,{className:"code-highlight language-scss",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:(0,e.jsx)(n.span,{className:"token variable",children:"$primary-color"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," #3498db",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token selector",children:".button "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"background-color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token variable",children:"$primary-color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"border"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," none",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"color"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," white",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"padding"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," 12px 24px",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"text-align"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," center",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"text-decoration"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," none",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"display"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," inline-block",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"font-size"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," 16px",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"margin"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," 4px 2px",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"cursor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," pointer",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"tsx",children:[(0,e.jsx)(n.a,{href:"#tsx","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"TSX"]}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"code-highlight language-tsx",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Props"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" name",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"Hello"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," name ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"name",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:"!"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Hello"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"typescript",children:[(0,e.jsx)(n.a,{href:"#typescript","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"TypeScript"]}),(0,e.jsx)(n.pre,{className:"language-typescript",children:(0,e.jsxs)(n.code,{className:"code-highlight language-typescript",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"User"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" name",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" age",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"greet"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"user",(0,e.jsx)(n.span,{className:"token operator",children:":"})," User",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token builtin",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"Hello, "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"user",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"name",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"! You are "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"user",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"age",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:" years old."}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"greet"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," name",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Alice"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," age",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"30"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// Output: Hello, Alice! You are 30 years old."}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"go",children:[(0,e.jsx)(n.a,{href:"#go","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Go"]}),(0,e.jsx)(n.pre,{className:"language-go",children:(0,e.jsxs)(n.code,{className:"code-highlight language-go",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"package"}),` main `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"fmt"'}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"func"})," ",(0,e.jsx)(n.span,{className:"token function",children:"main"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" fmt",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"Println"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"Hello, world!"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"json",children:[(0,e.jsx)(n.a,{href:"#json","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"JSON"]}),(0,e.jsx)(n.pre,{className:"language-json",children:(0,e.jsxs)(n.code,{className:"code-highlight language-json",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:'"name"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"John"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:'"age"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"30"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:'"city"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"New York"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"markdown",children:[(0,e.jsx)(n.a,{href:"#markdown","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Markdown"]}),(0,e.jsx)(n.pre,{className:"language-markdown",children:(0,e.jsxs)(n.code,{className:"code-highlight language-markdown",children:[(0,e.jsx)(n.span,{className:"code-line",children:`This is some text. `}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"#"})," Heading 1"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"##"})," Heading 2"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"###"})," Heading 3"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"####"})," Heading 4"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"#####"})," Heading 5"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token important title",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"######"})," Heading 6"]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token bold",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"**"}),(0,e.jsx)(n.span,{className:"token content",children:"Bold text"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"**"})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token italic",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"_"}),(0,e.jsx)(n.span,{className:"token content",children:"Italic text"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"_"})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword code code-snippet",children:"`Code`"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"php",children:[(0,e.jsx)(n.a,{href:"#php","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"PHP"]}),(0,e.jsx)(n.pre,{className:"language-php",children:(0,e.jsxs)(n.code,{className:"code-highlight language-php",children:[(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token language-php php",children:[(0,e.jsx)(n.span,{className:"token important delimiter",children:""})}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"python",children:[(0,e.jsx)(n.a,{href:"#python","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Python"]}),(0,e.jsx)(n.pre,{className:"language-python",children:(0,e.jsxs)(n.code,{className:"code-highlight language-python",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"def"})," ",(0,e.jsx)(n.span,{className:"token function",children:"factorial"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"=="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"else"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," factorial",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n",(0,e.jsx)(n.span,{className:"token operator",children:"-"}),(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"print"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"factorial",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"5"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"# Output: 120"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"regex",children:[(0,e.jsx)(n.a,{href:"#regex","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Regex"]}),(0,e.jsx)(n.pre,{className:"language-regex",children:(0,e.jsxs)(n.code,{className:"code-highlight language-regex",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["const re = /ab",(0,e.jsx)(n.span,{className:"token number quantifier",children:"+"}),`c/; `]}),(0,e.jsx)(n.span,{className:"code-line",children:`const str = 'abc'; `}),(0,e.jsxs)(n.span,{className:"code-line",children:["console",(0,e.jsx)(n.span,{className:"token class-name char-set",children:"."}),"log",(0,e.jsx)(n.span,{className:"token punctuation group",children:"("}),"re",(0,e.jsx)(n.span,{className:"token class-name char-set",children:"."}),"test",(0,e.jsx)(n.span,{className:"token punctuation group",children:"("}),"str",(0,e.jsx)(n.span,{className:"token punctuation group",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation group",children:")"}),`; // true `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),(0,e.jsxs)(n.h2,{id:"ruby",children:[(0,e.jsx)(n.a,{href:"#ruby","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Ruby"]}),(0,e.jsx)(n.pre,{className:"language-ruby",children:(0,e.jsxs)(n.code,{className:"code-highlight language-ruby",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"def"})," ",(0,e.jsx)(n.span,{className:"token method-definition",children:(0,e.jsx)(n.span,{className:"token function",children:"factorial"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"=="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"else"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" n ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," factorial",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"n",(0,e.jsx)(n.span,{className:"token operator",children:"-"}),(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"end"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"end"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:["puts factorial",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"5"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"sql",children:[(0,e.jsx)(n.a,{href:"#sql","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"SQL"]}),(0,e.jsx)(n.pre,{className:"language-sql",children:(0,e.jsxs)(n.code,{className:"code-highlight language-sql",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"SELECT"})," id",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," name",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` email `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"FROM"}),` users `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"WHERE"})," email ",(0,e.jsx)(n.span,{className:"token operator",children:"LIKE"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'%example.com'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"yaml",children:[(0,e.jsx)(n.a,{href:"#yaml","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"YAML"]}),(0,e.jsx)(n.pre,{className:"language-yaml",children:(0,e.jsxs)(n.code,{className:"code-highlight language-yaml",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"---"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"-"})," ",(0,e.jsx)(n.span,{className:"token atrule key",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Alice `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"age"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"24"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"job"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Engineer `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"-"})," ",(0,e.jsx)(n.span,{className:"token atrule key",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Bob `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"age"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"32"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"job"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Manager `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"-"})," ",(0,e.jsx)(n.span,{className:"token atrule key",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Carol `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"age"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"28"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token atrule key",children:"job"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"}),` Designer `]})]})})]})}function w(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var x=w;return y(j);})(); ;return Component;

Code Samples for the syntax highlighting

This is an example of result of rehype-code-titles

This is an example of result of remark-gfm

This is an example of result of remark-math

This is an example of result of remark-tok