TOC presented in left side when converted into HTML file

Features
1

Usually, TOC is shown just below the page title or first section of the converted HTLML document.
However, when markdown is converted into HTML file, it's position in upper section decreases readability and it's hard to find specific topics in the document.

When TOC is presented on the left side of HTML document, it would be much better like outline plugin function in Joplin

This is possible in Stackedit.io with exporting as 'Styled HTML with TOC'.

https://gospel79.netlify.app/

Is there any way of implementing this with any css or other plugin in Joplin?

Related reference : https://frontendscript.com/html-table-of-contents-sidebar/

1 Like
2

This would be cool if someone help to do this.

3

Sorry, I am pretty new to Joplin, thus there might be easier/automated ways to do this but so far I did not dive into the details...

You can do that by adding/changing the CSS of the exported files. Easiest might be to have an extra CSS file and just load that in the header of each HTML file.

Content of the CSS would be something like the following lines. This is as simple as it can be and can be adjusted easily to fit needs/size constrains/style feelings/...

.table-of-contents {
position: fixed;
display: block;
width: 350px;
height: 100%;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: lightgray;
}

#rendered-md{
margin-bottom: 180px;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
padding-right: 30px;
max-width: 1250px
}

.exported-note-title {
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1250px
}

Just load this file in the HTML head with this line:

<link rel="stylesheet" href="extra_toc.css"/>
4

If it is document specific one can add it to the top of the document inside a styleblock:

<style>
.table-of-contents {
position: fixed;
display: block;
width: 350px;
height: 100%;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: lightgray;
}
.........
</style>

If it should apply to all documents one can add it to the userstyle.css as mentioned in the Manual. Just know that in both of these cases the preview of the document inside of Joplin is affected as well! Havin the TOC on the side of the document might be not ideal in the preview as it can consume a lot of space.