Tips and Tricks
Please add any tips and tricks that you come up with. For now it'll be a flat list and we'll add structure as needed.
Pasting from Clipboard (without tears) Using an email signature Footnotes Using other TeX math formulae renderers Changing the Main Font (and other overall styles) Getting fancy with inline HTML Cool CSS stuff Creating more complex tables Getting original Markdown from sent email Using Header Anchor Links
If text is pasted from the clipboard with formatting intact, it can negatively impact the rendering of Markdown (i.e., it can make it super messed up). When pasting into an email that you plan on rendering with Markdown Here, you should try to paste as plain text.
-
Chrome: Context menu: "Paste as plain text". Hotkey:
Ctrl+Shift+V. -
Firefox: There doesn't seem to be a menu item. Hotkey:
Ctrl+Shift+V. -
Thunderbird, Postbox: Edit menu and context menu: "Paste Without Formatting". Hotkey:
Ctrl+Shift+V.
(Linux: Tested on Xubuntu.)
-
Chrome: Edit menu and context menu: "Paste and Match Style". Hotkey: ⇧⌘V (
Shift+Command+V). -
Firefox: There doesn't seem to be a menu item. Hotkey: ⇧⌘V (
Shift+Command+V). -
Thunderbird, Postbox: Edit menu and context menu: "Paste Without Formatting". Hotkey: ⇧⌘V (
Shift+Command+V).
Email signatures are automatically excluded from conversion. Specifically, anything after the semi-standard '-- ' (note the trailing space) is left alone.
Note that Hotmail and Yahoo do not automatically add the '-- ' to signatures, so you have to add it yourself.
Below is a copy-paste of a workaround described in the feature request/issue for adding footnotes:
I thought of a bit of a hack you can use to emulate your footnotes: put inline HTML <sup> tags1. What I just did there looks like this: <sup>1</sup>. Then you can put a numbered list2 at the bottom with the actual footnotes.
The numbered list in your original email had a larger left-side margin than mine will, but you could modify your "Primary Styling CSS" in the MDH options to and add something like margin-left: 10em; to the ol rule. But then it'd be like that for all your numbered lists.
You also have the carriage-return-ish icon in your footnotes at the bottom, but they're not links that lead back to the anchor, so... maybe you don't need them? If you want to add them by hand you can use the HTML entity3 ↵. Like so: ↵
I haven't been using the square brackets around the footnote super numbers because there's a danger of them ending up being reference-style MD links4. Like this11 but not like this[12].
Anyway, maybe this will help you and maybe it won't. It's probably more hassle than you're happy with. I'll include the raw version of this email below so that you can see it.
- Gratuitous link to info about the
<sup>tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup - MD cheatsheet entry for lists
- List of HTML entities
- https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
I thought of a bit of a hack you can use to emulate your footnotes: put inline HTML `<sup>` tags<sup>1</sup>. What I just did there looks like this: `<sup>1</sup>`. Then you can put a numbered list<sup>2</sup> at the bottom with the actual footnotes.
The numbered list in your original email had a larger left-side margin than mine will, but you could modify your "Primary Styling CSS" in the MDH options to and add something like `margin-left: 10em;` to the `ol` rule. But then it'd be like that for all your numbered lists.
You also have the carriage-return-ish icon in your footnotes at the bottom, but they're not links that lead back to the anchor, so... maybe you don't need them? If you want to add them by hand you can use the HTML entity<sup>3</sup> `↵`. Like so: ↵
I haven't been using the square brackets around the footnote super numbers because there's a danger of them ending up being reference-style MD links<sup>4</sup>. Like this<sup>[11]</sup> but not like this<sup>[12]</sup>.
[11]: http://markdown-here.com
Anyway, maybe this will help you and maybe it won't. It's probably more hassle than you're happy with. I'll include the raw version of this email below so that you can see it.
1. Gratuitous link to info about the `<sup>` tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
2. [MD cheatsheet entry for lists](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-lists)
3. [List of HTML entities](http://www.w3schools.com/tags/ref_symbols.asp)
4. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
After Google shut down the Charts API that we were using, we switched the default renderer to CodeCogs; it has been around a long time and does a reasonably good job. However, there are other possibilities, if you're willing to accept the privacy and availabilty implications.
@uetchy has a math API with TeX URL support. The output looks really nice and crisp. (But they're hosting on "pay-as-you-go", so we're not going to make it the default.)
<img src="https://math.vercel.app/?bgcolor=auto&from={urlmathcode}.png" alt="{mathcode}">
WordPress has a LaTeX renderer that can be accessed via URL. The output doesn't look any nicer than CodeCogs (to my eye) and it might be a violation of their usage policy (e.g., maybe it's only for paying customers).
<img src="https://s0.wp.com/latex.php?zoom=3&bg=ffffff&fg=000000&s=0&latex={urlmathcode}" alt="{mathcode}">
You can use CodeCode to produce SVG output, which looks nicer. They will get stripped out of email, but you might be using MDH somewhere that they'll work:
<img src="https://latex.codecogs.com/svg.latex?{urlmathcode}" alt="{mathcode}">
But please note a few important things:
-
Whichever service you use, you're in charge of making sure you're not violating their Terms of Use. You should also check out their privacy policy.
-
Understand that the service provider will be able to see all of your formulae. They can also do things map your IP address to your formulae. And then they can record the IP addresses of the people that read your email and view the formulae. And so they can draw some conclusions that someone at your IP address working with people at your friends' IP addresses.
In the "Primary Styling CSS" section of the Markdown Here options page, there is a rule for .markdown-here-wrapper (that's empty by default). This rule should be used for styles that you want applied to your entire email (overridden by other styles, of course).
So, if you wanted Verdana as your default font, you could set this:
.markdown-here-wrapper {
font-family: Verdana, sans;
}
and this (if you want to apply the new font not only to the first row of your tables):
table tr th, table tr td {
font-family: Verdana, sans;
...
}
Markdown (and Markdown Here) allows for inline HTML tags to be used when writing the Markdown, and having them preserved when rendering. This provides you with the ability to add more powerful styling than is possible with Markdown or email alone.
You probably don't want to use these tricks too often, since they involve a lot more (and less natural) typing than normal Markdown, but they can let you do very powerful things that you can't otherwise.
PLEASE NOTE: Always test to your fancy styles and HTML tags by sending an email that uses them to yourself and then viewing the email. Some email clients strip out some styles, so it might look good when you send it, but not when you receive it.
Some HTML tags that aren't available in a normal email client can be used if typed directly. For example, you can get superscripts and subscripts like this:
hi<sup>1</sup> low<sub>2</sub>
The result will look like this: hi1 low2
TODO: More examples?
In Markdown Here's "Primary Styling CSS" you can create custom CSS classes that apply to <span> elements that you use inline.
Let's say you want to the background color of some text in your email to be a nice gradient from light blue to light pink and have a big horrible border. You could create a CSS rule like this:
.hi {
background: linear-gradient(225deg, lightpink, lightblue);
border: thick dotted purple;
}
And then use it in your email something like this:
Happy <span class="hi">Birthday</span> my friend!
(The preview of it won't show properly here, but try it out yourself in your email.)
TODO: More compelling, less ridiculous examples.
By defaults, ordered (aka numbered) lists use ordinary Arabic numbers (1, 2, 3, ...). But with a single CSS rule you can use Roman numerals, or Greek letters, or Thai numbers, and lots of others:
ol {
list-style-type: lower-greek;
}If you want to style the salutation of your email differently from the rest of the email, you can add a CSS rule that applies to the very first paragraph like so:
.markdown-here-wrapper > p:first-of-type {
color: red;
}(Note that this will apply to the first paragraph of all MDH-rendered chunks in an email. So if you're rendering multiple selections you'll get multiple red paragraphs. For my complex CSS to fix this, check out this SO post.)
There is a feature request for adding the ability to span cells across rows and columns, but it hasn't yet been implemented.
Probably the best way to do rowspan and colspan right now is to use this online HTML table generator to create your table, and then paste it into your email (or whatever) and use MDH to render it. Make sure to check the boxes for "Do not generate CSS" (because MDH provides the CSS) and "Compact mode" (to avoid MDH's multi-line HTML problem).
See this issue comment for help on approximately creating a table without a header row (without using HTML).
There is an outstanding feature request to be able to get the original Markdown from a sent email, but for now there's an easy trick to get it:
- Open the message.
- Start a forward of it.
- Markdown Toggle.
- The forward content will be replaced with the original Markdown.
This has been tested in Gmail and Thunderbird. If the mail client quotes the forwarded content, then it won't work.
[Stub. Someone (like me or Casey) should fill this in. Also, this section should probably not be at the bottom of the page -- it should probably be second or third.]