Export to HTML

I need to share files with the web designer to be posted on the site, the files contain images, which makes it impossible to share as a markdown, I can export as PDF but it would be a lot of work for him to handle, the best option would be to export as HTML.

For now I’m using Typora just to export, but it gives me more work because it doesn’t recognize Obsidian attachments, and if I change to the full file path, it works in Typora but it doesn’t work in Obsidian.

13 Likes

it’s a good feature request, in the mid-time here are some suggestions for your current case

With Typora

Like you said Typora does a good job, perhaps you could try to see if Typora can detect the path of the images used, it might just be a matter of changing the format of obsidian images path to md links instead of wikilinks

This community plugin can help you with that:

https://github.com/agathauy/wikilinks-to-mdlinks-obsidian

that way if things are set up with a relative path in Typora you might be able to easily export from typora.


Other alternatives (With Obsidian)

I still think sharing the markdown file should be the best for a designer to deal with.

In order to do this, just put all the images you are using in a sub folder, if you do it from the obsidian left sidebar (in the file manager) links should update without any issues.

That way you can just send the markdown file with the link of attachments.


It’s all a matter of trying to use MDlinks format for more compatibality for the web designer and more importantly a well organized folder of the images used, that will be really easy for the web designer to deal with.

A new vault (best solution)

If all of this sounds a bit confusing, the easiest solution I would recommend is start a new vault, which contains only what you want the web designer to see and share the whole folder. That’s the easiest solution I can think of.

In my opinion it’s even better than using export to HTML since things are cleaner and easier for a webdesigner to organize the content.

Hope that helps!

2 Likes

That’s by far the best solution and easiest thing to do.

1 Like

Another option to use Brett Terpstra’s Marked app against the .md files and use the built-in export to HTML.

Marked 2 - Smarter tools for smarter writers

Marked 2 is also available in Setapp | The best apps for Mac in one suite.

1 Like

@lsieverts I’m trying to get Marked 2 to play nice with Obsidian. Did you find a solution to get Marked 2 to (pre)process the Wikilinks?

When exporting pdf, some complex CSS formatting can be broken.

Also, exporting pdf doesn’t support dark mode. This means I have to have CSS exported for bright mode. this is frustrating.

The typora solution is to save the CSS when exporting html, so the user can export the document with dark mode CSS and then reprint the pdf, perfect solution.

Unfortunately typora CSS and Obsidian CSS are not compatible, and more importantly Obsidian links will not work in typora and will show the code

And in cases where iOS sync services are difficult, only iCloud and Obsidian sync can be used, and exporting html can help view documents on iOS.

1 Like

Frankly, the PDF export is terrible. First of all, having a long technical document split up into pages is already an unnecessary reduction in readability, but when the exported PDF also doesn’t include bookmarks for the various headers, it becomes completely impossible to navigate. I can’t send this PDF export to anybody, it would be embarassing.

I’m very surprised Obsidian doesn’t already have a HTML export, especially considering that all web browsers already have this feature built-in. As Obsidian is built on Electron, which is based on Chromium, I would be surprised if you couldn’t just leverage this existing functionality.

The Copy As HTML plugin might be of interest.

The best solution would be allowing to export a html file with css included, so we can display something like Obsidian Reading View everywhere. Like someone wrote, a similar feature is offered by Typora.

Use case or problem

I’ve printed up notes or documentation that I would like to take with me in hard copy.

Proposed solution

I would like an option to send the rendered HTML document to my network printer.

Current workaround (optional)

Export to PDF and then print the PDF

Related feature requests (optional)

none

4 Likes

Platform

[X] iOS
[ ] Android

Obsidian Mobile version: v0.1.05


Please give consideration to providing a native Print feature OR providing Share Sheet implementation in the Apple Mobile version of the app. Relying on workarounds using 3rd party apps, etc., are not only cumbersome, but I have encountered ‘issues’ while trying to use these alternatives with iCloud and native Obsidian Sync (too numerous for listing here).

2 Likes

I would also like to see this added.
Combine with the chromium print preview functions I think would make a workable solution and then all would be needed is to create a @media print css flag in the themes.

Only works from edit view which doesn’t always provide rendered dataview blocks.

I do have a point of contention with combining the export to HTML with the Print request. they may be able to be used tangentially but printing from the app is what I would prefer. while exporting to HTML may have it’s occasional use cases it’s really only ideal if I wanted to use it with an external app to carry the heavy lifting of printing or rendering to a website, etc…

Even simpler than the plugin, it turns out you can just copy directly from reading view (when I suggested the plugin I was for some reason I confused into thinking this didn’t work).

It sort of works in that regard depending on what you are pasting to. For instance using Admonitions with MS Word is a no go.

1 Like

There is one html feature that is of super importance to me that would require the proper html export option.

Mainly the html `details` tag.
I write very many tutorials for people in my company and in order to reduce the cognitive load, I use the `details` tag all the time, so that the reader sees less text at a given time.
I find it amazing! You can
nest
very
deeply
and very easily
Obviously though I overdid it now to show what I mean.
What I tried
Copy as HTML plugin
It actually exports the `details` tree, but it fails at exporting newlines.
It would be quite annoying to write `<br>` after each line, so it's really nice that Obsidian inserts it for us and displays text nicely. It also exports to PDF nicely. But this plugin doesn't insert `<br>` tags for us and therefore all text is printed in one wrapped line.
Obsidian Enhancing Export plugin
Same as Copy as HTML plugin.
What a natively implemented export could have to be nice
A toggle switch between exporting in light mode or dark mode, with default being light mode.
It would use the same markdown parser as Obsidian viewer, so that the fonts would look nice and colors and everything else.
What I found in the meanwhile...
With Obsidian Enhancing Export plugin you can take inspiration in the pandoc command that makes the export and manually run it in the terminal on the md file, but take care to change `-f markdown` to `-f markdown+hard_line_breaks`.

You can quite easily export as HTML. Check out my Templater script to extract any note as pixel-perfect HTML with full CSS.

Just change the upload part to save to a file instead.

The specific part to extract the HTML for any note is:

const leaf = app.workspace.activeLeaf
const html = leaf.view.modes.preview.renderer.sections.reduce((p, c) => p + c.el.innerHTML, '')

The CSS extraction and other parts you can find in the Templater script here:

https://github.com/alangrainger/obsidian-share/blob/main/obsidian-share.js

And here’s an example of an HTML exported note which looks identical to how the note looks inside Obsidian on my system:

HTML exported note

1 Like

I don’t know js, but from what I see I suppose this code will only work as a plugin, or in other words from within Obsidian, right? I can’t tweak it in such a way to be able to manually run it on a md file from terminal?

You can also do that very easily if you want to use a generic Markdown to HTML convertor like Showdown.

If you want to have it looking identical to how it appears in Obsidian, you’ll need to interface with Obsidian API to do it. It’s possible you can do that from the command line also, but I have no experience in that.