New syntax highlighting styles

[chrissimpkins]

@burodepeper

I connected the MinimalLight and MinimalDark styles to two new rendering scripts in the image-scripting branch. You can pull this to your repo to continue working on it.

https://github.com/chrissimpkins/codeface/tree/image-scripting

To test the rendered images, use these two commands in the scripts directory:

Light

python render_light.py -t ../samplecode/samplecode.c --lang c -x 2175 -i light.png -f "Hack 14" -p 20 -b "

Dark

python render_dark.py -t ../samplecode/samplecode.c --lang c -x 2175 -i dark.png -f "Hack 14" -p 20 -b "#33333fff"

For some reason, it appears that you need to set the background color in the command itself. Use the -b option for this. It wasn't necessary in the light theme because you used #FFF as the background. It doesn't seem to pick it up from the style.

The images will render as light.png and dark.png in the same directory. We can modify the out file paths down the road when we have something in place that we like.

[burodepeper]

For some reason, it appears that you need to set the background color in the command itself. Use the -b option for this. It wasn't necessary in the light theme because you used #FFF as the background. It doesn't seem to pick it up from the style.

I believe it is because I haven't specified a default style, neither for the light or dark variant, but I will do so whenever I finally get this thing working...

[chrissimpkins]

@burodepeper

Dark (without bg settings in command)

python render_dark.py -t ../samplecode/samplecode.c --lang c -x 2175 -i dark.png -f "Hack 14" -p 20

Dark (with bg settings in command)

python render_dark.py -t ../samplecode/samplecode.c --lang c -x 2175 -i dark.png -f "Hack 14" -p 20 -b "#33333fff"

Light

python render_light.py -t ../samplecode/samplecode.c --lang c -x 2175 -i dark.png -f "Hack 14" -p 20

[chrissimpkins]

Let me know if that is not what you expect. As I was reading through the Pygments docs last night it mentioned something about registering new highlighters. I have not done that and this could be the problem.

[burodepeper]

It is not how I expected, but I see what's missing. If I get pycairo up and running, I'll start fixing things up.

[chrissimpkins]

I modified the above post with the python commands to generate the images

[chrissimpkins]

@burodepeper: Standard output from text rendered on this line (before conversion to Pango formatting):

<span style="color: #888888; font-style: italic">// sample code from commit.c of the Git repository (https://github.com/git)</span>

<span style="color: #ffdd00">struct</span> <span style="color: #ffdd00">commit</span> <span style="color: #cccccc">*</span><span style="color: #ffdd00">lookup_commit_or_die</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">const</span> <span style="color: #ff00cc; font-weight: bold">unsigned</span> <span style="color: #ff00cc; font-weight: bold">char</span> <span style="color: #cccccc">*</span><span style="color: #ffdd00">sha1</span><span style="color: #cccccc">,</span> <span style="color: #ffdd00">const</span> <span style="color: #ff00cc; font-weight: bold">char</span> <span style="color: #cccccc">*</span><span style="color: #ffdd00">ref_name</span><span style="color: #cccccc">)</span>
<span style="color: #cccccc">{</span>
    <span style="color: #ffdd00">struct</span> <span style="color: #ffdd00">commit</span> <span style="color: #cccccc">*</span><span style="color: #ffdd00">c</span> <span style="color: #cccccc">=</span> <span style="color: #ffdd00">lookup_commit_reference</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">sha1</span><span style="color: #cccccc">);</span>
    <span style="color: #ffdd00">if</span> <span style="color: #cccccc">(!</span><span style="color: #ffdd00">c</span><span style="color: #cccccc">)</span>
        <span style="color: #ffdd00">die</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">_</span><span style="color: #cccccc">(</span><span style="color: #00b3cc; font-weight: bold">&quot;could not parse %s&quot;</span><span style="color: #cccccc">),</span> <span style="color: #ffdd00">ref_name</span><span style="color: #cccccc">);</span>
    <span style="color: #ffdd00">if</span> <span style="color: #cccccc">(</span><span style="color: #ffdd00">hashcmp</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">sha1</span><span style="color: #cccccc">,</span> <span style="color: #ffdd00">c</span><span style="color: #cccccc">-&gt;</span><span style="color: #ffdd00">object</span><span style="color: #cccccc">.</span><span style="color: #ffdd00">sha1</span><span style="color: #cccccc">))</span> <span style="color: #cccccc">{</span>
        <span style="color: #ffdd00">warning</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">_</span><span style="color: #cccccc">(</span><span style="color: #00b3cc; font-weight: bold">&quot;%s %s is not a commit!&quot;</span><span style="color: #cccccc">),</span>
            <span style="color: #ffdd00">ref_name</span><span style="color: #cccccc">,</span> <span style="color: #ffdd00">sha1_to_hex</span><span style="color: #cccccc">(</span><span style="color: #ffdd00">sha1</span><span style="color: #cccccc">));</span>
    <span style="color: #cccccc">}</span>
    <span style="color: #ffdd00">return</span> <span style="color: #ffdd00">c</span><span style="color: #cccccc">;</span>
<span style="color: #cccccc">}</span>

[burodepeper]

Good! That is definitely something I can work with, I think.

[chrissimpkins]

@burodepeper: Standard output from text rendered at this line (after conversion to Pango formatting)

<span foreground="#888888" style="italic" >// sample code from commit.c of the Git repository (https://github.com/git)</span>

<span foreground="#ffdd00" >struct</span> <span foreground="#ffdd00" >commit</span> <span foreground="#cccccc" >*</span><span foreground="#ffdd00" >lookup_commit_or_die</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >const</span> <span foreground="#ff00cc" weight="bold" >unsigned</span> <span foreground="#ff00cc" weight="bold" >char</span> <span foreground="#cccccc" >*</span><span foreground="#ffdd00" >sha1</span><span foreground="#cccccc" >,</span> <span foreground="#ffdd00" >const</span> <span foreground="#ff00cc" weight="bold" >char</span> <span foreground="#cccccc" >*</span><span foreground="#ffdd00" >ref_name</span><span foreground="#cccccc" >)</span>
<span foreground="#cccccc" >{</span>
    <span foreground="#ffdd00" >struct</span> <span foreground="#ffdd00" >commit</span> <span foreground="#cccccc" >*</span><span foreground="#ffdd00" >c</span> <span foreground="#cccccc" >=</span> <span foreground="#ffdd00" >lookup_commit_reference</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >sha1</span><span foreground="#cccccc" >);</span>
    <span foreground="#ffdd00" >if</span> <span foreground="#cccccc" >(!</span><span foreground="#ffdd00" >c</span><span foreground="#cccccc" >)</span>
        <span foreground="#ffdd00" >die</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >_</span><span foreground="#cccccc" >(</span><span foreground="#00b3cc" weight="bold" >&quot;could not parse %s&quot;</span><span foreground="#cccccc" >),</span> <span foreground="#ffdd00" >ref_name</span><span foreground="#cccccc" >);</span>
    <span foreground="#ffdd00" >if</span> <span foreground="#cccccc" >(</span><span foreground="#ffdd00" >hashcmp</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >sha1</span><span foreground="#cccccc" >,</span> <span foreground="#ffdd00" >c</span><span foreground="#cccccc" >-&gt;</span><span foreground="#ffdd00" >object</span><span foreground="#cccccc" >.</span><span foreground="#ffdd00" >sha1</span><span foreground="#cccccc" >))</span> <span foreground="#cccccc" >{</span>
        <span foreground="#ffdd00" >warning</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >_</span><span foreground="#cccccc" >(</span><span foreground="#00b3cc" weight="bold" >&quot;%s %s is not a commit!&quot;</span><span foreground="#cccccc" >),</span>
            <span foreground="#ffdd00" >ref_name</span><span foreground="#cccccc" >,</span> <span foreground="#ffdd00" >sha1_to_hex</span><span foreground="#cccccc" >(</span><span foreground="#ffdd00" >sha1</span><span foreground="#cccccc" >));</span>
    <span foreground="#cccccc" >}</span>
    <span foreground="#ffdd00" >return</span> <span foreground="#ffdd00" >c</span><span foreground="#cccccc" >;</span>
<span foreground="#cccccc" >}</span>

[chrissimpkins]

Good! That is definitely something I can work with, I think.

:+1:

[chrissimpkins]

These are both from the render_dark.py script

[chrissimpkins]

Move away from Pygments highlighter in PR https://github.com/chrissimpkins/codeface/pull/132

[chrissimpkins]

Updates to the scripts that are used to render syntax highlighter colors begin at commit https://github.com/chrissimpkins/codeface/commit/3662df0fc1c36b6b4091f776b3966a2979c36dd9

[chrissimpkins]

Test script added to assess markup changes without the need for Pango/Cairo libraries:

https://github.com/chrissimpkins/codeface/blob/image-scripting/scripts/render_tester.py

Prints the rendered HTML following Pango style markup modifications to standard output.

[chrissimpkins]

Current images:

Executed with:

python render_david.py  -x 2175 -i test.png -f "Hack 14" -p 20

style is modified in the script as of now

Light

Dark

[chrissimpkins]

PR #133

[chrissimpkins]

Here’s where we are with the current iteration of the script and syntax highlighter definitions:

Dark

Light

[chrissimpkins]

@burodepeper I will make a few example sets of the new gallery specimens so that we can have a look at all of them together across a few fonts. :+1:

[chrissimpkins]

@burodepeper should struct be highlighted using the bold color definition along with the other built in C types (unsigned char and char)?

[burodepeper]

Possibly. I have no idea what struct is ; ) I you say they're "on the same level" as unsigned char etc, then yes. If it is more similar to const, then no.

[chrissimpkins]

built in C type:

https://en.wikipedia.org/wiki/Struct_%28C_programming_language%29

[chrissimpkins]

Common to use different highlighting in function parameters vs outside of the parameter list for built in types? Haven’t ever paid attention to this.

[burodepeper]

Hmm, I'm reading the wikipedia example, and from their examples, I think it is better that it stays the way it is. Or otherwise const would have to change too.

I don't know what is common. I'm following my own reasoning here, and the syntax and syntax_alt colors are used to (amongst other things) to display the structural elements of the language. The alt variant is reserved when multiple elements are located near each other and some form of hierarchy is desirable. Come to think of it, perhaps commit (also something c-related I suppose?) should be colored as syntax_alt, so the eye is drawn to the function name, instead of the (in my opinion) secondary level of information contained in struct and commit. unsigned char and char could be considered syntax_alt too, but partly because I want to spruce things up, and partly because I believe elementary data-types are kind of 'constants' they are colored as such.

All in all, I don't think this example of C shows of the coloring as best as possible, because it seems (to me at least) a little bit of a random piece of code, instead of something specifically chosen to display the principles behind the syntax highlighting.

Yeah, I think the commits should be marked as syntax_alt, and then it is good enough for now. I don't mind coming up with some other default code, but I'm almost certain it's going to be Javascript, and you're probably not going to like that! ; )

[chrissimpkins]

Feel free to provide some examples here or push them to our source specimen repository and we can decide if there is a better approach. I am open to a change in the code block. Now that we have automated/scripted images, we can iterate on the specimens to make them better without a significant amount of effort.

[chrissimpkins]

I'd like to try to keep the height of the images similar (or ideally even less height) rather than each font having a long block of code associated with it. It is intended to be a taste not a five course meal.

[burodepeper]

I understand. I'll put it on my list, but the current specimen is good enough.

[chrissimpkins]

Will move forward with these specimens for now. For another time.

[burodepeper]

Yep, for another time. I am actually thinking of coming up with a specimen that is not of an existing language, but just looks like source code.

[chrissimpkins]

Pseudo code is fine too. We are using a pseudocode block for the commonly confused char specimen.

[chrissimpkins]

Added new images for Anonymous Pro in the image-scripting branch README.md:

https://github.com/chrissimpkins/codeface/tree/image-scripting

[chrissimpkins]

I am going to do a run through to confirm that I have the current release versions of all of the main gallery fonts and then will generate all of the images. We are getting close.

[chrissimpkins]

Looks like we may need to create a new gallery for the bitmap fonts. It doesn't look like they are going to display well with this automated rendering approach.

https://github.com/chrissimpkins/codeface/tree/image-scripting

[chrissimpkins]

New styles are now merged to master branch