TudbuT/netTypst
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add typst.html

Browse source
This commit is contained in:
Tove 2025-11-18 13:13:46 +01:00
parent 82295d69e8
commit 9b2e03920d
1 changed files with 133 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
typst.html Normal file
View file

@ -0,0 +1,133 @@
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
<meta name="og:url" content="https://typst.tudbut.de">
<meta name="og:title" content="netTypst">
<meta name="og:description" content="Bring dynamic typst to your markdown notes by embedding this page!">
<style>
html {
margin: 0;
background-color: #405;
color: #eee;
}
body {
margin: auto;
display: block;
width: min(700px, 90vw);
margin-top: min(10em, 30vh);
margin-bottom: min(10em, 30vh);
padding: 0;
font-family: serif;
}
a {
color: #00ffff;
}
a.btn {
background-color: #603060;
display: inline-block;
width: 10em;
max-width: calc(90vw - 20px);
min-width: fit-content;
padding: 10px;
margin: 0;
margin-bottom: 0.2em;
text-decoration: none;
text-align: center;
transition: 0.2s;
}
a.btn:hover {
background-color: #605070;
}
form {
background-color: #425;
padding: 10px;
margin: 20px auto 20px auto;
width: fit-content;
}
label {
text-align: right;
display: block;
}
input {
height: 2em;
margin-bottom: 0.5em;
border: 0;
background-color: #000;
color: #f0f;
}
button {
background-color: #a0a;
color: #000;
border: 0;
width: 100%;
height: 2em;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background-color: #909;
}
div.error {
background-color: #913;
color: #fff;
display: block;
width: calc(100% - 60px);
padding: 15px;
margin: 15px;
}
img.ss {
display: inline-block;
width: calc(50% - 1em);
margin: 0.5em;
padding: 0;
}
b {
font-weight: 900;
font-variant: small-caps;
text-decoration: underline dotted;
}
pre {
display: block;
padding: 5px;
overflow: scroll;
background-color: #000;
}
</style>
</head>
<body>
<h1>netTypst</h1>
<p>
Markdown notes tend not to support embedded Typst. Even with this,
they still don't, but you can put Typst inside anyway.
</p><p>
<b>You can simply embed an image</b>: <br>
<pre>![netTypst error](https://typst.tudbut.de/{typst code})</pre>
...will become
the rendered Typst that you deserve.
</p>
<h2>Limitations</h2>
<p>
Due to the limitations of URLs, you will have to alter some things:
<ul>
<li>Spaces become '__' in the URL</li>
<li>Newlines become '_,' in the URL</li>
</ul>
The rest should work as intended, but you can use URLEncoding to
avoid any other issues. To avoid deadlocks and other security issues,
all #-expressions of Typst are impossible.
</p>
<h2>Example</h2>
<pre>https://typst.tudbut.de/lim_(a-&gt;0)(f(x_0+a)-f(x_0))/a=f'(x)</pre>
<img src="https://typst.tudbut.de/lim_(a->0)(f(x_0+a)-f(x_0))/a=f'(x)" style="width: 100%">
</body>