Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
markdown experiment
+110
+3
src/routes/experiments/+page.svelte
+3
src/routes/experiments/+page.svelte
+107
src/routes/experiments/markdown/+page.svelte
+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>