How to make joplin codes printable?

I want to print my notes. But currently due to dark background and colors, I don't think I'll get perfect result from printing. So, do you've any ideas how to make this printable?


This is how my current codes look.

You can split your userstyle.css file into two sections.

The first starts

@media screen {

}

and between the curly brackets you put any css you use to modify how Joplin renders a note on the screen.

Then create another section after that that starts

@media print {

}

Between the curly brackets you put css to modify how Joplin renders a note when printing or creating a PDF.

The below css basically prints black text for everything in a fenced code block and overwrites any code highlighting colours.

@media print {
     span[class^='hljs-'] {
         color: #000000 !important;
        /* modifies code highlighting colours in a fenced clode block for printing i.e. turns it all black!*/
   }
}

If it helps to get you started, here is some css I have used that makes a note more suitable for black and white printing.

Click to view
/* The below controls how a note displays when printed or exported to pdf. The intention is to make prints primarily black and white. */
 @media print {
     body {
         color: #000000;
    }
     table th, table td {
         color: #000000;
         border: 1px solid #000000;
        /* black table borders for printing */
         background: #ffffff;
        /* white table background for printing */
    }
     a {
         color: #000000;
         text-decoration: none;
        /* modify hyperlink text */
    }
     .resource-icon {
         background-color: #000000;
        /* makes any linked resource icons black */
    }
     blockquote {
         border-left: 4px solid #000000;
         /* makes the bar at the left of a blockquote black */
         opacity: 1;
         /* makes the blockquote text black */
    }
     code {
         color: #000000;
         font-weight: bold;
        /* bold code text for printing */
    }
     .inline-code {
         color: #000000;
         border: 0px none;
         background: none;
         font-weight: bold;
        /* bold code text for printing and removes the grey background and border*/
    }
     pre.hljs {
         border: 0px none;
         background: #F0F0F0;
         /* removes the border from fenced code blocks and modifies the grey background colour */
   }
     span[class^='hljs-'] {
         color: #000000 !important;
        /* modifies code highlighting colour for printing (all black!!) */
   }
     hr {
         border-bottom: 1px solid #000000;
        /* change horizontal rules to black for printing */
    }
     h1 {
         border: none;
         border-bottom: 1px solid #000000;
        /* change horizontal lines under h1 tags to black for printing */
    }
     mark {
         background-color: #F0F0F0;
        /* sets highlighter ==mark== to grey for printing */
    }
}

EDIT:

Before & After

4 Likes

I pasted the last code in userstyle.css, they're having no effects

Make sure that you have fully quit (File > Quit or CTRL + Q) and restarted Joplin for the changed css to take effect.

Yes it worked. Any way to make background color of code white? Or will it matter while printing? You gave a really elegant and great solution.

stupid question, but I forgot where userstyle.css was.

Change the background value in the pre.hljs section to white (as below):

     pre.hljs {
         border: 0px none;
         background: white;
         /* removes the border from fenced code blocks and modifies the grey background colour */
   }

It depends on the capabilities of your printer. My cheap black & white printer does not handle faint greys very well so, as I wanted a background to fenced code blocks, I made the background a bit darker than the default.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.