MultiMarkdown provides for auto-insertion of a table of contents based on the document’s # headings and ## subheadings, at least, that has been my experience.
So inserting…
{{TOC}}
…at the top of the document (or anywhere) should produce a synopsis as a set of links in any html preview.
I am using MultiMarkdown, compatibility mode unchecked (off!) but {{TOC}} doesn’t render in any of the previews I have as actions.
Is there a preference I have overlooked?
You need a backslash before the placeholder because of the Drafts templating system. It was covered previously here:
Yes, I remember about the escape character now, thank you for the reminder.
Autogenerated TOC headings do not navigate, though. Not even in the excellent Preview Anchored Headings action.
The MMD to HTML conversion isn’t adding in the anchor tags which is why the normal preview doesn’t work.
The MMD to HTML conversion isn’t converting heading spaces to hyphens for the name (which I believe is the Github standard, not the MMD standard), but instead strips out the spaces, which is why the anchor preview action I created wouldn’t work.
You can copy the HTML from the preview to see these things.
It is a simple tweak of the anchor preview action to change the hyphens to nothing for MMD.
Try this - https://actions.getdrafts.com/a/12u
{{TOC}}
# Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus. Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin. Integer imperdiet accumsan iaculis. Quisque fermentum, lorem condimentum convallis auctor, erat sapien egestas sem, et rutrum diam nunc eu mauris. Etiam quis urna et velit euismod mollis. Morbi congue orci eu purus facilisis id hendrerit dui malesuada. Nulla nisi nisl, scelerisque eu euismod faucibus, scelerisque et lectus. Maecenas consectetur tristique justo ut venenatis. Nulla facilisi.
Nullam ac magna lectus. Phasellus rhoncus tempus orci at fringilla. Nullam at pulvinar orci. Phasellus tempor, turpis ac iaculis sagittis, sem nunc elementum nunc, placerat pulvinar urna dui quis enim. Etiam sollicitudin pretium tempor. Ut cursus rhoncus odio, sed eleifend risus pretium eu. Fusce eu enim quis nisi pellentesque lacinia. Nulla faucibus blandit orci eu viverra. Donec vestibulum tempus facilisis. Ut et justo quis massa suscipit feugiat. Phasellus sagittis scelerisque tincidunt. Donec diam quam, semper eget aliquam vel, vehicula vitae erat. Morbi tortor mauris, sodales id tristique vel, feugiat vitae tortor. Etiam a elit nunc, id malesuada diam. Nam nisi mauris, luctus nec sodales vitae, mollis eu risus.
Sed in nunc nulla, at convallis nisi. Suspendisse consequat euismod vestibulum. Donec dictum, est et feugiat faucibus, metus nisl pellentesque enim, a posuere orci lectus volutpat mi. Praesent lectus lorem, sodales sit amet accumsan a, placerat quis est. Maecenas non arcu sit amet magna aliquet sagittis sit amet quis orci. Nam eget ante tortor. Suspendisse lorem leo, imperdiet nec ultrices vel, bibendum ac urna. Aliquam erat volutpat. In at nisi neque, eu pharetra sem. Sed nunc tellus, laoreet fringilla tempor vitae, varius dapibus sem. Vestibulum id tortor sit amet enim varius vehicula quis non justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi tempus metus vel leo viverra non dictum dolor pharetra. Etiam auctor pretium mauris at mollis. Suspendisse enim diam, dapibus et pulvinar vitae, commodo et leo. Aenean risus dui, porttitor at gravida vitae, viverra in libero. Mauris ultrices arcu eu nulla consequat dapibus. Aenean ac nunc at ipsum tempor aliquam. Nunc purus metus, mattis eu venenatis non, egestas in mauris. In sed nulla a diam sodales auctor. Praesent at nulla aliquam felis fringilla ullamcorper. Suspendisse at ante nibh, a imperdiet metus. Nulla facilisi. Donec urna ipsum, feugiat in sagittis et, laoreet ac nunc. Etiam ut diam massa. Cras sed dui ut metus rhoncus rhoncus.
Vivamus mollis convallis laoreet. Ut gravida massa quis libero pretium ut convallis velit pellentesque. Aenean bibendum venenatis pharetra. Cras ligula massa, fermentum nec imperdiet at, ultrices non urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, ligula at faucibus lacinia, nisl massa fermentum tortor, ut pharetra eros eros nec neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pretium libero ac aliquam. Quisque interdum augue at nibh porta vel rutrum quam lacinia. Aenean neque ligula, tempus a vestibulum sit amet, sollicitudin nec nisl. Duis facilisis libero mauris, blandit fringilla mi.
# Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus. Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin. Integer imperdiet accumsan iaculis. Quisque fermentum, lorem condimentum convallis auctor, erat sapien egestas sem, et rutrum diam nunc eu mauris. Etiam quis urna et velit euismod mollis. Morbi congue orci eu purus facilisis id hendrerit dui malesuada. Nulla nisi nisl, scelerisque eu euismod faucibus, scelerisque et lectus. Maecenas consectetur tristique justo ut venenatis. Nulla facilisi.
Nullam ac magna lectus. Phasellus rhoncus tempus orci at fringilla. Nullam at pulvinar orci. Phasellus tempor, turpis ac iaculis sagittis, sem nunc elementum nunc, placerat pulvinar urna dui quis enim. Etiam sollicitudin pretium tempor. Ut cursus rhoncus odio, sed eleifend risus pretium eu. Fusce eu enim quis nisi pellentesque lacinia. Nulla faucibus blandit orci eu viverra. Donec vestibulum tempus facilisis. Ut et justo quis massa suscipit feugiat. Phasellus sagittis scelerisque tincidunt. Donec diam quam, semper eget aliquam vel, vehicula vitae erat. Morbi tortor mauris, sodales id tristique vel, feugiat vitae tortor. Etiam a elit nunc, id malesuada diam. Nam nisi mauris, luctus nec sodales vitae, mollis eu risus.
Sed in nunc nulla, at convallis nisi. Suspendisse consequat euismod vestibulum. Donec dictum, est et feugiat faucibus, metus nisl pellentesque enim, a posuere orci lectus volutpat mi. Praesent lectus lorem, sodales sit amet accumsan a, placerat quis est. Maecenas non arcu sit amet magna aliquet sagittis sit amet quis orci. Nam eget ante tortor. Suspendisse lorem leo, imperdiet nec ultrices vel, bibendum ac urna. Aliquam erat volutpat. In at nisi neque, eu pharetra sem. Sed nunc tellus, laoreet fringilla tempor vitae, varius dapibus sem. Vestibulum id tortor sit amet enim varius vehicula quis non justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi tempus metus vel leo viverra non dictum dolor pharetra. Etiam auctor pretium mauris at mollis. Suspendisse enim diam, dapibus et pulvinar vitae, commodo et leo. Aenean risus dui, porttitor at gravida vitae, viverra in libero. Mauris ultrices arcu eu nulla consequat dapibus. Aenean ac nunc at ipsum tempor aliquam. Nunc purus metus, mattis eu venenatis non, egestas in mauris. In sed nulla a diam sodales auctor. Praesent at nulla aliquam felis fringilla ullamcorper. Suspendisse at ante nibh, a imperdiet metus. Nulla facilisi. Donec urna ipsum, feugiat in sagittis et, laoreet ac nunc. Etiam ut diam massa. Cras sed dui ut metus rhoncus rhoncus.
Vivamus mollis convallis laoreet. Ut gravida massa quis libero pretium ut convallis velit pellentesque. Aenean bibendum venenatis pharetra. Cras ligula massa, fermentum nec imperdiet at, ultrices non urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, ligula at faucibus lacinia, nisl massa fermentum tortor, ut pharetra eros eros nec neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pretium libero ac aliquam. Quisque interdum augue at nibh porta vel rutrum quam lacinia. Aenean neque ligula, tempus a vestibulum sit amet, sollicitudin nec nisl. Duis facilisis libero mauris, blandit fringilla mi.
Yes, I tried your new t est doc and the existing one. Following the style of ‘Lorem ipsum’ I have to say ‘nec motus’. t doesn’t for me. And I did install the new action properly…
I tried both GitHub and MultiMarkdown modes.
Okay, did you try my test draft, or are you using one of your own?
If the former, I’ve double checked on my iPad and my Mac, and it is definitely working for me; therefore can you share your MMD settings from the Drafts settings listing?
If not, can you post the MMD settings, and a copy of the HTML produced by the action? You can get that in the share sheet on the preview.
@sylumer
If I send the preview (using Preview TOC action) as an email, can the email keep the TOC hyperlinks active? I’m a newbie and I’m trying every possible way to make this work. What am I missing?
How are you sending the preview as an e-mail? Via the share sheet, via a modification to the action, via a subsequent action?
As long as the recipient’s e-mail client app supports it, then sending an HTML e-mail with the links and anchors in should work. But obviously that’s quite a big caveat. While most e-mail clients implement a browser engine for rendering such mails, they are restricted in terms of functionality. After all, you don’t really want the same arbitrary script you might permit on a web page running in an e-mail.
Ok, this is strange. On MacOS links are active (Apple Mail at least), not all links though. But on iOS the same links of the same emails are not, not matter what app I use (Apple Mail, Outlook, Preside). So it seems to be not about the Drafts actions, but the Apple OS (?).
On iOS I modified the Markdown Mail action to process the email from Preview TOC (see images) :
On MacOS I use basically the same, but with Mail assistant :
Would you know how to make the links active on iOS? And why are not all the links active on MacOS?
What does the HTML look like before you pass it into the e-mail?
What does the HTML look like when it arrives at the individual mail clients?
Examining the HTML will help you understand what is going on. There may be a difference in what is being sent/received.
There may be a difference in how the e-mail client application (not really the OS) interprets what it is receiving. As I noted previously, different e-mail clients can behave differently in how they interpret the e-mail content they receive.
HTML views of e-mail are not always available in an e-mail client, but the same e-mail has the same content regardless of which client you view it in. It’s the interpretation that varies, so the HTML for e-mail visible in one client is what another client is interpreting; you don’t have to be able to view the HTML on every client to know what it is.
This post is specific to using a certain app, but has this handy chart of some common email clients and their anchor tag support. It is super spotty and I don’t know that it’s a good idea to design an email around expecting them to work, even if constructed properly.
Even when supported, many clients have slightly different expected anchor formats that are and are not supported, so might require custom scripted anchors that are different than what MultiMarkdown would generate.
Not impossible they could be useful, but certainly might have inconsistent results for the people receiving your emails.
Thanks for your help.
Based on my test example, the HTML looks like this before being passed into the e-mail (copied HTML from the Preview TOC):
:root {
--main-bg-color: white;
--main-color: black;
--alternate-bg-color: #efefef;
--alternate-color: #222222;
--main-border-color: #BBBBBB;
--link-color: #627EC9;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #222222;
--main-color: #eeeeee;
--alternate-bg-color: #444444;
--alternate-color: #cccccc;
--main-border-color: #AAAAAA;
--link-color: #627EC9;
}
}
html {
font-size: 100%;
font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
line-height: 1.4;
}
body {
margin: 0;
padding: 1em;
background-color: var(--main-bg-color);
color: var(--main-color);
}
@media (max-device-width: 480px) {}
@media (min-device-width: 481px) {
body {
margin: auto;
max-width: 600px;
}
}
blockquote {
font-style: italic;
margin: 1.5em 2em;
padding: 1em;
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
}
a {
color: var(--link-color);
}
pre {
display: block;
overflow: scroll;
width: 100%;
background-color: var(--alternate-bg-color);
padding: .5em 1em;
margin: 1em 0;
}
code {
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
font-family: Menlo, Courier, sans-serif;
padding: 2px 3px;
}
table {
margin: 1.5em 0;
border: 1px solid var(--main-border-color);
border-collapse: collapse;
}
th {
padding: .25em .5em;
background: var(--alternate-bg-color);
border: 1px solid var(--main-border-color);
}
td {
padding: .25em .5em;
border: 1px solid var(--main-border-color);
}
img {
max-width: 90%;
}
Bonjour xyz,
Comme discuté, blablabla…
789
sd;lkjsdf
Oùsdklfjsdf?
sdflkjsdf.
adflkjadf.
sdfsdft.
adfadsf.
ssdfsdfdf?
Merci,
BUT
When I process the previous HTML again with Preview TOC, and copy the Rich text, the result is the following.
Where there were French accents, the hyperlinks don’t work where others do. I guess I could just remove the accents from the titles for my purpose.
Example
Bonjour xyz,
Comme discuté, blablabla…
Description du projet
123
Réglementation applicable
Provincial
456
Municipal
789
Construction
10111221
Réseau de canalisations d’incendie
sd;lkjsdf
Oùsdklfjsdf?
Bâtiment de grande hauteur
sdflkjsdf.
adflkjadf.
Sas entre garage et habitation
sdfsdft.
Évacuation
adfadsf.
Locaux techniques
ssdfsdfdf?
Parcours sans obstacles
Merci,
I can’t seem to find how to show the HTML of the actual final email, but here’s an excerpt from Apple Mail (MacOS) if it can be of any help:
Thank you for the quick reply, it’s so unfortunate that Apple Mail (iOS) does not support anchor links. I also tried with Outlook for iOS and it doesn’t seem to work either.
