Here is sample code to insert equations into a website. To do this, type an equation in iMathEQ, copy the LaTex code and insert it between the dollar signs $$, ( $$ your-equation $$ ):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
</head>
<body>
<p>$$ A = \int_a^b f(x)\,dx = F(b) - F(a) $$</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
});
});
</script>
</body>
</html>
Here is sample code to insert equations into a website. This code differs from the previous code in the fact that you can embed equations within a string of text by using single dollar signs instead of double ( $ your-equation $ ):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
</head>
<body>
<p>The equation $ n = 1 + 1 = 2 $ is inline!</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
});
});
</script>
</body>
</html>
Here is the sample code for an email template. Feel free to customize this to your liking:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pyska Digital</title>
<!-- Prevent Apple Mail auto-darkening -->
<meta name="color-scheme" content="dark light">
<meta name="supported-color-schemes" content="dark light">
<style>
/* Mobile responsiveness */
@media only screen and (max-width: 620px) {
.container {
width: 100% !important;
}
.mobile-padding {
padding: 20px !important;
}
.hero-title {
font-size: 28px !important;
line-height: 34px !important;
}
.body-text {
font-size: 16px !important;
line-height: 26px !important;
}
.stack {
display: block !important;
width: 100% !important;
}
.logo {
width: 42px !important;
}
.button {
width: 100% !important;
}
}
/* Prevent Gmail blue links */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* Outlook spacing fixes */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#000e30;">
<!-- Full Background -->
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#000e30"
style="background-color:#000e30;"
>
<tr>
<td align="center" style="padding:30px 15px;">
<!-- Main Email Container -->
<table
class="container"
width="600"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#08142f"
style="
width:600px;
max-width:600px;
background-color:#08142f;
border-radius:18px;
overflow:hidden;
"
>
<!-- HEADER -->
<tr>
<td
bgcolor="#3d0066"
style="
background:linear-gradient(135deg,#3d0066,#56008f);
padding:22px 30px;
border-bottom:1px solid #7422b8;
"
>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- LEFT -->
<td align="left" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
<img
class="logo"
src="https://pyska-digital.pages.dev/Screenshot_2026-05-06_at_6.43.21_PM_2-removebg-preview.png"
width="52"
alt="Pyska Digital"
style="
display:block;
border:0;
width:52px;
max-width:52px;
"
>
</td>
<td width="14"></td>
<td valign="middle">
<div
style="
font-family:Arial,sans-serif;
font-size:28px;
line-height:30px;
color:#ffffff;
font-weight:700;
letter-spacing:-0.5px;
"
>
Pyska Digital
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- HERO -->
<tr>
<td
class="mobile-padding"
style="
padding:45px 40px 10px 40px;
background-color:#08142f;
"
>
<div
class="hero-title"
style="
font-family:Arial,sans-serif;
font-size:40px;
line-height:46px;
color:#ffffff;
font-weight:800;
letter-spacing:-1px;
margin-bottom:18px;
"
>
Modern Websites For Local Businesses
</div>
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:18px;
line-height:30px;
color:#d5dcff;
"
>
I came across your business on Google Maps and noticed you don’t currently have a website. I design fast, modern, mobile-friendly websites that help local businesses attract more customers online.
</div>
</td>
</tr>
<!-- CARD -->
<tr>
<td class="mobile-padding" style="padding:30px 40px;">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#0f1e49"
style="
background-color:#0f1e49;
border:2px solid #d900ff;
border-radius:16px;
"
>
<tr>
<td style="padding:32px;">
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:17px;
line-height:30px;
color:#ffffff;
"
>
I created a mockup showing what your business website could look like. A strong online presence can help build trust, improve visibility on Google, and make it easier for customers to contact you.
</div>
<!-- BUTTON -->
<table
border="0"
cellspacing="0"
cellpadding="0"
style="margin-top:30px;"
>
<tr>
<td
class="button"
align="center"
bgcolor="#d900ff"
style="
border-radius:10px;
background:linear-gradient(135deg,#ff00d9,#a000ff);
"
>
<a
href="https://yourwebsite.com"
target="_blank"
style="
display:inline-block;
padding:16px 28px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:700;
color:#ffffff;
text-decoration:none;
"
>
View Website Mockup
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TESTIMONIAL / TRUST -->
<tr>
<td class="mobile-padding" style="padding:0 40px 30px 40px;">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#091633"
style="
background-color:#091633;
border:1px solid #1d2f63;
border-radius:14px;
"
>
<tr>
<td style="padding:24px;">
<div
style="
font-family:Arial,sans-serif;
font-size:15px;
line-height:26px;
color:#b8c4f7;
"
>
✓ Mobile-friendly design<br>
✓ Fast loading speeds<br>
✓ Google-ready SEO setup<br>
✓ Professional branding
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER -->
<tr>
<td
align="center"
style="
padding:28px 30px 40px 30px;
border-top:1px solid #18274f;
background-color:#08142f;
"
>
<div
style="
font-family:Arial,sans-serif;
font-size:18px;
line-height:28px;
color:#ffffff;
font-weight:700;
margin-bottom:8px;
"
>
Ryan M. Pyska
</div>
<div
style="
font-family:Arial,sans-serif;
font-size:14px;
line-height:24px;
color:#8ea1d8;
"
>
Pyska Digital<br>
Modern websites for small businesses
</div>
<!-- SOCIALS -->
<table
border="0"
cellspacing="0"
cellpadding="0"
style="margin-top:18px;"
>
<tr>
<td style="padding:0 8px;">
<a
href="https://yourwebsite.com"
target="_blank"
style="
font-family:Arial,sans-serif;
font-size:14px;
color:#d900ff;
text-decoration:none;
"
>
Website
</a>
</td>
<td style="padding:0 8px;">
<a
href="mailto:you@example.com"
style="
font-family:Arial,sans-serif;
font-size:14px;
color:#d900ff;
text-decoration:none;
"
>
Email
</a>
</td>
</tr>
</table>
<!-- UNSUBSCRIBE -->
<div
style="
margin-top:22px;
font-family:Arial,sans-serif;
font-size:12px;
line-height:20px;
color:#5f74ad;
"
>
If you'd rather not receive emails like this, you can safely ignore this message.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>