Feature Request: use custom CSS (userstyle.css) in Evernote notes imported as HTML (shown in IFRAME)

Hi there! :wave:

I'm currently an Evernote user searching for a better alternative, and Joplin seems to be just what I'm looking for! However, I'm facing a challenge with importing more than 3.7k notes from Evernote. I imported a few notes and observed that to preserve all the formatting, I'll need to import most (or all) of my notes as HTML using File > Import > ENEX - Evernote Export File (as HTML).

One issue I've noticed is that Joplin displays these imported notes within an iframe, but it doesn't incorporate any custom CSS files such as userchrome.css or userstyle.css. Consequently, these imported notes appear in Times New Roman, which isn't what I want. As of now, it seems that I have to manually edit each note to add custom CSS to change their style, which is quite cumbersome.

Considering that these imported notes are wrapped by <en-note> tags, I believe it would be grea if the userstyle.css file (or even a new one, for example, user_style_html.css) could be included in the iframe head or body section. This way, I could easily add a simple CSS entry to format these notes, for instance:

en-note { font-family: 'Tahoma', sans-serif; font-size: 13px; line-height: 19px; }

Having this capability would significantly streamline the process of styling these imported notes and make simple and rapid changes any time.

Thank you for reading and considering this feature request! :smile:

Related: does the following method exist?

Maybe this could help the userstyle.css to format imported HTML and Markdown notes alike.

1 Like

Thanks! That is a somewhat related issue, but even though the background styling works for me as well (iframe.noteTextViewer{ background-color: #b3ecb8; }), it applies only to the iframe itself, not its contents. I.e., I could not change the font settings that way (maybe it is possible but I don't know how?)...

I can manually copy the HTML and paste it into a Markdown note, and so far it seems to work just fine, but I could not see a simple way to automatically / programmatically change the markup from HTML to Markdown of several notes.

Which brings up the question (or maybe prompts another feature request): why can't we import Evernote notes as HTML into notes using Markdown markup, but without converting the HTML to Markdown? It seems this approach could potentially solve the issue...

Let me report here the exploration I had last week.

Maybe it can be helpful for other evernote migrants here :grinning:

First I was thinking about using program to reformat enex, so that the output to markdown can have html markup. Here are the libraries I found

  • Yarle: Yet another rope ladder for evernote
    GitHub - akosbalasko/yarle: Yarle - The ultimate converter of Evernote notes to Markdown
    enex -> markdown configurable, but its template file does not seem to support preserving the markup

  • Enex2md
    GitHub - janik6n/enex2md: A Python command-line utility to convert enex-files to Markdown
    a python package, hasn't been updated for 4 years, but the code seems easy to adapt

  • Enexlib
    enexlib ยท PyPI
    a very new python package, just updated a few days ago. Enex file is a xml file, now I understand that they just use beautifulsoup in python to parse xml and output markdown. maybe one can adapt the code here

The above is the approach that solves the problem from enex file, but can we deal with html directly?

Joplin can export to html, and we maybe able to write a parser from html to markdown with our custom markup.

Here are the libraries I found

  • html2markdown
    GitHub - dlon/html2markdown: Conservatively convert html to markdown
    This library wants to have compatbility to convert markdown back to html, but it isn't not useful as I tested my evernote notes, because it just output the same html :joy:
  • markdownify
    GitHub - matthewwithanm/python-markdownify: Convert HTML to Markdown
    Maybe one can adapt this lib to keep the html markup, this is easier than enex -> markdown

You can use a hybrid approach

  • use joplin's html export function to export evernote note to an html file.
  • use markdownify to convert html to markdown file
  • write a program that scan the markup you want to keep in the html file and insert them in the write place in the markdown file.

If this works, I suggest you try my workaround solution:

I've created a bug report for this:

It's also related to this issue.