Home / GitHub Page

Question or Feature Request? : CSS tricks

#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:

#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):

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.