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.
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?
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.
/* 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 */
}
}
Before & After
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.