Syntax highlighting

[tischi]

@tobyhodges @unode

I tried adding syntax highlighting like this:

{% for platform in page.exercises %}
<blockquote class="challenge" id="{{ platform[0] | slugify }}-exercises-div">
<h2>{{ platform[0] }}</h2>
{% assign includefile = platform[1] %}
{% capture exercise %}{% include {{ includefile }} %}{% endcapture %}
{% assign ext = includefile | split: "." | last %}
{% if ext == "ijm" %}
{% highlight java %}
{{ exercise }}
{% endhighlight %}
{% elsif ext == "py" %}
{% highlight python %}
{{ exercise }}
{% endhighlight %}
{% elsif ext == "md" %}
{{ exercise | markdownify }}
{% else %}
{{ exercise }}
{% endif %}
</blockquote>
{% endfor %}

However, I am just getting plain text without any colors.

For example this here (which should be the same as Jekyll should be using Rouge), looks much nicer: http://rouge.jneen.net/v3.28.0/java/

Any ideas? Maybe I am doing something wrong?

[unode]

Check if the rendered HTML includes the syntax highlight classes. Also add some explicit code to each highlight section to double-check. For instance:

{% if ext == "ijm" %}
{% highlight java %}
public class java {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
{{ exercise }}
{% endhighlight %}

Check also if syntax highlight works inside <blockquote>.

[tischi]

That's what I get here:

Looks different on the Rouge website though:

Maybe a Rouge version issue?

So the main issue seems to be that the ImageJ Macro language is, of course, not officially supported by Rouge.

Any further suggestions?

[unode]

All words seem to have some kind of syntax highlight so it looks like it works. The problem you are referring to is one of theme, that is, the colors look different.

Perhaps check this.

[tischi]

Turns out the main issue was that due to my red-weakness (color blind) I did not see the syntax highlighting for the macro code 🤣 .

I was looking for a more color-blind friendly version and this works better for me:

rougify style base16 > assets/css/syntax.css

@manerotoni OK for you, too?

[tischi]

@unode Do you know where I can change the background color of the code to white? I managed for the blockquote, but that does not affect the code.

203 <blockquote class="challenge" style="background-color:white;" id="{{ platform[0] | slugify }}-exercises-div">

[unode]

Inspect the element in the browser and try to find where the background color is coming from. You should be able to override it with a higher precedence CSS rule or by tweaking the CSS file where the rule comes from.

[tischi]

Found it in assets/css/bootstrap.css

1535 code {$
1536   padding: 2px 4px;$
1537   font-size: 90%;$
1538   color: #c7254e;$
1539   background-color: #f9f2fi4;$
1540   border-radius: 4px;$
1541 }

[tischi]

In fact, no, it is here: assets/css/bootstrap.css

1558 pre {$
1559   display: block;$
1560   padding: 9.5px;$
1561   margin: 0 0 10px;$
1562   font-size: 13px;$
1563   line-height: 1.42857143;$
1564   color: #333333;$
1565   word-break: break-all;$
1566   word-wrap: break-word;$
1567   background-color: #f5f5f5;$
1568   border: 1px solid #ccc;$
1569   border-radius: 4px;$
1570 }

With white background it looks cleaner imho.

rougify style base16 > assets/css/syntax.css

rougify style magritte > assets/css/syntax.css

rougify style github > assets/css/syntax.css

Copy and paste from http://rouge.jneen.net/v3.28.0/javascript/

For my taste this looks best.

[tischi]

@manerotoni would you be OK if we go with the latter syntax highlighting ("Copy and paste from http://rouge.jneen.net/v3.28.0/javascript/")? Or do you have a strong other opinion? We can also always change it back to something else....

[AnniekStok]

I like the last one (blue-green to me) as well. However, personally I liked that before there was also a color distinction between comments and code. That seems gone now. Also I am not always seeing the blue color (e.g. macro exercise in output saving). Maybe because I added ```java at the beginning and ``` at the end of the solution section? Should this be something else now? Also in the thresholding (binarization) module there are no colors at all anymore in the macro exercise.

[tischi]

Maybe because I added java at the beginning and at the end of the solution section?

In fact, I did not explore whether the changes that I did affect code in the solution sections. Currently I, think, I only do syntax highlighting based on file name extensions. Could you please point me to an example?

[tischi]

However, personally I liked that before there was also a color distinction between comments and code.

There still is...

[AnniekStok]

Hmm, for me both code and comments appear grey, e.g. here https://neubias.github.io/training-resources/output_saving/index.html in the macro exercise.

[tischi]

Could you please try using javascript instead of java ?

[AnniekStok]

Hmm I tried but both java and javascript look exactly the same to me (without color difference in the comments)

Also in python I don't see as nice color contrast as we had before.

Examples are the activities from the skeletonization module (below is how it was written in the md file)

[tibuch]

For me the current code-highlighting (Python) is very hard to read:

For me the colors feel optimized for a dark background.

[tischi]

The code that decides the highlighting is here: https://github.com/NEUBIAS/training-resources/blob/ca3515554da5d33302f80d4be9e8179a425cea6e/_layouts/module.html#L230

But I don't remember now where and whether we can influence what the python highlighting is doing. @unode can you help us there? I thought it was somewhere here but I am not sure...

[unode]

@tischi see https://github.com/NEUBIAS/training-resources/commit/53be809becf8e754172f8ea2d01a7e066fc69d04 where syntax.css was replaced with a different style. The old style is still present as syntax.css.old.

The CSS file specifies colors for all languages except different language keywords are highlighted differently.

[tischi]

@tibuch would you be able to dig into this and see whether you can find better colours for python?