Mae's website :3 maemoon.me
personal website svelte sveltekit
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

markdown experiment

+110
+3
src/routes/experiments/+page.svelte
··· 16 16 <li> 17 17 <a href="https://cute-catgirl.github.io/clicker-v2/">click 2</a> 18 18 </li> 19 + <li> 20 + <a href="/experiments/markdown">markdown</a> 21 + </li> 19 22 </ul>
+107
src/routes/experiments/markdown/+page.svelte
··· 1 + <script> 2 + const headingRegex = /^(#{1,6})\s(.*)$/; 3 + const expressionRegex = /^\$(.*)$/; 4 + const italicRegex = /(\*|_)(.*?)\1/g; 5 + const boldRegex = /(\*\*|__)(.*?)\1/g; 6 + let rawContent = $state( 7 + '# Heading\n## Heading 2\n### Heading 3\nSome body text!\n\n**Bold text**\n*Italic text*\n\n$variable=*nyaa~*\nvar: {variable}\n\n$variable2=**:3**\nvar 2: {variable2}\n\n$variable3={variable} {variable2}\nvar 3: {variable3}' 8 + ); 9 + 10 + let content = $derived.by(() => { 11 + let lines = rawContent.split('\n'); 12 + let parsedLines = []; 13 + let documentVariables = {}; 14 + 15 + const applyInlineStyles = (text, visited = new Set()) => { 16 + let textToReturn = text; 17 + 18 + // Apply bold and italic formatting 19 + textToReturn = textToReturn.replace(boldRegex, '<strong>$2</strong>'); 20 + textToReturn = textToReturn.replace(italicRegex, '<em>$2</em>'); 21 + 22 + // Resolve variables 23 + textToReturn = textToReturn.replace(/\{(.+?)\}/g, (match, variable) => { 24 + if (visited.has(variable)) { 25 + console.error(`Circular reference detected for variable: ${variable}`); 26 + return 'nice try'; 27 + } 28 + if (!documentVariables[variable]) { 29 + return match; 30 + } 31 + visited.add(variable); 32 + const resolvedValue = applyInlineStyles(documentVariables[variable], visited); 33 + visited.delete(variable); 34 + return resolvedValue; 35 + }); 36 + 37 + return textToReturn; 38 + }; 39 + 40 + const handleExpression = (expression) => { 41 + const [variable, value] = expression.split('='); 42 + documentVariables[variable] = value; 43 + console.log(documentVariables); 44 + }; 45 + 46 + for (let line of lines) { 47 + const headingMatch = line.match(headingRegex); 48 + const expressionMatch = line.match(expressionRegex); 49 + if (line.trim() === '') { 50 + parsedLines.push('<br>'); 51 + } else if (expressionMatch) { 52 + handleExpression(expressionMatch[1]); 53 + } else if (headingMatch) { 54 + const level = headingMatch[1].length; 55 + const text = applyInlineStyles(headingMatch[2]); 56 + parsedLines.push(`<h${level}>${text}</h${level}>`); 57 + } else { 58 + const paragraph = applyInlineStyles(line); 59 + parsedLines.push(`<p>${paragraph}</p>`); 60 + } 61 + } 62 + return parsedLines.join(''); 63 + }); 64 + </script> 65 + 66 + <h1>Markdown</h1> 67 + <br /> 68 + <div id="container"> 69 + <div> 70 + <textarea bind:value={rawContent}></textarea> 71 + </div> 72 + <div id="document"> 73 + {@html content} 74 + </div> 75 + </div> 76 + 77 + <style> 78 + #container { 79 + width: 100%; 80 + display: flex; 81 + justify-content: center; 82 + gap: 1em; 83 + } 84 + 85 + textarea { 86 + box-sizing: border-box; 87 + width: 100%; 88 + height: auto; 89 + min-height: 300px; 90 + font-family: monospace; 91 + padding: 0.5em; 92 + resize: none; 93 + } 94 + 95 + #container > div { 96 + flex: 1; 97 + } 98 + 99 + #document { 100 + white-space: pre-wrap; 101 + padding: 0.5em; 102 + } 103 + 104 + li { 105 + font-size: 1.2em; 106 + } 107 + </style>