Skip to content

Instantly share code, notes, and snippets.

@jsravn

jsravn/mu4e-write-body-to-html

Created May 13, 2020 09:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsravn/b4c07878de8cc85a1172bbae052e1121 to your computer and use it in GitHub Desktop.
Save jsravn/b4c07878de8cc85a1172bbae052e1121 to your computer and use it in GitHub Desktop.
Download ZIP
example problematic mu4e html with org-msg
Raw
mu4e-write-body-to-html
<head><meta charset="UTF-8"></head>
<p><strong>From</strong>: GitHub &lt;noreply@github.com&gt;</br><strong>To</strong>: jsravn-test &lt;james+test@r-vn.org&gt;</br><strong>Date</strong>: Thu 07 May 2020 11:54:22 BST</br><strong>Subject</strong>: [GitHub] Welcome to GitHub, @jsravn-test!</p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Welcome to GitHub!</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
min-width:100%;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
background:#fafafa;
}
.resources-container{
padding: 40px 40px 0px;
}
.link-heading{
font-weight: 600;
font-size: 18px;
color: #444d56;
align-self: flex-start;
text-align: left;
}
.resource-container{
margin-bottom: 40px;
width: 100%;
}
.link-text-container{
margin-left: 30px;
width: 80%;
}
.links-container{
margin-top: 16px;
border-bottom: #e1e4e8 solid 1px;
border-top: #e1e4e8 solid 1px;
}
.resource-img{
padding-right: 20px;
}
.resource-image-container {
float: right;
}
.link{
padding: 8px 16px;
text-align: left;
}
.links-container > .link ~ .link{
border-top: #e1e4e8 solid 1px;
}
.link-chevron{
float: right;
}
.welcome-message{
margin:0;
font-size:14px;
font-weight:300;
color:#444d56;
line-height:20px;
padding:0 30px;
text-align:center;
margin-bottom:15px;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
#backgroundTable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
img{
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
width:auto;
max-width:100%;
}
center{
width:100%;
min-width:580px;
}
.center-text{
text-align:center;
}
a img{
border:none;
}
p{
margin:0;
word-wrap:normal;
hyphens:none;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:14px;
font-weight:normal;
color:#333;
line-height:20px;
}
p a{
color:#4183C4;
text-decoration:none;
}
table{
border-spacing:0;
border-collapse:collapse;
}
td{
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
border-collapse:collapse !important;
}
table,tr,td{
padding:0;
vertical-align:top;
text-align:center;
}
hr.rule{
margin:15px 0;
color:#d9d9d9;
background-color:#d9d9d9;
height:1px;
border:none;
}
table.body{
height:100%;
width:100%;
background:#fafafa;
}
table.container{
width:580px;
margin:0 auto;
text-align:inherit;
}
table.row{
padding:0;
width:100%;
position:relative;
}
table.container table.row{
display:block;
}
td.wrapper{
padding:10px 20px 0 0;
position:relative;
}
table.columns,table.column{
margin:0 auto;
}
table.columns td,table.column td{
padding:0 0 10px;
}
table.row td.last,table.container td.last{
padding-right:0;
}
table.twelve{
width:540px;
}
table.twelve center{
min-width:540px;
}
table.twelve .panel center{
min-width:540px;
}
.body .columns td.twelve,.body .column td.twelve{
width:100%;
}
td.expander{
visibility:hidden;
width:0;
padding:0 !important;
}
table.center,td.center{
text-align:center;
}
img.center{
margin:0 auto;
float:none;
}
body,table.body,h1,h2,h3,h4,h5,h6,p,td{
color:#333333;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-weight:normal;
padding:0;
margin:0;
text-align:center;
line-height:1.3;
}
h1,h2,h3,h4,h5,h6{
word-break:normal;
font-weight:300;
}
body,table.body,p,td{
font-size:14px;
line-height:20px;
}
a{
color:#4183C4;
text-decoration:none;
}
a:hover{
color:#4183C4;
}
a:active{
color:#4183C4;
}
a:visited{
color:#4183C4;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:active,h2 a:active,h3 a:active,h4 a:active,h5 a:active,h6 a:active,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{
color:#4183C4;
}
.panel{
background:#ffffff;
background-color:#ffffff;
border:1px solid #dddddd;
padding:20px;
border-radius:3px;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
div.cta-button-wrap{
padding:20px 0 25px;
text-align:center;
color:#ffffff;
}
div.cta-button-wrap a{
display:inline-block;
width:auto !important;
text-align:center;
background:#4183C4;
background-color:#4183C4;
border-radius:5px;
-webkit-border-radius:5px;
padding:12px 44px;
box-shadow:0 3px 0 #25588c;
font-weight:bold;
text-decoration:none;
color:#ffffff;
letter-spacing:normal;
font-size:17px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
margin:0 auto;
-webkit-text-size-adjust:none;
}
body.outlook p{
display:inline !important;
}
h1.primary-heading{
text-align:center;
margin:10px 0 25px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size:38px;
letter-spacing:-1px;
color:#333;
font-weight:300;
line-height:1;
}
.panel p{
font-weight:300;
margin-bottom:15px;
}
h2{
font-size:28px;
margin:20px 0 15px;
}
img.logo-wordmark{
padding:25px 0 17px;
text-align:center;
}
table.columns td.branding{
text-align:center;
padding:10px 0;
}
img.hero-img,img.content-image{
margin:15px 0;
width:100%;
}
img.welcometocat{
width:352px;
}
table.layout-content div.content p{
margin:15px 0 5px;
font-size:14px;
font-weight:normal;
color:#333;
line-height:20px;
}
table.layout-content div.content p:first-child{
margin-top:5px;
}
p.footer-text{
margin:0;
font-size:12px;
color:#999;
text-align:center;
}
p.subtext{
margin-top:0;
margin-bottom:10px;
font-size:17px;
font-weight:300;
line-height:18px;
color:#555;
}
div.content-footer p{
margin-bottom:20px;
}
td.wrapper.last{
padding:0;
}
table.layout-footer div.unsubscribe{
padding:20px 0 0;
color:#888;
text-align:center;
}
table.layout-footer div.footer-links{
padding:20px 0;
text-align:center;
}
table.layout-footer div.content{
margin:0 0 15px;
}
@media only screen and (max-width: 600px){
table[class=body] h1.primary-heading{
font-size:28px !important;
}
} @media only screen and (max-width: 600px){
table[class=body] h2.content-heading{
font-size:22px !important;
}
} @media only screen and (max-width: 600px){
table[class=body] div.panel p{
line-height:17px !important;
}
} @media only screen and (max-width: 600px){
.resource-container{
flex-direction: column;
}
} @media only screen and (max-width: 600px){
.link-text-container{
margin-left: 0px !important;
width: 100% !important;
}
} @media only screen and (max-width: 600px){
.resources-container{
padding: 40px 30px !important;
}
} @media only screen and (max-width: 600px){
.welcome-message{
padding: 0 20px !important;
line-height:40px !important;
}
} @media only screen and (max-width: 600px){
table[class=body] img{
width:auto !important;
height:auto !important;
}
} @media only screen and (max-width: 600px){
table[class=body] center{
min-width:0 !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .container{
width:95% !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .row{
width:100% !important;
display:table !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .wrapper{
display:block !important;
padding-right:0 !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .columns,table[class=body] .column{
table-layout:fixed !important;
float:none !important;
width:100% !important;
padding-right:0 !important;
padding-left:0 !important;
display:block !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .wrapper.first .columns,table[class=body] .wrapper.first .column{
display:table !important;
}
} @media only screen and (max-width: 600px){
table[class=body] table.columns td,table[class=body] table.column td{
width:100% !important;
}
} @media only screen and (max-width: 600px){
table[class=body] .columns td.twelve,table[class=body] .column td.twelve{
width:100% !important;
}
} @media only screen and (max-width: 600px){
table[class=body] table.columns td.expander{
width:1px !important;
}
} @media only screen and (max-width: 600px){
div[class=panel],td[class=panel],table[class=panel]{
padding:12px !important;
}
} @media only screen and (max-width: 600px){
table[class=body] img.logo-wordmark{
width:102px !important;
}
}</style></head>
<body bgcolor="#fafafa" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="min-width: 100%;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;background: #fafafa;color: #333333;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: normal;text-align: center;line-height: 20px;font-size: 14px;width: 100% !important;">
<table class="body" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:center;height:100%;width:100%;background:#fafafa;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="center" align="center" valign="top" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<center style="width:100%;min-width:580px;">
<!--email content-->
<table class="row header" style="border-spacing:0;border-collapse:collapse;padding:0px;vertical-align:top;text-align:center;width:100%;position:relative;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="center" align="center" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<center style="width:100%;min-width:580px;">
<table class="container" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:inherit;width:580px;margin:0 auto;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="wrapper last" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;position:relative;padding-right:0px;border-collapse:collapse !important;">
<table class="twelve columns" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:center;margin:0 auto;width:540px;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td style="padding:0px 0px 10px;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<div class="mark" style="text-align:center;">
<a href="https://github.com" style="text-align:center;color:#4183C4;text-decoration:none;">
<img alt="GitHub, Inc." src="https://github.githubassets.com/images/email/global/wordmark.png" width="102" height="28" class="center logo-wordmark" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;width: auto;max-width: 100%;border: none;margin: 0 auto;float: none;padding: 25px 0 17px;text-align: center;">
</a>
</div>
</td>
<td class="expander" style="padding:0 !important;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;visibility:hidden;width:0px;border-collapse:collapse !important;">
</td>
</tr>
</table>
<!--/.twelve.columns-->
</td>
</tr>
</table>
<!--/.container-->
</center>
</td>
</tr>
</table>
<!--/.row.header-->
<table class="container" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:inherit;width:580px;margin:0 auto;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<table class="row" style="border-spacing:0;border-collapse:collapse;padding:0px;vertical-align:top;text-align:center;width:100%;position:relative;display:block;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="wrapper last" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;position:relative;padding-right:0px;border-collapse:collapse !important;">
<div class="panel" style="background:#ffffff;background-color:#ffffff;border:1px solid #dddddd;padding:20px;border-radius:3px;">
<table class="twelve columns" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:center;margin:0 auto;width:540px;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td style="padding:0px 0px 10px;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<div class="content">
<svg height="44" width="44" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
<h1 class="primary-heading" mc:edit="primaryheading" style="color:#333;font-weight:300;padding:0;margin:25px;text-align:center;line-height:1;font-size:30px;letter-spacing:-1px;">Welcome to GitHub, <strong>@jsravn-test</strong>!</h1>
<p mc:edit="introparagraph" class="welcome-message">You’re the newest member in this community of over 36 million people who use GitHub to host and review code, manage projects, and build software.</p>
<img mc:edit="welcomeimage" class="welcometocat" src="https://github.githubassets.com/images/email/welcome-email/welcometocat.png" width="350" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;width: 352px;max-width: 100%;" alt="welcometocat">
<div width="350" class="resources-container">
<table class="resource-container">
<tr>
<td class="resource-image-container">
<img src="https://github.githubassets.com/images/icons/onboarding-marketing-icon-profile.png" class="resource-img" height="44" alt="onboarding-icon">
</td>
<td class="link-text-container">
<h3 class="link-heading">A few links to help you get started</h3>
<div class="links-container">
<div class="link">
<a href="https://github.com/jsravn-test?email_source=welcome">
Complete your GitHub profile
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
<div class="link">
<a href="https://help.github.com/articles/set-up-git?email_source=welcome">
Set up your computer for GitHub
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
<div class="link">
<a href="https://guides.github.com?email_source=welcome">
Learn more about using GitHub
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
</div>
</td>
</tr>
</table>
<table class="resource-container">
<tr>
<td class="resource-image-container">
<img src="https://github.githubassets.com/images/icons/code-hosting-marketing-icon.png" class="resource-img" height="44" alt="code-hosting-icon">
</td>
<td class="link-text-container">
<h3 class="link-heading">Ready to work on projects?</h3>
<div class="links-container">
<div class="link">
<a href="https://github.com/new?email_source=welcome">
Create a new repository
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
<div class="link">
<a href="https://github.com/new/import?email_source=welcome">
Import an existing repository
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
<div class="link">
<a href="https://github.com/explore?email_source=welcome">
Explore open source projects
</a>
<img src="https://github.githubassets.com/images/icons/chevron-right-octicon.png" height="16" alt="chevron-right" class="link-chevron">
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<!--/.content-->
</td>
<td class="expander" style="padding:0 !important;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;visibility:hidden;width:0px;border-collapse:collapse !important;">
</td>
</tr>
</table>
<!--/.twelve-columns-->
</div>
<!--/.panel-->
</td>
</tr>
</table>
<!--/.row-->
</td>
</tr>
</table>
<!--/.container-->
<table class="row layout-footer" style="border-spacing:0;border-collapse:collapse;padding:0px;vertical-align:top;text-align:center;width:100%;position:relative;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="center" align="center" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<center style="width:100%;min-width:580px;">
<table class="container" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:inherit;width:580px;margin:0 auto;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td class="wrapper last" style="padding:0;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;position:relative;padding-right:0px;border-collapse:collapse !important;">
<table class="twelve columns" style="border-spacing:0;border-collapse:collapse;padding:0;vertical-align:top;text-align:center;margin:0 auto;width:540px;">
<tr style="padding:0;vertical-align:top;text-align:center;">
<td style="padding:0px 0px 10px;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;border-collapse:collapse !important;">
<div class="footer-links" style="padding:20px 0;text-align:center;">
<p class="footer-text" style="margin:0;font-size:12px;font-weight:normal;color:#999;line-height:20px;padding:0;text-align:center;">
<a href="https://github.com/settings/emails" style="color:#4183C4;text-decoration:none;">Email preferences</a>
</p>
<p class="footer-text" style="margin:0;font-size:12px;font-weight:normal;color:#999;line-height:20px;padding:0;text-align:center;"><a href="https://help.github.com/articles/github-terms-of-service/" style="color:#4183C4;text-decoration:none;">Terms</a> • <a href="https://help.github.com/articles/github-privacy-policy/" style="color:#4183C4;text-decoration:none;">Privacy</a> • <a href="https://github.com/login" style="color:#4183C4;text-decoration:none;">Log in to GitHub</a>
</p>
</div>
<div class="content" style="margin:0 0 15px 0;">
<p class="footer-text" style="margin:0;font-size:12px;font-weight:normal;color:#999;line-height:20px;padding:0;text-align:center;">
GitHub, Inc., 88 Colin P. Kelly Street, San Francisco, CA 94107
</p>
</div>
</td>
<td class="expander" style="padding:0 !important;vertical-align:top;text-align:center;color:#333333;font-weight:normal;margin:0;line-height:20px;font-size:14px;visibility:hidden;width:0px;border-collapse:collapse !important;">
</td>
</tr>
</table>
<!--/.twelve.columns-->
</td>
</tr>
</table>
<!--/.container-->
</center>
</td>
</tr>
</table>
<!--/.row.footer-->
<!--/email content-->
</center>
</td>
</tr>
</table>
<!--/.body-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment