From f665b00ce765ea8445edbeac65f6cd490c12b14f Mon Sep 17 00:00:00 2001 From: Evan Jacobs Date: Sun, 31 Dec 2023 19:14:08 -0500 Subject: [PATCH] docs: add syntax highlighting example --- README.md | 58 ++++++++++++++++++++++++++++++------- docs/index.html | 16 ++++++++++ docs/markdown-to-jsx.js | 2 +- docs/markdown-to-jsx.js.map | 2 +- site.tsx | 45 +++++++++++++++++++++++----- 5 files changed, 103 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 3f7b7de8..af7148f6 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ The most lightweight, customizable React markdown component. - GFM task list support. -- Fenced code blocks with [highlight.js](https://highlightjs.org/) support. +- Fenced code blocks with [highlight.js](https://highlightjs.org/) support; see [Syntax highlighting](#syntax-highlighting) for instructions on setting up highlight.js. All this clocks in at around 6 kB gzipped, which is a fraction of the size of most other React markdown components. @@ -503,20 +503,58 @@ compiler('This text has html in it but it won't be rendered', { dis ### Syntax highlighting -Some syntax highlighters require you to specify the language. The language of the code fence is -forwarded in the className prop of the element used for ``: +When using [fenced code blocks](https://www.markdownguide.org/extended-syntax/#syntax-highlighting) with language annotation, that language will be added to the `` element as `class="lang-${language}"`. For best results, you can use `options.overrides` to provide an appropriate syntax highlighting integration like this one using `highlight.js`: -```jsx -const Code = ({ className, children }) => { - const language = className.replace('lang-', '') +````jsx +import { Markdown, RuleType } from 'markdown-to-jsx' + +const mdContainingFencedCodeBlock = '```js\nconsole.log("Hello world!");\n```\n' +function App() { return ( - - {children} - + ) } -``` + +/** + * Add the following tags to your page to automatically load hljs and styles: + + + + * NOTE: for best performance, load individual languages you need instead of all + of them. See their docs for more info: https://highlightjs.org/ + + + */ + +function SyntaxHighlightedCode(props) { + const ref = (React.useRef < HTMLElement) | (null > null) + + React.useEffect(() => { + if (ref.current && props.className?.includes('lang-') && window.hljs) { + window.hljs.highlightElement(ref.current) + + // hljs won't reprocess the element unless this attribute is removed + ref.current.removeAttribute('data-highlighted') + } + }, [props.className, props.children]) + + return +} +```` ### Getting the smallest possible bundle size diff --git a/docs/index.html b/docs/index.html index 50c62e51..d49ad7a8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,6 +12,10 @@ href="https://unpkg.com/katex@0.16.9/dist/katex.min.css" rel="stylesheet" /> + + @@ -55,6 +63,14 @@ \mathbb{N} = \{ a \in \mathbb{Z} : a > 0 \} ``` +Or any other typical language, using [`highlight.js`](https://highlightjs.org/): + +```javascript +function App() { + return
Hello world!
; +} +``` + You can even include custom React components if you declare them in the [`overrides` option](https://github.com/quantizor/markdown-to-jsx/blob/main/README.md#optionsoverrides---rendering-arbitrary-react-components). Isn't that cool? diff --git a/docs/markdown-to-jsx.js b/docs/markdown-to-jsx.js index 1796c283..dac406b1 100644 --- a/docs/markdown-to-jsx.js +++ b/docs/markdown-to-jsx.js @@ -1,2 +1,2 @@ -!function(e,n,t,r){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,n}var o=/*#__PURE__*/i(e),l=/*#__PURE__*/a(e),c=/*#__PURE__*/a(n),u=/*#__PURE__*/i(t),s=/*#__PURE__*/i(r);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n=0||(i[t]=e[t]);return i}(n,["children","math","block","errorColor","renderError","settings","as"]),f=u||(i?"div":"span"),m=null!=t?t:r,h=e.useState({innerHtml:""}),g=h[0],y=h[1];return e.useEffect(function(){try{var e=s.default.renderToString(m,p({displayMode:!!i,errorColor:a,throwOnError:!!l},c));y({innerHtml:e})}catch(e){if(!(e instanceof s.default.ParseError||e instanceof TypeError))throw e;y(l?{errorElement:l(e)}:{innerHtml:e.message})}},[i,m,a,l,c]),"errorElement"in g?g.errorElement:o.default.createElement(f,Object.assign({},d,{dangerouslySetInnerHTML:{__html:g.innerHtml}}))});function h(){return h=Object.assign?Object.assign.bind():function(e){for(var n=1;n",lt:"<",nbsp:" ",quot:"“"},O=["style","script"],j=/([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi,z=/mailto:/i,C=/\n{2,}$/,M=/^( *>[^\n]+(\n[^\n]+)*\n*)+\n{2,}/,S=/^ *> ?/gm,A=/^ {2,}\n/,T=/^(?:( *[-*_])){3,} *(?:\n *)+\n/,$=/^\s*(`{3,}|~{3,}) *(\S+)?([^\n]*?)?\n([\s\S]+?)\s*\1 *(?:\n *)*\n?/,I=/^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/,H=/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,R=/^(?:\n *)*\n/,L=/\r\n?/g,_=/^\[\^([^\]]+)](:.*)\n/,P=/^\[\^([^\]]+)]/,N=/\f/g,U=/^\s*?\[(x|\s)\]/,D=/^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,G=/^ *(#{1,6}) +([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,B=/^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/,F=/^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)\/{0}>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i,W=/&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi,q=/^)/,Z=/^(data|aria|x)-[a-z_][a-z\d_.-]*$/,J=/^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i,X=/^\{.*\}$/,V=/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,K=/^<([^ >]+@[^ >]+)>/,Q=/^<([^ >]+:\/[^ >]+)>/,Y=/-([a-z])?/gi,ee=/^(.*\|?.*)\n *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*)\n?/,ne=/^\[([^\]]*)\]:\s+]+)>?\s*("([^"]*)")?/,te=/^!\[([^\]]*)\] ?\[([^\]]*)\]/,re=/^\[([^\]]*)\] ?\[([^\]]*)\]/,ie=/(\[|\])/g,ae=/(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/,oe=/\t/g,le=/^ *\| */,ce=/(^ *\||\| *$)/g,ue=/ *$/,se=/^ *:-+: *$/,de=/^ *:-+ *$/,fe=/^ *-+: *$/,pe=/^([*_])\1((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1\1(?!\1)/,me=/^([*_])((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1(?!\1|\w)/,he=/^==((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)==/,ge=/^~~((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/,ye=/^\\([^0-9A-Za-z\s])/,ve=/^[\s\S]+?(?=[^0-9A-Z\s\u00c0-\uffff&#;.()'"]|\d+\.|\n\n| {2,}\n|\w+:\S|$)/i,ke=/^\n+/,xe=/^([ \t]*)/,be=/\\([^\\])/g,Ee=/ *\n+$/,we=/(?:^|\n)( *)$/,Oe="(?:\\d+\\.)",je="(?:[*+-])";function ze(e){return"( *)("+(1===e?Oe:je)+") +"}var Ce=ze(1),Me=ze(2);function Se(e){return new RegExp("^"+(1===e?Ce:Me))}var Ae=Se(1),Te=Se(2);function $e(e){return new RegExp("^"+(1===e?Ce:Me)+"[^\\n]*(?:\\n(?!\\1"+(1===e?Oe:je)+" )[^\\n]*)*(\\n|$)","gm")}var Ie=$e(1),He=$e(2);function Re(e){var n=1===e?Oe:je;return new RegExp("^( *)("+n+") [\\s\\S]+?(?:\\n{2,}(?! )(?!\\1"+n+" (?!"+n+" ))\\n*|\\s*\\n*$)")}var Le=Re(1),_e=Re(2);function Pe(e,n){var t=1===n,r=t?Le:_e,i=t?Ie:He,a=t?Ae:Te;return{match:function(e,n,t){var i=we.exec(t);return i&&(n.list||!n.inline&&!n.simple)?r.exec(e=i[1]+e):null},order:1,parse:function(e,n,r){var o=t?+e[2]:void 0,l=e[0].replace(C,"\n").match(i),c=!1;return{items:l.map(function(e,t){var i=a.exec(e)[0].length,o=new RegExp("^ {1,"+i+"}","gm"),u=e.replace(o,"").replace(a,""),s=t===l.length-1,d=-1!==u.indexOf("\n\n")||s&&c;c=d;var f,p=r.inline,m=r.list;r.list=!0,d?(r.inline=!1,f=u.replace(Ee,"\n\n")):(r.inline=!0,f=u.replace(Ee,""));var h=n(f,r);return r.inline=p,r.list=m,h}),ordered:t,start:o}},render:function(n,t,r){return e(n.ordered?"ol":"ul",{key:r.key,start:"20"===n.type?n.start:void 0},n.items.map(function(n,i){return e("li",{key:i},t(n,r))}))}}}var Ne=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,Ue=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,De=[M,$,I,D,B,G,q,ee,Ie,Le,He,_e],Ge=[].concat(De,[/^[^\n]+(?: \n|\n{2,})/,F,J]);function Be(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function Fe(e){return fe.test(e)?"right":se.test(e)?"center":de.test(e)?"left":null}function We(e,n,t){var r=t.inTable;t.inTable=!0;var i=n(e.trim(),t);t.inTable=r;var a=[[]];return i.forEach(function(e,n){e.type===x?0!==n&&n!==i.length-1&&a.push([]):(e.type!==b||null!=i[n+1]&&i[n+1].type!==x||(e.text=e.text.replace(ue,"")),a[a.length-1].push(e))}),a}function qe(e,n,t){t.inline=!0;var r=We(e[1],n,t),i=e[2].replace(ce,"").split("|").map(Fe),a=function(e,n,t){return e.trim().split("\n").map(function(e){return We(e,n,t)})}(e[3],n,t);return t.inline=!1,{align:i,cells:a,header:r,type:"25"}}function Ze(e,n){return null==e.align[n]?{}:{textAlign:e.align[n]}}function Je(e){return function(n,t){return t.inline?e.exec(n):null}}function Xe(e){return function(n,t){return t.inline||t.simple?e.exec(n):null}}function Ve(e){return function(n,t){return t.inline||t.simple?null:e.exec(n)}}function Ke(e){return function(n){return e.exec(n)}}function Qe(e,n,t){if(n.inline||n.simple)return null;if(t&&!t.endsWith("\n"))return null;var r="";e.split("\n").every(function(e){return!De.some(function(n){return n.test(e)})&&(r+=e+"\n",e.trim())});var i=r.trimEnd();return""==i?null:[r,i]}function Ye(e){try{if(decodeURIComponent(e).replace(/[^A-Za-z0-9/:]/g,"").match(/^\s*(javascript|vbscript|data(?!:image)):/i))return}catch(e){return null}return e}function en(e){return e.replace(be,"$1")}function nn(e,n,t){var r=t.inline||!1,i=t.simple||!1;t.inline=!0,t.simple=!0;var a=e(n,t);return t.inline=r,t.simple=i,a}function tn(e,n,t){var r=t.inline||!1,i=t.simple||!1;t.inline=!1,t.simple=!0;var a=e(n,t);return t.inline=r,t.simple=i,a}function rn(e,n,t){return t.inline=!1,e(n,t)}var an,on,ln,cn,un,sn,dn,fn,pn,mn,hn=function(e,n,t){return{children:nn(n,e[1],t)}};function gn(){return{}}function yn(){return null}function vn(){return[].slice.call(arguments).filter(Boolean).join(" ")}function kn(e,n,t){for(var r=e,i=n.split(".");i.length&&void 0!==(r=r[i[0]]);)i.shift();return r||t}function xn(e,n){var t=kn(n,e);return t?"function"==typeof t||"object"==typeof t&&"render"in t?t:kn(n,e+".component",e):e}function bn(e,n){var t;void 0===n&&(n={}),n.overrides=n.overrides||{},n.slugify=n.slugify||Be,n.namedCodesToUnicode=n.namedCodesToUnicode?h({},w,n.namedCodesToUnicode):w;var r=n.createElement||l.createElement;function i(e,t){var i=kn(n.overrides,e+".props",{});return r.apply(void 0,[xn(e,n.overrides),h({},t,i,{className:vn(null==t?void 0:t.className,i.className)||void 0})].concat([].slice.call(arguments,2)))}function a(e){var t=!1;n.forceInline?t=!0:n.forceBlock||(t=!1===ae.test(e));for(var r=p(f(t?e:e.trimEnd().replace(ke,"")+"\n\n",{inline:t}));"string"==typeof r[r.length-1]&&!r[r.length-1].trim();)r.pop();if(null===n.wrapper)return r;var a,o=n.wrapper||(t?"span":"div");if(r.length>1||n.forceWrapper)a=r;else{if(1===r.length)return"string"==typeof(a=r[0])?i("span",{key:"outer"},a):a;a=null}return l.createElement(o,{key:"outer"},a)}function o(e){var n=e.match(j);return n?n.reduce(function(e,n,t){var r=n.indexOf("=");if(-1!==r){var i=function(e){return-1!==e.indexOf("-")&&null===e.match(Z)&&(e=e.replace(Y,function(e,n){return n.toUpperCase()})),e}(n.slice(0,r)).trim(),o=function(e){var n=e[0];return('"'===n||"'"===n)&&e.length>=2&&e[e.length-1]===n?e.slice(1,-1):e}(n.slice(r+1).trim()),c=E[i]||i,u=e[c]=function(e,n){return"style"===e?n.split(/;\s?/).reduce(function(e,n){var t=n.slice(0,n.indexOf(":"));return e[t.replace(/(-[a-z])/g,function(e){return e[1].toUpperCase()})]=n.slice(t.length+1).trim(),e},{}):"href"===e?Ye(n):(n.match(X)&&(n=n.slice(1,n.length-1)),"true"===n||"false"!==n&&n)}(i,o);"string"==typeof u&&(F.test(u)||J.test(u))&&(e[c]=l.cloneElement(a(u.trim()),{key:t}))}else"style"!==n&&(e[E[n]||n]=!0);return e},{}):null}var c=[],u={},s=((t={})[0]={match:Ve(M),order:1,parse:function(e,n,t){return{children:n(e[0].replace(S,""),t)}},render:function(e,n,t){return i("blockquote",{key:t.key},n(e.children,t))}},t[1]={match:Ke(A),order:1,parse:gn,render:function(e,n,t){return i("br",{key:t.key})}},t[2]={match:Ve(T),order:1,parse:gn,render:function(e,n,t){return i("hr",{key:t.key})}},t[3]={match:Ve(I),order:0,parse:function(e){return{lang:void 0,text:e[0].replace(/^ {4}/gm,"").replace(/\n+$/,"")}},render:function(e,n,t){return i("pre",{key:t.key},i("code",h({},e.attrs,{className:e.lang?"lang-"+e.lang:""}),e.text))}},t[4]={match:Ve($),order:0,parse:function(e){return{attrs:o(e[3]||""),lang:e[2]||void 0,text:e[4],type:"3"}}},t[5]={match:Xe(H),order:3,parse:function(e){return{text:e[2]}},render:function(e,n,t){return i("code",{key:t.key},e.text)}},t[6]={match:Ve(_),order:0,parse:function(e){return c.push({footnote:e[2],identifier:e[1]}),{}},render:yn},t[7]={match:Je(P),order:1,parse:function(e){return{target:"#"+n.slugify(e[1]),text:e[1]}},render:function(e,n,t){return i("a",{key:t.key,href:Ye(e.target)},i("sup",{key:t.key},e.text))}},t[8]={match:Je(U),order:1,parse:function(e){return{completed:"x"===e[1].toLowerCase()}},render:function(e,n,t){return i("input",{checked:e.completed,key:t.key,readOnly:!0,type:"checkbox"})}},t[9]={match:Ve(n.enforceAtxHeadings?G:D),order:1,parse:function(e,t,r){return{children:nn(t,e[2],r),id:n.slugify(e[2]),level:e[1].length}},render:function(e,n,t){return i("h"+e.level,{id:e.id,key:t.key},n(e.children,t))}},t[10]={match:Ve(B),order:0,parse:function(e,n,t){return{children:nn(n,e[1],t),level:"="===e[2]?1:2,type:"9"}}},t[11]={match:Ke(F),order:1,parse:function(e,n,t){var r,i=e[3].match(xe),a=new RegExp("^"+i[1],"gm"),l=e[3].replace(a,""),c=(r=l,Ge.some(function(e){return e.test(r)})?rn:nn),u=e[1].toLowerCase(),s=-1!==O.indexOf(u),d={attrs:o(e[2]),noInnerParse:s,tag:s?u:e[1]};return t.inAnchor=t.inAnchor||"a"===u,s?d.text=e[3]:d.children=c(n,l,t),t.inAnchor=!1,d},render:function(e,n,t){return i(e.tag,h({key:t.key},e.attrs),e.text||n(e.children,t))}},t[13]={match:Ke(J),order:1,parse:function(e){return{attrs:o(e[2]||""),tag:e[1]}},render:function(e,n,t){return i(e.tag,h({},e.attrs,{key:t.key}))}},t[12]={match:Ke(q),order:1,parse:function(){return{}},render:yn},t[14]={match:Xe(Ue),order:1,parse:function(e){return{alt:e[1],target:en(e[2]),title:e[3]}},render:function(e,n,t){return i("img",{key:t.key,alt:e.alt||void 0,title:e.title||void 0,src:Ye(e.target)})}},t[k]={match:Je(Ne),order:3,parse:function(e,n,t){return{children:tn(n,e[1],t),target:en(e[2]),title:e[3]}},render:function(e,n,t){return i("a",{key:t.key,href:Ye(e.target),title:e.title},n(e.children,t))}},t[16]={match:Je(Q),order:0,parse:function(e){return{children:[{text:e[1],type:b}],target:e[1],type:k}}},t[17]={match:function(e,n){return n.inAnchor?null:Je(V)(e,n)},order:0,parse:function(e){return{children:[{text:e[1],type:b}],target:e[1],title:void 0,type:k}}},t[18]={match:Je(K),order:0,parse:function(e){var n=e[1],t=e[1];return z.test(t)||(t="mailto:"+t),{children:[{text:n.replace("mailto:",""),type:b}],target:t,type:k}}},t[20]=Pe(i,1),t[33]=Pe(i,2),t[19]={match:Ve(R),order:3,parse:gn,render:function(){return"\n"}},t[21]={match:Qe,order:3,parse:hn,render:function(e,n,t){return i("p",{key:t.key},n(e.children,t))}},t[22]={match:Je(ne),order:0,parse:function(e){return u[e[1]]={target:e[2],title:e[4]},{}},render:yn},t[23]={match:Xe(te),order:0,parse:function(e){return{alt:e[1]||void 0,ref:e[2]}},render:function(e,n,t){return i("img",{key:t.key,alt:e.alt,src:Ye(u[e.ref].target),title:u[e.ref].title})}},t[24]={match:Je(re),order:0,parse:function(e,n,t){return{children:n(e[1],t),fallbackChildren:n(e[0].replace(ie,"\\$1"),t),ref:e[2]}},render:function(e,n,t){return u[e.ref]?i("a",{key:t.key,href:Ye(u[e.ref].target),title:u[e.ref].title},n(e.children,t)):i("span",{key:t.key},n(e.fallbackChildren,t))}},t[25]={match:Ve(ee),order:1,parse:qe,render:function(e,n,t){return i("table",{key:t.key},i("thead",null,i("tr",null,e.header.map(function(r,a){return i("th",{key:a,style:Ze(e,a)},n(r,t))}))),i("tbody",null,e.cells.map(function(r,a){return i("tr",{key:a},r.map(function(r,a){return i("td",{key:a,style:Ze(e,a)},n(r,t))}))})))}},t[x]={match:function(e,n){return n.inTable?(n.inline=!0,le.exec(e)):null},order:1,parse:function(){return{type:x}},render:function(){return" | "}},t[b]={match:Ke(ve),order:4,parse:function(e){return{text:e[0].replace(W,function(e,t){return n.namedCodesToUnicode[t]?n.namedCodesToUnicode[t]:e})}},render:function(e){return e.text}},t[28]={match:Xe(pe),order:2,parse:function(e,n,t){return{children:n(e[2],t)}},render:function(e,n,t){return i("strong",{key:t.key},n(e.children,t))}},t[29]={match:Xe(me),order:3,parse:function(e,n,t){return{children:n(e[2],t)}},render:function(e,n,t){return i("em",{key:t.key},n(e.children,t))}},t[30]={match:Xe(ye),order:1,parse:function(e){return{text:e[1],type:b}}},t[31]={match:Xe(he),order:3,parse:hn,render:function(e,n,t){return i("mark",{key:t.key},n(e.children,t))}},t[32]={match:Xe(ge),order:3,parse:hn,render:function(e,n,t){return i("del",{key:t.key},n(e.children,t))}},t);!0===n.disableParsingRawHTML&&(delete s[11],delete s[13]);var d,f=function(e){var n=Object.keys(e);function t(r,i){for(var a=[],o="";r;)for(var l=0;l=0||(i[t]=e[t]);return i}(e,v);return l.cloneElement(bn(n,t),r)}function wn(){var e=l.useState(document.getElementById("sample-content").textContent.trim()),n=e[0],t=e[1],r=l.useCallback(function(e){return t(e.target.value)},[]);/*#__PURE__*/return l.createElement("main",null,/*#__PURE__*/l.createElement(zn,null),/*#__PURE__*/l.createElement(Cn,null,/*#__PURE__*/l.createElement("a",{target:"_blank",href:"https://github.com/quantizor/markdown-to-jsx",title:"Check out the markdown-to-jsx source code",rel:"noopener noreferrer"},/*#__PURE__*/l.createElement("img",{src:"./images/logo.svg",alt:"markdown-to-jsx logo"})),/*#__PURE__*/l.createElement(Mn,null,/*#__PURE__*/l.createElement("h1",null,/*#__PURE__*/l.createElement("code",null,"markdown-to-jsx")," is an easy-to-use markdown component that takes Github-flavored Markdown (GFM) and makes native JSX without dangerous hacks. "),/*#__PURE__*/l.createElement("h2",null,"It's lightweight, customizable, and happily supports React-like libraries.")),/*#__PURE__*/l.createElement(Sn,null,"See the"," ",/*#__PURE__*/l.createElement("a",{target:"_blank",href:"https://github.com/quantizor/markdown-to-jsx/blob/main/README.md",rel:"noopener noreferrer"},"project README")," ","for detailed installation & usage instructions.")),/*#__PURE__*/l.createElement(Tn,null,/*#__PURE__*/l.createElement($n,{onInput:r,value:n}),/*#__PURE__*/l.createElement(In,null,/*#__PURE__*/l.createElement(En,{options:Rn},n))))}var On="cornflowerblue",jn="#fefefe",zn=t.createGlobalStyle(an||(an=f(["\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t\toutline-color: ",";\n\t}\n\n\thtml,\n\tbody,\n\t#root,\n\tmain {\n\t\tmargin: 0;\n\t\tmin-height: 100vh;\n\t}\n\n\thtml {\n\t\tbackground: #1a1c23;\n\t\tcolor: ",";\n\t\tfont-family: Inter, Helvetica Neue, Helvetica, sans-serif;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: 0 0 1rem;\n text-wrap: balance;\n\t}\n\n\th1 {\n\t\tfont-size: 2rem;\n\t}\n\n\th2 {\n\t\tfont-size: 1.8rem;\n\t}\n\n\th3 {\n\t\tfont-size: 1.6rem;\n\t}\n\n\th4 {\n\t\tfont-size: 1.4rem;\n\t}\n\n\th5 {\n\t\tfont-size: 1.2rem;\n\t}\n\n\th6 {\n\t\tfont-size: 1rem;\n\t}\n\n\ta {\n\t\tcolor: ",";\n\t\ttransition: color 200ms ease;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tcolor: color-mix(in srgb, "," 75%, transparent);\n\t\t}\n\t}\n\n\tcode {\n\t\tbackground: color-mix(in srgb, "," 15%, transparent);\n border-radius: 2px;\n\t\tdisplay: inline-block;\n font-family: 'Jetbrains Mono', Consolas, Monaco, monospace;\n font-size: 0.9em;\n\t\tpadding: 0 4px;\n text-decoration: inherit;\n\t}\n\n\tpre code {\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tdisplay: block;\n\t\tpadding: 1em;\n\t}\n\n\tmain {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 3rem 1.5rem 0;\n\t\tmargin: 0;\n\n\t\t@media all and (min-width: 1024px) {\n\t\t\tpadding: 3rem;\n\t\t}\n\t}\n\n p {\n text-wrap: balance;\n }\n"])),On,jn,On,On,On),Cn=u.default.header(on||(on=f(["\n flex-shrink: 0;\n margin-bottom: 2em;\n text-align: center;\n\n img {\n height: 100px;\n }\n"]))),Mn=u.default.p(ln||(ln=f(["\n font-size: 16px;\n margin-left: auto;\n margin-right: auto;\n max-width: 60vw;\n\n h1,\n h2 {\n font: inherit;\n }\n\n @media all and (max-width: 500px) {\n max-width: none;\n }\n\n @media all and (max-width: 1023px) {\n h1,\n h2 {\n display: block;\n margin-bottom: 1.5rem;\n }\n }\n"]))),Sn=u.default.p(cn||(cn=f(["\n color: color-mix(in srgb, "," 20%, white);\n"])),jn),An=t.css(un||(un=f(["\n flex: 0 0 50%;\n padding: 1em;\n"]))),Tn=u.default.section(sn||(sn=f(["\n display: flex;\n flex-grow: 1;\n margin-left: -1.5rem;\n margin-right: -1.5rem;\n\n @media all and (min-width: 1024px) {\n margin-left: 0;\n margin-right: 0;\n }\n\n @media all and (max-width: 500px) {\n flex-direction: column;\n }\n"]))),$n=u.default.textarea(dn||(dn=f(["\n ",";\n background: color-mix(in srgb, "," 10%, transparent);\n border: 0;\n color: inherit;\n position: sticky;\n top: 0;\n font-family: 'Jetbrains Mono', Consolas, Monaco, monospace;\n font-size: inherit;\n max-height: 100vh;\n\n @media all and (max-width: 500px) {\n height: 300px;\n position: relative;\n }\n"])),An,On),In=u.default.div(fn||(fn=f(["\n ",";\n padding-left: 2rem;\n padding-right: 1rem;\n overflow: auto;\n overflow-x: hidden;\n"])),An),Hn=u.default.button(pn||(pn=f(["\n background: color-mix(in srgb, "," 50%, black);\n border: 1px solid color-mix(in srgb, "," 50%, transparent);\n border-radius: 2px;\n color: #fff;\n cursor: pointer;\n padding: 0.25em 0.75em;\n font: inherit;\n transition: background 200ms ease;\n\n &:hover,\n &:focus {\n background: ",";\n }\n\n &:active {\n background: color-mix(in srgb, "," 80%, black);\n }\n"])),On,On,On,On),Rn={overrides:{MyComponent:{component:function(e){/*#__PURE__*/return l.createElement(Hn,d({},e,{onClick:function(){alert("Look ma, I'm a real component!")}}))}}},renderRule:function(e,n,t,r){return"3"===n.type&&"latex"===n.lang?/*#__PURE__*/l.createElement(m,{as:"div",key:r.key,style:{margin:"1.5em 0"}},String.raw(mn||(mn=f(["",""])),n.text)):e()}};c.render(/*#__PURE__*/l.createElement(wn,null),document.getElementById("root"))}(React,ReactDOM,styled,katex); +!function(e,n,t,r){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,n}var o=/*#__PURE__*/i(e),l=/*#__PURE__*/a(e),c=/*#__PURE__*/a(n),u=/*#__PURE__*/i(t),s=/*#__PURE__*/i(r);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n=0||(i[t]=e[t]);return i}(n,["children","math","block","errorColor","renderError","settings","as"]),f=u||(i?"div":"span"),p=null!=t?t:r,h=e.useState({innerHtml:""}),g=h[0],y=h[1];return e.useEffect(function(){try{var e=s.default.renderToString(p,m({displayMode:!!i,errorColor:a,throwOnError:!!l},c));y({innerHtml:e})}catch(e){if(!(e instanceof s.default.ParseError||e instanceof TypeError))throw e;y(l?{errorElement:l(e)}:{innerHtml:e.message})}},[i,p,a,l,c]),"errorElement"in g?g.errorElement:o.default.createElement(f,Object.assign({},d,{dangerouslySetInnerHTML:{__html:g.innerHtml}}))});function h(){return h=Object.assign?Object.assign.bind():function(e){for(var n=1;n",lt:"<",nbsp:" ",quot:"“"},O=["style","script"],j=/([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi,z=/mailto:/i,C=/\n{2,}$/,M=/^( *>[^\n]+(\n[^\n]+)*\n*)+\n{2,}/,S=/^ *> ?/gm,A=/^ {2,}\n/,T=/^(?:( *[-*_])){3,} *(?:\n *)+\n/,$=/^\s*(`{3,}|~{3,}) *(\S+)?([^\n]*?)?\n([\s\S]+?)\s*\1 *(?:\n *)*\n?/,I=/^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/,R=/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,H=/^(?:\n *)*\n/,L=/\r\n?/g,_=/^\[\^([^\]]+)](:.*)\n/,N=/^\[\^([^\]]+)]/,P=/\f/g,U=/^\s*?\[(x|\s)\]/,D=/^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,G=/^ *(#{1,6}) +([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,B=/^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/,F=/^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)\/{0}>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i,W=/&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi,q=/^)/,Z=/^(data|aria|x)-[a-z_][a-z\d_.-]*$/,J=/^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i,X=/^\{.*\}$/,V=/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,K=/^<([^ >]+@[^ >]+)>/,Q=/^<([^ >]+:\/[^ >]+)>/,Y=/-([a-z])?/gi,ee=/^(.*\|?.*)\n *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*)\n?/,ne=/^\[([^\]]*)\]:\s+]+)>?\s*("([^"]*)")?/,te=/^!\[([^\]]*)\] ?\[([^\]]*)\]/,re=/^\[([^\]]*)\] ?\[([^\]]*)\]/,ie=/(\[|\])/g,ae=/(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/,oe=/\t/g,le=/^ *\| */,ce=/(^ *\||\| *$)/g,ue=/ *$/,se=/^ *:-+: *$/,de=/^ *:-+ *$/,fe=/^ *-+: *$/,me=/^([*_])\1((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1\1(?!\1)/,pe=/^([*_])((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1(?!\1|\w)/,he=/^==((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)==/,ge=/^~~((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/,ye=/^\\([^0-9A-Za-z\s])/,ve=/^[\s\S]+?(?=[^0-9A-Z\s\u00c0-\uffff&#;.()'"]|\d+\.|\n\n| {2,}\n|\w+:\S|$)/i,ke=/^\n+/,xe=/^([ \t]*)/,be=/\\([^\\])/g,Ee=/ *\n+$/,we=/(?:^|\n)( *)$/,Oe="(?:\\d+\\.)",je="(?:[*+-])";function ze(e){return"( *)("+(1===e?Oe:je)+") +"}var Ce=ze(1),Me=ze(2);function Se(e){return new RegExp("^"+(1===e?Ce:Me))}var Ae=Se(1),Te=Se(2);function $e(e){return new RegExp("^"+(1===e?Ce:Me)+"[^\\n]*(?:\\n(?!\\1"+(1===e?Oe:je)+" )[^\\n]*)*(\\n|$)","gm")}var Ie=$e(1),Re=$e(2);function He(e){var n=1===e?Oe:je;return new RegExp("^( *)("+n+") [\\s\\S]+?(?:\\n{2,}(?! )(?!\\1"+n+" (?!"+n+" ))\\n*|\\s*\\n*$)")}var Le=He(1),_e=He(2);function Ne(e,n){var t=1===n,r=t?Le:_e,i=t?Ie:Re,a=t?Ae:Te;return{match:function(e,n,t){var i=we.exec(t);return i&&(n.list||!n.inline&&!n.simple)?r.exec(e=i[1]+e):null},order:1,parse:function(e,n,r){var o=t?+e[2]:void 0,l=e[0].replace(C,"\n").match(i),c=!1;return{items:l.map(function(e,t){var i=a.exec(e)[0].length,o=new RegExp("^ {1,"+i+"}","gm"),u=e.replace(o,"").replace(a,""),s=t===l.length-1,d=-1!==u.indexOf("\n\n")||s&&c;c=d;var f,m=r.inline,p=r.list;r.list=!0,d?(r.inline=!1,f=u.replace(Ee,"\n\n")):(r.inline=!0,f=u.replace(Ee,""));var h=n(f,r);return r.inline=m,r.list=p,h}),ordered:t,start:o}},render:function(n,t,r){return e(n.ordered?"ol":"ul",{key:r.key,start:"20"===n.type?n.start:void 0},n.items.map(function(n,i){return e("li",{key:i},t(n,r))}))}}}var Pe=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,Ue=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,De=[M,$,I,D,B,G,q,ee,Ie,Le,Re,_e],Ge=[].concat(De,[/^[^\n]+(?: \n|\n{2,})/,F,J]);function Be(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function Fe(e){return fe.test(e)?"right":se.test(e)?"center":de.test(e)?"left":null}function We(e,n,t){var r=t.inTable;t.inTable=!0;var i=n(e.trim(),t);t.inTable=r;var a=[[]];return i.forEach(function(e,n){e.type===x?0!==n&&n!==i.length-1&&a.push([]):(e.type!==b||null!=i[n+1]&&i[n+1].type!==x||(e.text=e.text.replace(ue,"")),a[a.length-1].push(e))}),a}function qe(e,n,t){t.inline=!0;var r=We(e[1],n,t),i=e[2].replace(ce,"").split("|").map(Fe),a=function(e,n,t){return e.trim().split("\n").map(function(e){return We(e,n,t)})}(e[3],n,t);return t.inline=!1,{align:i,cells:a,header:r,type:"25"}}function Ze(e,n){return null==e.align[n]?{}:{textAlign:e.align[n]}}function Je(e){return function(n,t){return t.inline?e.exec(n):null}}function Xe(e){return function(n,t){return t.inline||t.simple?e.exec(n):null}}function Ve(e){return function(n,t){return t.inline||t.simple?null:e.exec(n)}}function Ke(e){return function(n){return e.exec(n)}}function Qe(e,n,t){if(n.inline||n.simple)return null;if(t&&!t.endsWith("\n"))return null;var r="";e.split("\n").every(function(e){return!De.some(function(n){return n.test(e)})&&(r+=e+"\n",e.trim())});var i=r.trimEnd();return""==i?null:[r,i]}function Ye(e){try{if(decodeURIComponent(e).replace(/[^A-Za-z0-9/:]/g,"").match(/^\s*(javascript|vbscript|data(?!:image)):/i))return}catch(e){return null}return e}function en(e){return e.replace(be,"$1")}function nn(e,n,t){var r=t.inline||!1,i=t.simple||!1;t.inline=!0,t.simple=!0;var a=e(n,t);return t.inline=r,t.simple=i,a}function tn(e,n,t){var r=t.inline||!1,i=t.simple||!1;t.inline=!1,t.simple=!0;var a=e(n,t);return t.inline=r,t.simple=i,a}function rn(e,n,t){return t.inline=!1,e(n,t)}var an,on,ln,cn,un,sn,dn,fn,mn,pn,hn=function(e,n,t){return{children:nn(n,e[1],t)}};function gn(){return{}}function yn(){return null}function vn(){return[].slice.call(arguments).filter(Boolean).join(" ")}function kn(e,n,t){for(var r=e,i=n.split(".");i.length&&void 0!==(r=r[i[0]]);)i.shift();return r||t}function xn(e,n){var t=kn(n,e);return t?"function"==typeof t||"object"==typeof t&&"render"in t?t:kn(n,e+".component",e):e}function bn(e,n){var t;void 0===n&&(n={}),n.overrides=n.overrides||{},n.slugify=n.slugify||Be,n.namedCodesToUnicode=n.namedCodesToUnicode?h({},w,n.namedCodesToUnicode):w;var r=n.createElement||l.createElement;function i(e,t){var i=kn(n.overrides,e+".props",{});return r.apply(void 0,[xn(e,n.overrides),h({},t,i,{className:vn(null==t?void 0:t.className,i.className)||void 0})].concat([].slice.call(arguments,2)))}function a(e){var t=!1;n.forceInline?t=!0:n.forceBlock||(t=!1===ae.test(e));for(var r=m(f(t?e:e.trimEnd().replace(ke,"")+"\n\n",{inline:t}));"string"==typeof r[r.length-1]&&!r[r.length-1].trim();)r.pop();if(null===n.wrapper)return r;var a,o=n.wrapper||(t?"span":"div");if(r.length>1||n.forceWrapper)a=r;else{if(1===r.length)return"string"==typeof(a=r[0])?i("span",{key:"outer"},a):a;a=null}return l.createElement(o,{key:"outer"},a)}function o(e){var n=e.match(j);return n?n.reduce(function(e,n,t){var r=n.indexOf("=");if(-1!==r){var i=function(e){return-1!==e.indexOf("-")&&null===e.match(Z)&&(e=e.replace(Y,function(e,n){return n.toUpperCase()})),e}(n.slice(0,r)).trim(),o=function(e){var n=e[0];return('"'===n||"'"===n)&&e.length>=2&&e[e.length-1]===n?e.slice(1,-1):e}(n.slice(r+1).trim()),c=E[i]||i,u=e[c]=function(e,n){return"style"===e?n.split(/;\s?/).reduce(function(e,n){var t=n.slice(0,n.indexOf(":"));return e[t.replace(/(-[a-z])/g,function(e){return e[1].toUpperCase()})]=n.slice(t.length+1).trim(),e},{}):"href"===e?Ye(n):(n.match(X)&&(n=n.slice(1,n.length-1)),"true"===n||"false"!==n&&n)}(i,o);"string"==typeof u&&(F.test(u)||J.test(u))&&(e[c]=l.cloneElement(a(u.trim()),{key:t}))}else"style"!==n&&(e[E[n]||n]=!0);return e},{}):null}var c=[],u={},s=((t={})[0]={match:Ve(M),order:1,parse:function(e,n,t){return{children:n(e[0].replace(S,""),t)}},render:function(e,n,t){return i("blockquote",{key:t.key},n(e.children,t))}},t[1]={match:Ke(A),order:1,parse:gn,render:function(e,n,t){return i("br",{key:t.key})}},t[2]={match:Ve(T),order:1,parse:gn,render:function(e,n,t){return i("hr",{key:t.key})}},t[3]={match:Ve(I),order:0,parse:function(e){return{lang:void 0,text:e[0].replace(/^ {4}/gm,"").replace(/\n+$/,"")}},render:function(e,n,t){return i("pre",{key:t.key},i("code",h({},e.attrs,{className:e.lang?"lang-"+e.lang:""}),e.text))}},t[4]={match:Ve($),order:0,parse:function(e){return{attrs:o(e[3]||""),lang:e[2]||void 0,text:e[4],type:"3"}}},t[5]={match:Xe(R),order:3,parse:function(e){return{text:e[2]}},render:function(e,n,t){return i("code",{key:t.key},e.text)}},t[6]={match:Ve(_),order:0,parse:function(e){return c.push({footnote:e[2],identifier:e[1]}),{}},render:yn},t[7]={match:Je(N),order:1,parse:function(e){return{target:"#"+n.slugify(e[1]),text:e[1]}},render:function(e,n,t){return i("a",{key:t.key,href:Ye(e.target)},i("sup",{key:t.key},e.text))}},t[8]={match:Je(U),order:1,parse:function(e){return{completed:"x"===e[1].toLowerCase()}},render:function(e,n,t){return i("input",{checked:e.completed,key:t.key,readOnly:!0,type:"checkbox"})}},t[9]={match:Ve(n.enforceAtxHeadings?G:D),order:1,parse:function(e,t,r){return{children:nn(t,e[2],r),id:n.slugify(e[2]),level:e[1].length}},render:function(e,n,t){return i("h"+e.level,{id:e.id,key:t.key},n(e.children,t))}},t[10]={match:Ve(B),order:0,parse:function(e,n,t){return{children:nn(n,e[1],t),level:"="===e[2]?1:2,type:"9"}}},t[11]={match:Ke(F),order:1,parse:function(e,n,t){var r,i=e[3].match(xe),a=new RegExp("^"+i[1],"gm"),l=e[3].replace(a,""),c=(r=l,Ge.some(function(e){return e.test(r)})?rn:nn),u=e[1].toLowerCase(),s=-1!==O.indexOf(u),d={attrs:o(e[2]),noInnerParse:s,tag:s?u:e[1]};return t.inAnchor=t.inAnchor||"a"===u,s?d.text=e[3]:d.children=c(n,l,t),t.inAnchor=!1,d},render:function(e,n,t){return i(e.tag,h({key:t.key},e.attrs),e.text||n(e.children,t))}},t[13]={match:Ke(J),order:1,parse:function(e){return{attrs:o(e[2]||""),tag:e[1]}},render:function(e,n,t){return i(e.tag,h({},e.attrs,{key:t.key}))}},t[12]={match:Ke(q),order:1,parse:function(){return{}},render:yn},t[14]={match:Xe(Ue),order:1,parse:function(e){return{alt:e[1],target:en(e[2]),title:e[3]}},render:function(e,n,t){return i("img",{key:t.key,alt:e.alt||void 0,title:e.title||void 0,src:Ye(e.target)})}},t[k]={match:Je(Pe),order:3,parse:function(e,n,t){return{children:tn(n,e[1],t),target:en(e[2]),title:e[3]}},render:function(e,n,t){return i("a",{key:t.key,href:Ye(e.target),title:e.title},n(e.children,t))}},t[16]={match:Je(Q),order:0,parse:function(e){return{children:[{text:e[1],type:b}],target:e[1],type:k}}},t[17]={match:function(e,n){return n.inAnchor?null:Je(V)(e,n)},order:0,parse:function(e){return{children:[{text:e[1],type:b}],target:e[1],title:void 0,type:k}}},t[18]={match:Je(K),order:0,parse:function(e){var n=e[1],t=e[1];return z.test(t)||(t="mailto:"+t),{children:[{text:n.replace("mailto:",""),type:b}],target:t,type:k}}},t[20]=Ne(i,1),t[33]=Ne(i,2),t[19]={match:Ve(H),order:3,parse:gn,render:function(){return"\n"}},t[21]={match:Qe,order:3,parse:hn,render:function(e,n,t){return i("p",{key:t.key},n(e.children,t))}},t[22]={match:Je(ne),order:0,parse:function(e){return u[e[1]]={target:e[2],title:e[4]},{}},render:yn},t[23]={match:Xe(te),order:0,parse:function(e){return{alt:e[1]||void 0,ref:e[2]}},render:function(e,n,t){return i("img",{key:t.key,alt:e.alt,src:Ye(u[e.ref].target),title:u[e.ref].title})}},t[24]={match:Je(re),order:0,parse:function(e,n,t){return{children:n(e[1],t),fallbackChildren:n(e[0].replace(ie,"\\$1"),t),ref:e[2]}},render:function(e,n,t){return u[e.ref]?i("a",{key:t.key,href:Ye(u[e.ref].target),title:u[e.ref].title},n(e.children,t)):i("span",{key:t.key},n(e.fallbackChildren,t))}},t[25]={match:Ve(ee),order:1,parse:qe,render:function(e,n,t){return i("table",{key:t.key},i("thead",null,i("tr",null,e.header.map(function(r,a){return i("th",{key:a,style:Ze(e,a)},n(r,t))}))),i("tbody",null,e.cells.map(function(r,a){return i("tr",{key:a},r.map(function(r,a){return i("td",{key:a,style:Ze(e,a)},n(r,t))}))})))}},t[x]={match:function(e,n){return n.inTable?(n.inline=!0,le.exec(e)):null},order:1,parse:function(){return{type:x}},render:function(){return" | "}},t[b]={match:Ke(ve),order:4,parse:function(e){return{text:e[0].replace(W,function(e,t){return n.namedCodesToUnicode[t]?n.namedCodesToUnicode[t]:e})}},render:function(e){return e.text}},t[28]={match:Xe(me),order:2,parse:function(e,n,t){return{children:n(e[2],t)}},render:function(e,n,t){return i("strong",{key:t.key},n(e.children,t))}},t[29]={match:Xe(pe),order:3,parse:function(e,n,t){return{children:n(e[2],t)}},render:function(e,n,t){return i("em",{key:t.key},n(e.children,t))}},t[30]={match:Xe(ye),order:1,parse:function(e){return{text:e[1],type:b}}},t[31]={match:Xe(he),order:3,parse:hn,render:function(e,n,t){return i("mark",{key:t.key},n(e.children,t))}},t[32]={match:Xe(ge),order:3,parse:hn,render:function(e,n,t){return i("del",{key:t.key},n(e.children,t))}},t);!0===n.disableParsingRawHTML&&(delete s[11],delete s[13]);var d,f=function(e){var n=Object.keys(e);function t(r,i){for(var a=[],o="";r;)for(var l=0;l=0||(i[t]=e[t]);return i}(e,v);return l.cloneElement(bn(n,t),r)}function wn(){var e=l.useState(document.getElementById("sample-content").textContent.trim()),n=e[0],t=e[1],r=l.useCallback(function(e){return t(e.target.value)},[]);/*#__PURE__*/return l.createElement("main",null,/*#__PURE__*/l.createElement(zn,null),/*#__PURE__*/l.createElement(Cn,null,/*#__PURE__*/l.createElement("a",{target:"_blank",href:"https://github.com/quantizor/markdown-to-jsx",title:"Check out the markdown-to-jsx source code",rel:"noopener noreferrer"},/*#__PURE__*/l.createElement("img",{src:"./images/logo.svg",alt:"markdown-to-jsx logo"})),/*#__PURE__*/l.createElement(Mn,null,/*#__PURE__*/l.createElement("h1",null,/*#__PURE__*/l.createElement("code",null,"markdown-to-jsx")," is an easy-to-use markdown component that takes Github-flavored Markdown (GFM) and makes native JSX without dangerous hacks. "),/*#__PURE__*/l.createElement("h2",null,"It's lightweight, customizable, and happily supports React-like libraries.")),/*#__PURE__*/l.createElement(Sn,null,"See the"," ",/*#__PURE__*/l.createElement("a",{target:"_blank",href:"https://github.com/quantizor/markdown-to-jsx/blob/main/README.md",rel:"noopener noreferrer"},"project README")," ","for detailed installation & usage instructions.")),/*#__PURE__*/l.createElement(Tn,null,/*#__PURE__*/l.createElement($n,{onInput:r,value:n}),/*#__PURE__*/l.createElement(In,null,/*#__PURE__*/l.createElement(En,{options:Hn},n))))}var On="cornflowerblue",jn="#fefefe",zn=t.createGlobalStyle(an||(an=f(["\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t\toutline-color: ",";\n\t}\n\n\thtml,\n\tbody,\n\t#root,\n\tmain {\n\t\tmargin: 0;\n\t\tmin-height: 100vh;\n\t}\n\n\thtml {\n\t\tbackground: #1a1c23;\n\t\tcolor: ",";\n\t\tfont-family: Inter, Helvetica Neue, Helvetica, sans-serif;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: 0 0 1rem;\n text-wrap: balance;\n\t}\n\n\th1 {\n\t\tfont-size: 2rem;\n\t}\n\n\th2 {\n\t\tfont-size: 1.8rem;\n\t}\n\n\th3 {\n\t\tfont-size: 1.6rem;\n\t}\n\n\th4 {\n\t\tfont-size: 1.4rem;\n\t}\n\n\th5 {\n\t\tfont-size: 1.2rem;\n\t}\n\n\th6 {\n\t\tfont-size: 1rem;\n\t}\n\n\ta {\n\t\tcolor: ",";\n\t\ttransition: color 200ms ease;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tcolor: color-mix(in srgb, "," 75%, transparent);\n\t\t}\n\t}\n\n :root {\n --code-bg: color-mix(in srgb, "," 15%, transparent);\n }\n\n\tcode {\n background: var(--code-bg) !important;\n border-radius: 2px;\n\t\tdisplay: inline-block;\n font-family: 'Jetbrains Mono', Consolas, Monaco, monospace;\n font-size: 0.9em;\n\t\tpadding: 0 4px;\n text-decoration: inherit;\n\t}\n\n\tpre code {\n\t\tborder: 0;\n\t\tdisplay: block;\n\t\tpadding: 1em;\n\t}\n\n\tmain {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 3rem 1.5rem 0;\n\t\tmargin: 0;\n\n\t\t@media all and (min-width: 1024px) {\n\t\t\tpadding: 3rem;\n\t\t}\n\t}\n\n p {\n text-wrap: balance;\n }\n"])),On,jn,On,On,On),Cn=u.default.header(on||(on=f(["\n flex-shrink: 0;\n margin-bottom: 2em;\n text-align: center;\n\n img {\n height: 100px;\n }\n"]))),Mn=u.default.p(ln||(ln=f(["\n font-size: 16px;\n margin-left: auto;\n margin-right: auto;\n max-width: 60vw;\n\n h1,\n h2 {\n font: inherit;\n }\n\n @media all and (max-width: 500px) {\n max-width: none;\n }\n\n @media all and (max-width: 1023px) {\n h1,\n h2 {\n display: block;\n margin-bottom: 1.5rem;\n }\n }\n"]))),Sn=u.default.p(cn||(cn=f(["\n color: color-mix(in srgb, "," 20%, white);\n"])),jn),An=t.css(un||(un=f(["\n flex: 0 0 50%;\n padding: 1em;\n"]))),Tn=u.default.section(sn||(sn=f(["\n display: flex;\n flex-grow: 1;\n margin-left: -1.5rem;\n margin-right: -1.5rem;\n\n @media all and (min-width: 1024px) {\n margin-left: 0;\n margin-right: 0;\n }\n\n @media all and (max-width: 500px) {\n flex-direction: column;\n }\n"]))),$n=u.default.textarea(dn||(dn=f(["\n ",";\n background: color-mix(in srgb, "," 10%, transparent);\n border: 0;\n color: inherit;\n position: sticky;\n top: 0;\n font-family: 'Jetbrains Mono', Consolas, Monaco, monospace;\n font-size: inherit;\n max-height: 100vh;\n\n @media all and (max-width: 500px) {\n height: 300px;\n position: relative;\n }\n"])),An,On),In=u.default.div(fn||(fn=f(["\n ",";\n padding-left: 2rem;\n padding-right: 1rem;\n overflow: auto;\n overflow-x: hidden;\n"])),An),Rn=u.default.button(mn||(mn=f(["\n background: color-mix(in srgb, "," 50%, black);\n border: 1px solid color-mix(in srgb, "," 50%, transparent);\n border-radius: 2px;\n color: #fff;\n cursor: pointer;\n padding: 0.25em 0.75em;\n font: inherit;\n transition: background 200ms ease;\n\n &:hover,\n &:focus {\n background: ",";\n }\n\n &:active {\n background: color-mix(in srgb, "," 80%, black);\n }\n"])),On,On,On,On),Hn={overrides:{code:function(e){var n=l.useRef(null);return l.useEffect(function(){var t;n.current&&null!=(t=e.className)&&t.includes("lang-")&&window.hljs&&(window.hljs.highlightElement(n.current),n.current.removeAttribute("data-highlighted"))},[e.className,e.children]),/*#__PURE__*/l.createElement("code",d({},e,{ref:n}))},MyComponent:{component:function(e){/*#__PURE__*/return l.createElement(Rn,d({},e,{onClick:function(){alert("Look ma, I'm a real component!")}}))}}},renderRule:function(e,n,t,r){return"3"===n.type&&"latex"===n.lang?/*#__PURE__*/l.createElement(p,{as:"div",key:r.key,style:{margin:"1.5em 0"}},String.raw(pn||(pn=f(["",""])),n.text)):e()}};c.render(/*#__PURE__*/l.createElement(wn,null),document.getElementById("root"))}(React,ReactDOM,styled,katex); //# sourceMappingURL=markdown-to-jsx.js.map diff --git a/docs/markdown-to-jsx.js.map b/docs/markdown-to-jsx.js.map index 97b487d0..18116e52 100644 --- a/docs/markdown-to-jsx.js.map +++ b/docs/markdown-to-jsx.js.map @@ -1 +1 @@ -{"version":3,"file":"markdown-to-jsx.js","sources":["../node_modules/@matejmazur/react-katex/dist/react-katex.m.js","../dist/index.module.js","../site.tsx"],"sourcesContent":["import r,{memo as e,useState as n,useEffect as t}from\"react\";import o from\"katex\";function a(){return(a=Object.assign||function(r){for(var e=1;e=0||(o[n]=r[n]);return o}(e,[\"children\",\"math\",\"block\",\"errorColor\",\"renderError\",\"settings\",\"as\"]),d=u||(s?\"div\":\"span\"),p=null!=i?i:l,g=n({innerHtml:\"\"}),E=g[0],v=g[1];return t(function(){try{var r=o.renderToString(p,a({displayMode:!!s,errorColor:c,throwOnError:!!f},m));v({innerHtml:r})}catch(r){if(!(r instanceof o.ParseError||r instanceof TypeError))throw r;v(f?{errorElement:f(r)}:{innerHtml:r.message})}},[s,p,c,f,m]),\"errorElement\"in E?E.errorElement:r.createElement(d,Object.assign({},h,{dangerouslySetInnerHTML:{__html:E.innerHtml}}))});export default i;\n//# sourceMappingURL=react-katex.m.js.map\n","import*as e from\"react\";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var r=1;r\",lt:\"<\",nbsp:\" \",quot:\"“\"},l=[\"style\",\"script\"],c=/([-A-Z0-9_:]+)(?:\\s*=\\s*(?:(?:\"((?:\\\\.|[^\"])*)\")|(?:'((?:\\\\.|[^'])*)')|(?:\\{((?:\\\\.|{[^}]*?}|[^}])*)\\})))?/gi,u=/mailto:/i,d=/\\n{2,}$/,s=/^( *>[^\\n]+(\\n[^\\n]+)*\\n*)+\\n{2,}/,f=/^ *> ?/gm,p=/^ {2,}\\n/,h=/^(?:( *[-*_])){3,} *(?:\\n *)+\\n/,m=/^\\s*(`{3,}|~{3,}) *(\\S+)?([^\\n]*?)?\\n([\\s\\S]+?)\\s*\\1 *(?:\\n *)*\\n?/,g=/^(?: {4}[^\\n]+\\n*)+(?:\\n *)+\\n?/,y=/^(`+)\\s*([\\s\\S]*?[^`])\\s*\\1(?!`)/,k=/^(?:\\n *)*\\n/,v=/\\r\\n?/g,x=/^\\[\\^([^\\]]+)](:.*)\\n/,b=/^\\[\\^([^\\]]+)]/,S=/\\f/g,C=/^\\s*?\\[(x|\\s)\\]/,E=/^ *(#{1,6}) *([^\\n]+?)(?: +#*)?(?:\\n *)*(?:\\n|$)/,w=/^ *(#{1,6}) +([^\\n]+?)(?: +#*)?(?:\\n *)*(?:\\n|$)/,L=/^([^\\n]+)\\n *(=|-){3,} *(?:\\n *)+\\n/,T=/^ *(?!<[a-z][^ >/]* ?\\/>)<([a-z][^ >/]*) ?([^>]*)\\/{0}>\\n?(\\s*(?:<\\1[^>]*?>[\\s\\S]*?<\\/\\1>|(?!<\\1)[\\s\\S])*?)<\\/\\1>\\n*/i,A=/&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi,$=/^)/,O=/^(data|aria|x)-[a-z_][a-z\\d_.-]*$/,B=/^ *<([a-z][a-z0-9:]*)(?:\\s+((?:<.*?>|[^>])*))?\\/?>(?!<\\/\\1>)(\\s*\\n)?/i,M=/^\\{.*\\}$/,z=/^(https?:\\/\\/[^\\s<]+[^<.,:;\"')\\]\\s])/,I=/^<([^ >]+@[^ >]+)>/,R=/^<([^ >]+:\\/[^ >]+)>/,U=/-([a-z])?/gi,D=/^(.*\\|?.*)\\n *(\\|? *[-:]+ *\\|[-| :]*)\\n((?:.*\\|.*\\n)*)\\n?/,j=/^\\[([^\\]]*)\\]:\\s+]+)>?\\s*(\"([^\"]*)\")?/,N=/^!\\[([^\\]]*)\\] ?\\[([^\\]]*)\\]/,H=/^\\[([^\\]]*)\\] ?\\[([^\\]]*)\\]/,F=/(\\[|\\])/g,P=/(\\n|^[-*]\\s|^#|^ {2,}|^-{2,}|^>\\s)/,_=/\\t/g,W=/^ *\\| */,G=/(^ *\\||\\| *$)/g,Z=/ *$/,q=/^ *:-+: *$/,Q=/^ *:-+ *$/,V=/^ *-+: *$/,X=/^([*_])\\1((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\\1\\1(?!\\1)/,J=/^([*_])((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\\1(?!\\1|\\w)/,K=/^==((?:\\[.*?\\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)==/,Y=/^~~((?:\\[.*?\\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/,ee=/^\\\\([^0-9A-Za-z\\s])/,re=/^[\\s\\S]+?(?=[^0-9A-Z\\s\\u00c0-\\uffff&#;.()'\"]|\\d+\\.|\\n\\n| {2,}\\n|\\w+:\\S|$)/i,ne=/^\\n+/,te=/^([ \\t]*)/,ie=/\\\\([^\\\\])/g,ae=/ *\\n+$/,oe=/(?:^|\\n)( *)$/,le=\"(?:\\\\d+\\\\.)\",ce=\"(?:[*+-])\";function ue(e){return\"( *)(\"+(1===e?le:ce)+\") +\"}var de=ue(1),se=ue(2);function fe(e){return new RegExp(\"^\"+(1===e?de:se))}var pe=fe(1),he=fe(2);function me(e){return new RegExp(\"^\"+(1===e?de:se)+\"[^\\\\n]*(?:\\\\n(?!\\\\1\"+(1===e?le:ce)+\" )[^\\\\n]*)*(\\\\n|$)\",\"gm\")}var ge=me(1),ye=me(2);function ke(e){var r=1===e?le:ce;return new RegExp(\"^( *)(\"+r+\") [\\\\s\\\\S]+?(?:\\\\n{2,}(?! )(?!\\\\1\"+r+\" (?!\"+r+\" ))\\\\n*|\\\\s*\\\\n*$)\")}var ve=ke(1),xe=ke(2);function be(e,r){var n=1===r,t=n?ve:xe,a=n?ge:ye,o=n?pe:he;return{match:function(e,r,n){var i=oe.exec(n);return i&&(r.list||!r.inline&&!r.simple)?t.exec(e=i[1]+e):null},order:1,parse:function(e,r,t){var i=n?+e[2]:void 0,l=e[0].replace(d,\"\\n\").match(a),c=!1;return{items:l.map(function(e,n){var i=o.exec(e)[0].length,a=new RegExp(\"^ {1,\"+i+\"}\",\"gm\"),u=e.replace(a,\"\").replace(o,\"\"),d=n===l.length-1,s=-1!==u.indexOf(\"\\n\\n\")||d&&c;c=s;var f,p=t.inline,h=t.list;t.list=!0,s?(t.inline=!1,f=u.replace(ae,\"\\n\\n\")):(t.inline=!0,f=u.replace(ae,\"\"));var m=r(f,t);return t.inline=p,t.list=h,m}),ordered:n,start:i}},render:function(r,n,t){return e(r.ordered?\"ol\":\"ul\",{key:t.key,start:r.type===i.orderedList?r.start:void 0},r.items.map(function(r,i){return e(\"li\",{key:i},n(r,t))}))}}}var Se=/^\\[([^\\]]*)]\\( *((?:\\([^)]*\\)|[^() ])*) *\"?([^)\"]*)?\"?\\)/,Ce=/^!\\[([^\\]]*)]\\( *((?:\\([^)]*\\)|[^() ])*) *\"?([^)\"]*)?\"?\\)/,Ee=[s,m,g,E,L,w,$,D,ge,ve,ye,xe],we=[].concat(Ee,[/^[^\\n]+(?: \\n|\\n{2,})/,T,B]);function Le(e){return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g,\"a\").replace(/[çÇ]/g,\"c\").replace(/[ðÐ]/g,\"d\").replace(/[ÈÉÊËéèêë]/g,\"e\").replace(/[ÏïÎîÍíÌì]/g,\"i\").replace(/[Ññ]/g,\"n\").replace(/[øØœŒÕõÔôÓóÒò]/g,\"o\").replace(/[ÜüÛûÚúÙù]/g,\"u\").replace(/[ŸÿÝý]/g,\"y\").replace(/[^a-z0-9- ]/gi,\"\").replace(/ /gi,\"-\").toLowerCase()}function Te(e){return V.test(e)?\"right\":q.test(e)?\"center\":Q.test(e)?\"left\":null}function Ae(e,r,n){var t=n.inTable;n.inTable=!0;var a=r(e.trim(),n);n.inTable=t;var o=[[]];return a.forEach(function(e,r){e.type===i.tableSeparator?0!==r&&r!==a.length-1&&o.push([]):(e.type!==i.text||null!=a[r+1]&&a[r+1].type!==i.tableSeparator||(e.text=e.text.replace(Z,\"\")),o[o.length-1].push(e))}),o}function $e(e,r,n){n.inline=!0;var t=Ae(e[1],r,n),a=e[2].replace(G,\"\").split(\"|\").map(Te),o=function(e,r,n){return e.trim().split(\"\\n\").map(function(e){return Ae(e,r,n)})}(e[3],r,n);return n.inline=!1,{align:a,cells:o,header:t,type:i.table}}function Oe(e,r){return null==e.align[r]?{}:{textAlign:e.align[r]}}function Be(e){return function(r,n){return n.inline?e.exec(r):null}}function Me(e){return function(r,n){return n.inline||n.simple?e.exec(r):null}}function ze(e){return function(r,n){return n.inline||n.simple?null:e.exec(r)}}function Ie(e){return function(r){return e.exec(r)}}function Re(e,r,n){if(r.inline||r.simple)return null;if(n&&!n.endsWith(\"\\n\"))return null;var t=\"\";e.split(\"\\n\").every(function(e){return!Ee.some(function(r){return r.test(e)})&&(t+=e+\"\\n\",e.trim())});var i=t.trimEnd();return\"\"==i?null:[t,i]}function Ue(e){try{if(decodeURIComponent(e).replace(/[^A-Za-z0-9/:]/g,\"\").match(/^\\s*(javascript|vbscript|data(?!:image)):/i))return}catch(e){return null}return e}function De(e){return e.replace(ie,\"$1\")}function je(e,r,n){var t=n.inline||!1,i=n.simple||!1;n.inline=!0,n.simple=!0;var a=e(r,n);return n.inline=t,n.simple=i,a}function Ne(e,r,n){var t=n.inline||!1,i=n.simple||!1;n.inline=!1,n.simple=!0;var a=e(r,n);return n.inline=t,n.simple=i,a}function He(e,r,n){return n.inline=!1,e(r,n)}var Fe=function(e,r,n){return{children:je(r,e[1],n)}};function Pe(){return{}}function _e(){return null}function We(){return[].slice.call(arguments).filter(Boolean).join(\" \")}function Ge(e,r,n){for(var t=e,i=r.split(\".\");i.length&&void 0!==(t=t[i[0]]);)i.shift();return t||n}function Ze(e,r){var n=Ge(r,e);return n?\"function\"==typeof n||\"object\"==typeof n&&\"render\"in n?n:Ge(r,e+\".component\",e):e}function qe(n,t){var d;void 0===t&&(t={}),t.overrides=t.overrides||{},t.slugify=t.slugify||Le,t.namedCodesToUnicode=t.namedCodesToUnicode?r({},o,t.namedCodesToUnicode):o;var G=t.createElement||e.createElement;function Z(e,n){var i=Ge(t.overrides,e+\".props\",{});return G.apply(void 0,[Ze(e,t.overrides),r({},n,i,{className:We(null==n?void 0:n.className,i.className)||void 0})].concat([].slice.call(arguments,2)))}function q(r){var n=!1;t.forceInline?n=!0:t.forceBlock||(n=!1===P.test(r));for(var i=ce(le(n?r:r.trimEnd().replace(ne,\"\")+\"\\n\\n\",{inline:n}));\"string\"==typeof i[i.length-1]&&!i[i.length-1].trim();)i.pop();if(null===t.wrapper)return i;var a,o=t.wrapper||(n?\"span\":\"div\");if(i.length>1||t.forceWrapper)a=i;else{if(1===i.length)return\"string\"==typeof(a=i[0])?Z(\"span\",{key:\"outer\"},a):a;a=null}return e.createElement(o,{key:\"outer\"},a)}function Q(r){var n=r.match(c);return n?n.reduce(function(r,n,t){var i=n.indexOf(\"=\");if(-1!==i){var o=function(e){return-1!==e.indexOf(\"-\")&&null===e.match(O)&&(e=e.replace(U,function(e,r){return r.toUpperCase()})),e}(n.slice(0,i)).trim(),l=function(e){var r=e[0];return('\"'===r||\"'\"===r)&&e.length>=2&&e[e.length-1]===r?e.slice(1,-1):e}(n.slice(i+1).trim()),c=a[o]||o,u=r[c]=function(e,r){return\"style\"===e?r.split(/;\\s?/).reduce(function(e,r){var n=r.slice(0,r.indexOf(\":\"));return e[n.replace(/(-[a-z])/g,function(e){return e[1].toUpperCase()})]=r.slice(n.length+1).trim(),e},{}):\"href\"===e?Ue(r):(r.match(M)&&(r=r.slice(1,r.length-1)),\"true\"===r||\"false\"!==r&&r)}(o,l);\"string\"==typeof u&&(T.test(u)||B.test(u))&&(r[c]=e.cloneElement(q(u.trim()),{key:t}))}else\"style\"!==n&&(r[a[n]||n]=!0);return r},{}):null}var V=[],ie={},ae=((d={})[i.blockQuote]={match:ze(s),order:1,parse:function(e,r,n){return{children:r(e[0].replace(f,\"\"),n)}},render:function(e,r,n){return Z(\"blockquote\",{key:n.key},r(e.children,n))}},d[i.breakLine]={match:Ie(p),order:1,parse:Pe,render:function(e,r,n){return Z(\"br\",{key:n.key})}},d[i.breakThematic]={match:ze(h),order:1,parse:Pe,render:function(e,r,n){return Z(\"hr\",{key:n.key})}},d[i.codeBlock]={match:ze(g),order:0,parse:function(e){return{lang:void 0,text:e[0].replace(/^ {4}/gm,\"\").replace(/\\n+$/,\"\")}},render:function(e,n,t){return Z(\"pre\",{key:t.key},Z(\"code\",r({},e.attrs,{className:e.lang?\"lang-\"+e.lang:\"\"}),e.text))}},d[i.codeFenced]={match:ze(m),order:0,parse:function(e){return{attrs:Q(e[3]||\"\"),lang:e[2]||void 0,text:e[4],type:i.codeBlock}}},d[i.codeInline]={match:Me(y),order:3,parse:function(e){return{text:e[2]}},render:function(e,r,n){return Z(\"code\",{key:n.key},e.text)}},d[i.footnote]={match:ze(x),order:0,parse:function(e){return V.push({footnote:e[2],identifier:e[1]}),{}},render:_e},d[i.footnoteReference]={match:Be(b),order:1,parse:function(e){return{target:\"#\"+t.slugify(e[1]),text:e[1]}},render:function(e,r,n){return Z(\"a\",{key:n.key,href:Ue(e.target)},Z(\"sup\",{key:n.key},e.text))}},d[i.gfmTask]={match:Be(C),order:1,parse:function(e){return{completed:\"x\"===e[1].toLowerCase()}},render:function(e,r,n){return Z(\"input\",{checked:e.completed,key:n.key,readOnly:!0,type:\"checkbox\"})}},d[i.heading]={match:ze(t.enforceAtxHeadings?w:E),order:1,parse:function(e,r,n){return{children:je(r,e[2],n),id:t.slugify(e[2]),level:e[1].length}},render:function(e,r,n){return Z(\"h\"+e.level,{id:e.id,key:n.key},r(e.children,n))}},d[i.headingSetext]={match:ze(L),order:0,parse:function(e,r,n){return{children:je(r,e[1],n),level:\"=\"===e[2]?1:2,type:i.heading}}},d[i.htmlBlock]={match:Ie(T),order:1,parse:function(e,r,n){var t,i=e[3].match(te),a=new RegExp(\"^\"+i[1],\"gm\"),o=e[3].replace(a,\"\"),c=(t=o,we.some(function(e){return e.test(t)})?He:je),u=e[1].toLowerCase(),d=-1!==l.indexOf(u),s={attrs:Q(e[2]),noInnerParse:d,tag:d?u:e[1]};return n.inAnchor=n.inAnchor||\"a\"===u,d?s.text=e[3]:s.children=c(r,o,n),n.inAnchor=!1,s},render:function(e,n,t){return Z(e.tag,r({key:t.key},e.attrs),e.text||n(e.children,t))}},d[i.htmlSelfClosing]={match:Ie(B),order:1,parse:function(e){return{attrs:Q(e[2]||\"\"),tag:e[1]}},render:function(e,n,t){return Z(e.tag,r({},e.attrs,{key:t.key}))}},d[i.htmlComment]={match:Ie($),order:1,parse:function(){return{}},render:_e},d[i.image]={match:Me(Ce),order:1,parse:function(e){return{alt:e[1],target:De(e[2]),title:e[3]}},render:function(e,r,n){return Z(\"img\",{key:n.key,alt:e.alt||void 0,title:e.title||void 0,src:Ue(e.target)})}},d[i.link]={match:Be(Se),order:3,parse:function(e,r,n){return{children:Ne(r,e[1],n),target:De(e[2]),title:e[3]}},render:function(e,r,n){return Z(\"a\",{key:n.key,href:Ue(e.target),title:e.title},r(e.children,n))}},d[i.linkAngleBraceStyleDetector]={match:Be(R),order:0,parse:function(e){return{children:[{text:e[1],type:i.text}],target:e[1],type:i.link}}},d[i.linkBareUrlDetector]={match:function(e,r){return r.inAnchor?null:Be(z)(e,r)},order:0,parse:function(e){return{children:[{text:e[1],type:i.text}],target:e[1],title:void 0,type:i.link}}},d[i.linkMailtoDetector]={match:Be(I),order:0,parse:function(e){var r=e[1],n=e[1];return u.test(n)||(n=\"mailto:\"+n),{children:[{text:r.replace(\"mailto:\",\"\"),type:i.text}],target:n,type:i.link}}},d[i.orderedList]=be(Z,1),d[i.unorderedList]=be(Z,2),d[i.newlineCoalescer]={match:ze(k),order:3,parse:Pe,render:function(){return\"\\n\"}},d[i.paragraph]={match:Re,order:3,parse:Fe,render:function(e,r,n){return Z(\"p\",{key:n.key},r(e.children,n))}},d[i.ref]={match:Be(j),order:0,parse:function(e){return ie[e[1]]={target:e[2],title:e[4]},{}},render:_e},d[i.refImage]={match:Me(N),order:0,parse:function(e){return{alt:e[1]||void 0,ref:e[2]}},render:function(e,r,n){return Z(\"img\",{key:n.key,alt:e.alt,src:Ue(ie[e.ref].target),title:ie[e.ref].title})}},d[i.refLink]={match:Be(H),order:0,parse:function(e,r,n){return{children:r(e[1],n),fallbackChildren:r(e[0].replace(F,\"\\\\$1\"),n),ref:e[2]}},render:function(e,r,n){return ie[e.ref]?Z(\"a\",{key:n.key,href:Ue(ie[e.ref].target),title:ie[e.ref].title},r(e.children,n)):Z(\"span\",{key:n.key},r(e.fallbackChildren,n))}},d[i.table]={match:ze(D),order:1,parse:$e,render:function(e,r,n){return Z(\"table\",{key:n.key},Z(\"thead\",null,Z(\"tr\",null,e.header.map(function(t,i){return Z(\"th\",{key:i,style:Oe(e,i)},r(t,n))}))),Z(\"tbody\",null,e.cells.map(function(t,i){return Z(\"tr\",{key:i},t.map(function(t,i){return Z(\"td\",{key:i,style:Oe(e,i)},r(t,n))}))})))}},d[i.tableSeparator]={match:function(e,r){return r.inTable?(r.inline=!0,W.exec(e)):null},order:1,parse:function(){return{type:i.tableSeparator}},render:function(){return\" | \"}},d[i.text]={match:Ie(re),order:4,parse:function(e){return{text:e[0].replace(A,function(e,r){return t.namedCodesToUnicode[r]?t.namedCodesToUnicode[r]:e})}},render:function(e){return e.text}},d[i.textBolded]={match:Me(X),order:2,parse:function(e,r,n){return{children:r(e[2],n)}},render:function(e,r,n){return Z(\"strong\",{key:n.key},r(e.children,n))}},d[i.textEmphasized]={match:Me(J),order:3,parse:function(e,r,n){return{children:r(e[2],n)}},render:function(e,r,n){return Z(\"em\",{key:n.key},r(e.children,n))}},d[i.textEscaped]={match:Me(ee),order:1,parse:function(e){return{text:e[1],type:i.text}}},d[i.textMarked]={match:Me(K),order:3,parse:Fe,render:function(e,r,n){return Z(\"mark\",{key:n.key},r(e.children,n))}},d[i.textStrikethroughed]={match:Me(Y),order:3,parse:Fe,render:function(e,r,n){return Z(\"del\",{key:n.key},r(e.children,n))}},d);!0===t.disableParsingRawHTML&&(delete ae[i.htmlBlock],delete ae[i.htmlSelfClosing]);var oe,le=function(e){var r=Object.keys(e);function n(t,i){for(var a=[],o=\"\";t;)for(var l=0;l=0||(i[n]=e[n]);return i}(r,t);return e.cloneElement(qe(n,i),a)}export{i as RuleType,qe as compiler};\n//# sourceMappingURL=index.module.js.map\n","/* @jsx React.createElement */\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport styled, { createGlobalStyle, css, CSSProp } from 'styled-components'\nimport TeX from '@matejmazur/react-katex'\nimport Markdown, { MarkdownToJSX, RuleType } from './'\n\ndeclare module 'react' {\n interface Attributes {\n css?: CSSProp\n }\n}\n\nfunction TryItLive() {\n const [markdown, setMarkdown] = React.useState(\n document.getElementById('sample-content')!.textContent!.trim()\n )\n\n const handleInput = React.useCallback(e => setMarkdown(e.target.value), [])\n\n return (\n
\n \n\n
\n \n \"markdown-to-jsx\n \n\n \n

\n markdown-to-jsx is an easy-to-use markdown component\n that takes Github-flavored Markdown (GFM) and makes native JSX\n without dangerous hacks. \n

\n

\n It's lightweight, customizable, and happily supports React-like\n libraries.\n

\n \n\n \n See the{' '}\n \n project README\n {' '}\n for detailed installation & usage instructions.\n \n
\n\n \n