Depending on the kind of content that you include in your emails, there may be times when you want to send an email that displays example code within the email’s body. While this sounds easy enough, it can be a little tricky due to how different mail clients will render code that is included within an email’s body. Thus, you will often find that simply pasting code into your email’s body will result in inconsistent rendering across clients – the code will not be displayed, some characters will be missing, extra characters will be added, etc.
In this post, I outline each step of a technique you can use to consistently display code within the body of an email across Outlook, Gmail, and Yahoo Mail. As a test case, I will show how you can display the basic structure of a website or HTML email within an email:
First, as an Illustration, if you simply copy and paste this code into the body of an email this is how the email will display in Outlook:
You can see that all of the tags have been removed and only the line of text is visible in the email.
There are three steps that you can follow to make the code display in your email:
1. Wrap the code in <pre> tags.
2. Enclose each angle bracket, forward slash, tag name and phrase within its own set of <span> tags.
3. Encode the brackets of the tags that you want to display.
Here is what each step looks like:
Note: you will need to use the ClickDimensions free style, block or custom HTML editor to access your email’s source code. This cannot be done with the drag and drop editor.
Wrap the code in <pre> tags.
This will ensure that you don’t have to add any extra code to force the template editor to keep your lines separated. It also gives you an easy way to apply styles to the whole code block, if that is something you would like to do:
Enclose each angle bracket, forward slash, tag name and phrase within its own set of <span> tags.
This, combined with the following step, ensures that Outlook, Gmail and Yahoo interpret the tags as text to be displayed, rather than as tags that contribute to the structure of the email:
Encode the brackets of the tags that you want to display.
This, combined with the previous step, ensures that Outlook, Gmail and Yahoo interpret the brackets as characters to be displayed, rather as parts of tags that contribute to the structure of the email:
Note: The encoded forms of < and > are < and > respectively.
And that’s it! When I send an email where I have added the above code to the <body> in my email’s source code, here is how it looks when opened by the recipient:
If you’d like to add styling to your code snippet, you can do so by adding styles to the <pre> and/or <span> tags as needed.