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

AltoRetrato · 2023-12-19T17:53:35.432Z

Hi there!

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!

muzak · 2023-12-19T18:25:28.983Z

Related: does the following method exist?

Css code to change background color of html note Support

Then is there a systematic method of converting the html imported notes to markdown note but with the original html code?

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

AltoRetrato · 2023-12-19T19:29:23.544Z

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...

billanderson · 2023-12-20T14:51:10.069Z

Let me report here the exploration I had last week.

Maybe it can be helpful for other evernote migrants here

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

billanderson · 2023-12-20T14:51:41.691Z

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
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.

billanderson · 2023-12-20T14:56:08.763Z

AltoRetrato:

I can manually copy the HTML and paste it into a Markdown note, and so far it seems to work just fine

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

Css code to change background color of html note Support

I have a work around figured out last week. It turns out that the html notes are stored internally as html file, even when you edit it in the markdown editor. The evidence is that if you export a html note to markdown + front matter, the output file is still an html file! So the solution is the following: export notes to markdown + front matter change the html file extension to md import the markdown + front matter backinto joplin Then even though this note contains extensive html markup, …

personalizedrefriger · 2023-12-20T18:49:20.909Z

I've created a bug report for this:

github.com/laurent22/joplin

Custom CSS not loading in HTML notes

opened 06:47PM - 20 Dec 23 UTC

personalizedrefrigerator

bug

### Operating system Linux ### Joplin version 2.13.9 ### Desktop version inf…o Joplin 2.13.9 (prod, linux) Client ID: 24b2a961cccf40fe8448cdc0930b6fce Sync Version: 3 Profile Version: 44 Keychain Supported: No Revision: 1bbec445d Freehand Drawing: 2.7.1 RevealJS Integration: 0.6.1 Simple Backup: 1.3.4 Work tracker: 0.0.1 ### Current behaviour 1. Add custom CSS 2. Open an HTML note 3. Compare rendered version to a markdown note with the same content Specifically, I have the following custom CSS: ```css details[open] { padding: 8px; } details { transition: 0.2s ease padding; /* This style of CSS selector **is** valid syntax in modern versions of Chrome/Electron. */ & > summary { cursor: pointer; font-weight: bold; } } ``` And the following HTML/Markdown: ```md <details><summary>Test</summary> Testing... </details> ``` ### Expected behaviour Custom CSS should be applied to HTML notes. ### Logs _No response_

It's also related to this issue.