Question or Feature Request? : CSS tricks

Support
1

First of all, I very much like the simple format of Joplin. I spent quite a lot of time looking over different note taking applications before finding one that I like. I would like to be able to highlight some text and change the color of it, mostly to remind myself of important details at a glance. Is this something that is currently possible? If not, would it be possible to add without a lot of difficulty? Maybe a couple different colors and/or a background color for a selected bit of text.

Thanks much.

2

Markdown doesn’t support highlight but you can do it yourself using CSS:

`Some <span style="background-color: yellow">highlighted text</span>`

You can also use custom CSS (see doc) to keep it short:

`Some <hl>highlighted text</hl>`

And CSS:

hl {
    background-color: yellow;
}

(I’m not entirely sure custom tags like that would work but worth a try)

3

While this works on the screen, it is lost when printed (export PDF).

4

I don't know how it could be added to joplin but usually, to be able to handle PDF and printing media with CSS, we do like that:

for example

<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="impression.css" media="print">

Thus, when "printing" a webpage or exporting to a PDF ; impression.css will be used and not styles.css
May be a a new Customer CSS could be added like describe in the doc

~/.config/joplin-desktop/userstyle.css
and add
~/.config/joplin-desktop/print-userstyle.css

a try do make would be to add

@media print { 
}

to ~/.config/joplin-desktop/userstyle.css

EDIT : I made that try

added to ~/.config/joplin-desktop/userstyle.css

@media print {
	body {
	  width: auto!important;
	  margin: auto!important;
	  font-family: serif;
	  font-size: 12pt;
	  background-color: #fff!important;
	  color: #000!important;
	}
	p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
	  color: #000!important;
	  margin: auto!important;
	}
	.print {
	  display: block; /* affichage des �l�ments de classe print */
	}
	p, blockquote {
	  orphans: 3; /* pas de ligne seule en bas */
	  widows: 3; /* pas de ligne seule en haut */
	}
	blockquote, ul, ol {
	  page-break-inside: avoid; /* pas de coupure dans ces �lements */
	}
	h1 {
	  page-break-before: always; /* chaque titre commence sur une nouvelle page */
	}
	h1, h2, h3, caption {
	  page-break-after: avoid; /* pas de saut apr�s ces �l�ments */
	}
	a {
	  color: #000!important;
	  text-decoration: underline!important;
	}
	a[href]:after {
	  content: " (" attr(href) ")"; /* affichage des URL des liens */
	}
}

thus this will only impact "print" media and PDF file

All that tricks come from a famous website known for its knowlegde with CSS / HTML named alsacreations
the CSS come from here

here is a sample of a tips for ansible I stored in joplin :slight_smile:

pdf
pdf800Ă—344 40.1 KB

5

I created ~/.config/joplin-desktop/userconfig.css with the specified contents, but it still doesn’t work. Am I missing something?

6

BTW: When exporting a document as PDF, it would be helpful if .pdf were added to the suggested file name.

7

That should be userstyle.css - https://joplin.cozic.net/#custom-css

8

It does for me. On which platform is it?

9

the “.pdf” is not displayed in the next dialog box but the file is well named foobar.pdf after accepting the name (without the extension)

10

Exactly.
Also, there is no warning against overwriting an existing file.

11

BTW The file dialog stalls the Joplin, is that intentional? When I move it I get something like this (the main window is no longer repainted):

scrot20190128191129
scrot20190128191129.png891Ă—513 36.5 KB

Fedora 27 using MATE desktop.

12

same with debian 9 and xfce4

13

This breaks formatting of checkboxes :frowning: .

scrot20190128192408

14

is this the PDF renderer ? If so, the CSS was just posted for the example and will need to be improved.
if not the CSS code need to be surrounded by @media print { ... }

15

Yes, this was the PDF renderer. I understand now this was not a working example for joplin, just an example :slight_smile: .

16

It seems I need to restart Joplin after each CSS change, is that correct?

17

I tried a simple print CSS like:

@media print {
    @page {
        size: A4 portrait;
        @top-left {
            content: element(title, first);
            font-size: 18pt;
            font-weight: bold;
        }
        @top-center {
            font-size: 18pt;
            font-weight: bold;
        }
        @bottom-left {
            font-size: 8pt;
            content: "Produced by Joplin";
        }
        @bottom-right {
            font-size: 8pt;
            content: "Page " counter(page) " of " counter(pages);
        }
    }
}

… but it didn’t work. Before proceeding: what exactly is supported? What style classes are used that I can address in the CSS?

18

That’s correct

19

Not sure if media queries are supported at the moment, I've never tried that.

20

Which, again, raises the question: what is supported?
I was quite surprised to find out that Joplin lacks HTML export since (I think) that would reveal a lot about the rendering process.