Change Default Text Color

[silenuz]

first this looks like a cool control, thanks for the hard work.

I'm trying to implement a personal editor based on pandoc markdown. I want to implement syntax hi-lighting for it and stumbled across your project. I ran the java keyword demo included with the source. It looked nice, however when I spend long stretches at the computer I prefer an editor with a black background, think darcula in Intellij or Norway Today in Netbeans. So I proceeded to change the background colour to black, which was easy enough to achieve, I just added the following to the css file:

.styled-text-area{
    -fx-background-color:black;

}

With a little googling I found that I had to set the fill for the text as follows:

.styled-text-area .text{

    -fx-fill:yellow;
}

However when I set the fill as above there is no longer any syntax hi-lighting everything is yellow. So I was wondering if this is a bug or if there is some other way to change the default text colour.

Anyway to replicate just add the above to the java-keywords.css file.

[TomasMikula]

The CSS shipped with the demo defines highlighting like this:

.keyword {
    -fx-fill: purple;
    -fx-font-weight: bold;
}

Your selector .styled-text-area .text is more specific than .keyword and thus takes precedence. To fix the precedence problem, just modify the highlighting selectors to be more specific:

.styled-text-area .text.keyword {
    -fx-fill: purple;
    -fx-font-weight: bold;
}

[silenuz]

So then say in the java keywords demo how would I get the current text
that is black to be some other color then? That text is not keyword is
not pattern matched. There's nothing in the highlighting sectors in the
demo that even hints at changing the base color to be used by any text
unmatched by the pattern match.

So in this case how would I change the Java Keywords demo so that it the
text that is currently black is any other color. What highlight
selector would I use in this case in the css file?

Jordan

On 08/31/2015 01:40 PM, Tomas Mikula wrote:

The CSS shipped with the demo defines highlighting like this:

.keyword {
-fx-fill:purple;
-fx-font-weight:bold;
}

Your selector |.styled-text-area .text| is more specific than
|.keyword| and thus takes precedence. To fix the precedence problem,
just modify the highlighting selectors to be more specific:

.styled-text-area .text.keyword {
-fx-fill:purple;
-fx-font-weight:bold;
}

—
Reply to this email directly or view it on GitHub
#172 (comment).

[TomasMikula]

Sorry I wasn't clear enough. You did the right thing to add

.styled-text-area .text{
    -fx-fill:yellow;
}

but in order to not override the keywords etc., you now in addition have to make them more specific.

[silenuz]

This still does not work I have:

.styled-text-area{
-fx-background-color:black;
}
.styled-text-area .text{

 -fx-fill:yellow;

}
.styled-text-area .text .keyword {
-fx-fill: purple;
-fx-font-weight: bold;
}
.styled-text-area .text .semicolon {
-fx-font-weight: bold;
}
.styled-text-area .text .paren {
-fx-fill: firebrick;
-fx-font-weight: bold;
}
.styled-text-area .text .bracket {
-fx-fill: darkgreen;
-fx-font-weight: bold;
}
.styled-text-area .text .brace {
-fx-fill: teal;
-fx-font-weight: bold;
}
.styled-text-area .text .string {
-fx-fill: blue;
}

.styled-text-area .text .comment {
-fx-fill: cadetblue;
}

All text is yellow and there is no syntax highlighting.
-Jordan

On 08/31/2015 02:05 PM, Tomas Mikula wrote:

Sorry I wasn't clear enough. You did the right thing to add

.styled-text-area .text{
-fx-fill:yellow;
}

but in order to not override the keywords etc., you now /in addition/
have to make them more specific.

—
Reply to this email directly or view it on GitHub
#172 (comment).

[TomasMikula]

You need .styled-text-area .text.keyword etc., i.e. no space between .text and .keyword.

.text .keyword means a node with class keyword that is a descendant of a node with class text, while .text.keyword means a node with classes text and keyword. Peculiarities of CSS.

[silenuz]

You can disregard my last message sorry. CSS is somewhat new to me and I
had a space where I shouldn't.

It's all good now. Thanks for the help and the great editing pane.

Jordan

On 08/31/2015 02:05 PM, Tomas Mikula wrote:

Sorry I wasn't clear enough. You did the right thing to add

.styled-text-area .text{
-fx-fill:yellow;
}

but in order to not override the keywords etc., you now /in addition/
have to make them more specific.

—
Reply to this email directly or view it on GitHub
#172 (comment).

[silenuz]

Is it possible to change the caret color? When changing fill on a
TextArea the caret changes to the same color as the fill, however when
setting the fill in the StyledTextArea the caret does not change and
remains black. Is there a way to change the caret color?

-Jordan

On 08/31/2015 02:18 PM, Tomas Mikula wrote:

You need |.styled-text-area .text.keyword| etc., i.e. no space between
|.text| and |.keyword|.

|.text .keyword| means a node with class |keyword| that is a
descendant of a node with class |text|, while |.text.keyword| means a
node with classes |text| and |keyword|. Peculiarities of CSS.

—
Reply to this email directly or view it on GitHub
#172 (comment).

[TomasMikula]

It is actually not public API, but it so happens that the caret is a Path with zero area and stroke of width 1px and has the class caret, so you can customize its color like this:

.styled-text-area .caret {
    -fx-stroke: yellow;
}