Can we get a simpler solution to disable the WYSIWYG view? I hate writing in MarkDown, accidentally clicking that cursed button, and then going back to the MarkDown view to see that the formatting has changed.
Yep, I can confirm, using the old trick hides the entire icon toolbox, not just the WYSIWYG icon.
If only we could have just a little [ x ] checkbox disabling the WYSIWYG mode in the settings panel. So many users asked for it, where just one accidental clicking on it can ruin the markdown... And yet we still need to play with the custom CSS, which also stops working occasionally due to improvements.
Luckily the new CSS trick does work. Thank you @dpoulton !
I like to be more explicit in my CSS when it is something used in all notes …
This is in my userchrome.css file:
/* removes the WYSIWYG (MARKDOWN/RICH TEXT) button */
/* …old method (Joplin 3.0.z and older) */
/*div.editor-toolbar div button {
display: none !important;
}*/
/* …new method (Joplin 3.1.z and newer) */
div.editor-toolbar .markdown-active {
display: none !important;
}
UPDATE: a prior version of this used div.editor-toolbar div button[title="Toggle editors"] But that relies on the English words "Toggle editors". .markdown-active is far better.
There might be something I didn't get. I have used all css on this thread, the top right 2 buttons are still there.
I am using the latest Jopin on WIn 10 X64
This way, you can be sure that you're editing the correct files. Also, if that still doesn't work, please post the content of the whole CSS file, as I'm assuming there may be some syntax issues there.
/* For styling the rendered Markdown */
/* Render horizontal lines (made with \-\-\- or \*\*\*) as an actual line across the editor. */
.cm-hr {
border-top: 3px solid #777;
display: block;
line-height: 0px;
}
/*make markdown tokens for list into dots*/
.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token
{
color: transparent !important;
background-color: #DECB6B!important;
height: 6px;
width: 6px;
border-radius: 50%;
display: inline-block;
vertical-align: bottom;
margin: 0 0px 8px 8px;
}
/*lists*/
.cm-variable-2, .cm-variable-3, .cm-keyword {
color: green !important;
}
.cm-rm-link {
text-decoration:underline
}
.cm-strong {
color:red!important;
font-weight: bolder!important;
}
/*strikethrough checked boxes*/
span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox ~ span.cm-rm-checkbox {
text-decoration: line-through;
color:#5B5B5B!important;
}
/*HEADER STYLES*/
.cm-header-1{
color: #794BBB!important;
font-weight:bold;
}
.cm-header-2{
color: #BD93F9!important;
}
.cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
color:#CBBBE1!important;
font-style:italic;
}
.cm-header-1 {
/* line-height: 200% !important;*/
display: inline-block;
margin-top:.8em;
margin-bottom:.3em;
}
and userchrome.css
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
/* removes the WYSIWYG (MARKDOWN/RICH TEXT) button */
/* …old method (Joplin 3.0.z and older) */
/*div.editor-toolbar div button {
display: none !important;
}*/
/* …new method (Joplin 3.1.z and newer) */
div.editor-toolbar div button[title="Toggle editors"] {
display: none !important;
}
Yep, as @dpoulton mentioned, I have to fix my CSS. The dev team changed other stuff too. e.g. my note count is all messed up with my custom css.
Unfortunately I don't have much time right now to fix my css.
But thanks to different comments you can remove the button again.