Created
June 13, 2024 06:01
-
-
Save morgan9e/ddae38bf66796fc563614656a6cbc800 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto w-9/12"> | |
| <div class="space-y-4"> | |
| <div class="w-full bg-gray-100 p-6 rounded shadow"> | |
| <textarea id="inputText" class="w-full min-h-96 p-3 border border-gray-300 rounded" placeholder="Type your text here..."></textarea> | |
| </div> | |
| <div class="text-center"> | |
| <button id="renderBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">Render</button> | |
| </div> | |
| <div class="w-full bg-gray-100 p-6 rounded shadow"> | |
| <div class="w-full p-5 min-h-96 border bg-white border-gray-300 rounded"> | |
| <div id="content" class="prose-lg prose-code:font-monospace prose-code:px-1"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| function render() { | |
| document.getElementById('content').innerHTML = | |
| marked.parse( | |
| document.getElementById("inputText").value | |
| .replaceAll("\\(", "`\\\(") | |
| .replaceAll("\\)", "\\\)`") | |
| .replaceAll("\\[", "`\\\[") | |
| .replaceAll("\\]", "\\\]`") | |
| ); | |
| renderMathInElement(document.getElementById('content'), { | |
| delimiters: [ | |
| {left: '\\(', right: '\\)', display: false}, | |
| {left: '\\[', right: '\\]', display: true} | |
| ], | |
| throwOnError : false, | |
| }); | |
| } | |
| document.getElementById('renderBtn').onclick = render; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment