TwistedTwigleg / vanilla-bootstrap

Kickstart your Vanilla-powered community forums with a fresh and solid theme that is ready to be customized to your heart's desires.
http://vanillaforums.org/addon/bootstrap-theme
MIT License
0 stars 0 forks source link

Code highlighting #27

Open Megalomaniak opened 5 years ago

Megalomaniak commented 5 years ago

So there are couple of issues with the code block worth bringing up in here.

First of all our current theme has a gray rounded box for the code block, which is actually not too dissimilar to the engine website: https://godotengine.org/article/optional-typing-gdscript

But I feel that might fit better for the inline code bits like this, which currently is more pink/reddish rather than gray.

But more importantly the current code block only displays line numbers for every fifth line and it causes the empty lines to get cut off, which I think is a real issue. This could be considered an actual theme bug, but also should be pretty easy to fix I think. I've opened a separate issue for it(#28).

And then finally, last but not least I'm thinking it would be nice to look into adding a GDScript specific coloring to the code block and maybe try to emulate the color scheme of the godot editors code editor itself in our theme..?

Would need to investigate if this is best done in our theme or the codeblock addon(syntax prettifier), may even be best to maybe integrate the addon straight into our theme addon?

I do have my doubts about this last bit, but since we have multiple color themes to chose from within the theme addon, maybe a good way to go? Again, might have to investigate a bit to properly figure out the best way to go...

Then again, if we took the direction to modify the dark theme to follow godot editors color scheme, maybe the code block could have the same color theme for both lightly and darkly, hmm...

Anyways, thoughts?

TwistedTwigleg commented 5 years ago

I agree that the code block could use some more work.

Changing the inline-code block to a gray rather than pink/reddish makes sense and would be more universal across the board. I haven't looked yet, but it should be fairly easy to do. Worse case, we just need to apply additional CSS.

Using a Godot-Like code theme would be cool. I wonder if the Godot editor theme would look good with the Godot Darkly theme too, because if it does we could just use the same code style on both themes. That might save us some time.

I think actually styling the code tags itself shouldn't be too hard, but adding syntax highlighting might be a tad more difficult.

With the syntax prettifier plugin, we can probably reuse a lot of the syntax highlighting from Python, assuming it has Python syntax highlighting. Because Python and GDScript use a lot of the same keywords, we might save ourselves some time. That said, I did a quick look and I couldn't actually find the syntax prettifier plugin on my local machine. I'll have to take a closer look later, but hopefully it will not be too hard to add support for another language. While I was looking, I noticed that the syntax prettifier settings mentions you can override their default CSS, which might be exactly what we are looking for, assuming we can add GDScript support.

All of that said, I think we should try to keep things as simple as possible, at least initially.

Megalomaniak commented 5 years ago

Ah, I think it lies inside of the GooglePrettify folder in plugins? I guess that was it's old name or it's possibly derived from: https://github.com/google/code-prettify

Megalomaniak commented 4 years ago

Just going to leave this here for future reference: https://github.com/godotengine/godot-syntax-themes