The code will run in a velocity engine and you'll have to make sure your code is well formatted.
Make sure to write your code (HTML) so that most of the common used email clients can render the HTML. The most erroneous client is Microsoft Outlook (according to our findings), so make sure to test before you publish any custom theme.
Below you will find an example (the default details view theme):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Message Title</title>
</head>
<body class="jira" style="color: #333; font-family: Arial, sans-serif; font-size: 12px;">
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<!-- header here -->
<tr>
<td style="vertical-align: top; font-size: 12px; padding: 10px 25px 0px 25px;">
#if($emailmessage)
${emailmessage}
#end
</td>
</tr>
#foreach ($issue in $issues)
<tr>
<td style="padding: 0px; border-collapse: collapse; padding: 0px 20px">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="vertical-align: top; padding: 0px 0px 5px 0px;">
<div style="padding-top: 5px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px">
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: separate">
<tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<td class="email-content-rounded-top mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 15px; background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 10px; line-height: 10px; padding: 0 15px 0 16px; mso-line-height-rule: exactly">
</td>
</tr>
<tr>
<td class="email-content-main mobile-expand wrapper-special-margin" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #fff; padding-top: 10px; padding-bottom: 5px">
<table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
#set ($i = 0)
#foreach ($element in $issue.elements)
<tr>
<th style="color: #707070; font: normal 14px/20px Arial, sans-serif; text-align: left; vertical-align: top; padding: 2px 15px 2px 0px">
<div style="white-space: nowrap;">
#set ($j = 0)
#foreach($header in $issueheaders)
#if($j == $i) $header #end
#set ($j = $j + 1)
#end
</div>
</th>
<td style="border-collapse: collapse; font: normal 14px/20px Arial, sans-serif; padding: 2px 0 2px 5px; vertical-align: top">
#if ($element.isEm())<em>#end
#if($element.iconurl)
<div style="white-space: nowrap;">
<img
src="${baseurl}${element.iconurl}"
height="16" width="16" border="0"
alt="${element.description}"
title="${element.description}">
#end
#if($issue.parentKey && $element.getFieldKey().equals("summary"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.parentKey}" >${issue.parentKey}</a>
#else
${issue.parentKey}
#end
#end
#if($element.getFieldKey().equals("issuekey"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
<span style="white-space: nowrap;">${element.name}</span>
#end
#elseif($element.getFieldKey().equals("summary"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
${element.name}
#end
#elseif($element.getFieldKey().equals("status"))
<div style="text-align: center; background-color: #FFF; white-space: nowrap; margin: 0; padding: 1px; border-radius: 3px; display: inline-block; line-height: 99%; #if($element.getType().equals("New")) border: 1px solid #E4E8ED; #elseif($element.getType().equals("In Progress")) border: 1px solid #FFE28C; #elseif($element.getType().equals("Complete")) border: 1px solid #B2D8B9; #else border: 1px solid #ccc; #end">
<span style="background-color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; border-radius: 3px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; text-decoration: none; text-transform: uppercase; #if($element.getType().equals("New")) color: #4c74c3; #elseif($element.getType().equals("In Progress")) color: #594300; #elseif($element.getType().equals("Complete")) color: #14892C; #else color: #333; #end">
${element.name}
</span>
</div>
#else
#if ($element.getInnerElements() && $element.getInnerElements().size() > 0)
#set($count=1)
#set($total=$element.getInnerElements().size())
#foreach($innerelement in $element.innerElements)
#if($innerelement.iconurl)
<div style="white-space: nowrap; padding-right: 3px;">
<img src="${baseurl}${innerelement.iconurl}"
height="16" width="16" border="0"
alt="${innerelement.name}"
title="${innerelement.name}">
#end
<span>
#if($includeLinks && $innerelement.href)
<a href="${baseurl}${innerelement.href}">${innerelement.name}</a>
#else
<span>${innerelement.name}#if($count<$total && !$innerelement.iconurl), #end</span>
#end
</span>
#if($innerelement.iconurl)
</div>
#end
#set($count=$count+1)
#end
#else
<span>${element.name}</span>
#end
#end
#if($element.iconurl)
</div>
#end
#if ($element.isEm())</em>#end
</td>
</tr>
#set ($i = $i + 1)
#end
</table>
</td>
</tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<tr>
<td class="email-content-rounded-bottom mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 5px; line-height: 5px; background-color: #fff; border-top: 0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; mso-line-height-rule: exactly">
</td>
</tr>
</table>
</td>
</tr>
#end
<tr>
<td style="vertical-align: top; padding: 10px 0px 5px 0px;">
${emailfooter}
</td>
</tr>
</table>
</body>
</html>