I am working on the styling of code blocks in the markdown editor. I have figured out how to get a black background. However, I can't figure out how to change the color of the caret (aka cursor) or the selected text.
Here is what I have tried, with no success:
pre.cm-jn-code-block.CodeMirror-line
{
background-color:black!important;
padding-left:20px!important;
caret-color: white!important; /* does nothing */
}
pre.cm-jn-code-block.CodeMirror-line::selection
{
background: yellow!important; /* does nothing */
}
One odd thing, that may be a clue, is that when I change the codeblock background to white, I don't see any color in the selection. except outside the code block:
I humbly call out to our local specialists/experts @uxamanda@dpoulton for assistance.
I have had a go at this in the past for both the editor and the render pane. I failed.
I managed to get the background and text colour changed. I even got the cursor to change but it affected the entire CodeMirror editor and so was of no use. Selection highlighting also stumped me. I think one of the problems is that !important statements are being made from the outset and so the css is effectively "locked" from the very first change.
Also the fenced code block in CodeMirror is far more complex than it initially appears. For instance as I was trying this out a fenced code block looked like this.
Of course a fenced code block, even in the editor, implements code highlighting and so changing it to a css block caused this as the "CSS" highlighting introduces other classes.
I am not sure that this part of the CodeMirror editor can be adequately manipulated just using css.
As I have said before, I had hardly touched css until I started to experiment with customising Joplin. I mostly get things to change through trial and error. I am happy to be corrected by someone who is a true css "expert"
I have also been wondering why we should have to use !important in the custom css files. It seems that the whole concept is that we want to override the built in styling.
But in this case I would have thought that the specificity of the ::selected would have overridden any !important on something less specific.
And yes, the code block is not straightforward.
@dpoulton I would say, though, that you have surely become a Joplin CSS specialist.
I think that it may be due to the order the stylesheets are loaded into Joplin. Logic suggests that if a custom css file is loaded last then, unless the internal stylesheet uses !important on the element you are trying to change, the custom css "wins". However if the internal style sheet containing the element you wish to change is loaded after the custom one, then !important is required to "break through". !important is a very blunt instrument and when used it effectively stops futher mods. Yes, in certain circumstances, you can override the override but things get very complicated very quickly.
I have convinced myself there was a post on this forum (possibly GitHub) once about the css loading order. Either I just cannot find it or it never actually existed!!
If it helps the css I used in my unsuccessful attempt was:
Broken CSS
pre.cm-jn-code-block {
/* background */
background: black !important;
}
pre.cm-jn-code-block span.cm-comment{
/* text */
color: white !important;
}
.CodeMirror-cursor {
/* cursor */
border-left: 1px solid white !important;
border-right: none !important;
width: 0 !important;
}
You can use the development tools to extract codemirror.css from Joplin to get a better idea of some of the classes it possibly uses. I doubt all are used in Joplin's implementation. If that helps you on your quest?
Do you remember what the width property did? I changed it to 8px and nothing changed.
I understand the basics of priority in css. I suppose that since the solution seems obvious (loading the custom css last) there must be a reason it hasn't been fixed.
Now I just need to figure out the selection problem.
@CalebJohn, has there been any thought around adding a div for the code blocks in the Rich Markdown plugin? Because as it is, It seems like it's not possible to have rounded corners on the code block since I think each line is its own thing. (I tried and ended up with a scalloped border, that while cute, wasn't what I was after.) I'm asking here since it may help solve the selection color issue.
Never changed it. That bit is a direct lift out of codemirror.css. I just saw it, copied it, tried it!
That did not work properly for me as I could not constrain it to the code block and so it either had no effect or the rest of the editor page (for my colour choices) had a white cursor on a white background!!
Assuming that loading order is the cause it could be because custom css isn't actually a supported feature and maybe sorting it out envolves quite a bit of "engineering"..... (EDIT) or possibly no-one has actually ever asked...
Actually the current (or previous) release has functionality to highlight code blocks, but it it won't be present in future versions because it's slow and already done by the main application.
As far as using a single div (which would help with the curved background), I don't think it's possible with the way CodeMirror internally structures content.
