codethesaur.us icon indicating copy to clipboard operation
codethesaur.us copied to clipboard

Published 20 hours ago • verified publisher icon codethesaurus

Improve Syntax highlighting

Open cafce25 opened this issue 2 years ago • 19 comments

Expected Behavior

Syntax highlighting does a good job and highlights strings, variables, function/method calls,

Actual Behavior

Only a few keywords and strings are highlighted, the strings barely noticable. bad highlight example

Steps to Reproduce the Problem

  1. Visit any reference / comparision page

Additional Info

There is a few things we can look into here:

  1. Change the pygments color scheme we use so the few things that are highligted are clearly visible
  2. Look into pygments settings if we can get more things highligted (different Lexer?)
  3. Contribute to upstream pygments to get better highligting
  4. Switch from pygments to something else entirely

cafce25 avatar Oct 18 '22 11:10 cafce25

I think like you mentioned, some of it is we have code snippets and not full pieces of running code, so their highlighters might not fully know everything to highlight.

3/4 are outside of the scope of a ticket here. We can see if anyone wants to look into 1/2.

geekygirlsarah avatar Oct 18 '22 13:10 geekygirlsarah

@geekygirlsarah I wouldn't mind looking into 1/2!

Shreya-7 avatar Oct 23 '22 18:10 Shreya-7

While you're at 1 maybe you can include a way the user can decide which colorscheme is used, that way we don't have to decide (we can't anyways) what they can read.

cafce25 avatar Oct 23 '22 18:10 cafce25

@cafce25 Hmm, that makes sense. I can start looking into the basic asks here, and when I'm done I can try to implement this new functionality..

Couple more questions about it though:

  1. Are we talking about something like a dropdown on the reference page that the user can choose from?
  2. Would we allow the user to choose a scheme that would be applied globally or on every reference page? Say, if they want to use scheme1 when reading exception handling in Java, but scheme2 when reading classes in Ada versus choosing scheme1 on the homepage that gets applied across the board.
  3. Do we want to persist user preference so they do not have to select every time they visit the page? I don't think we support any customisations like that since we don't have sessions for a user. With a quick glance at the models we have, I can see we have something called SiteVisit but I'm not sure useful that would be.

Shreya-7 avatar Oct 24 '22 05:10 Shreya-7

The main reason why I bring this up is because I don't think 1 can be solved by us alone.

  1. Are we talking about something like a dropdown on the reference page that the user can choose from?

I'd say anything that you come up with is fine.

  1. Would we allow the user to choose a scheme that would be applied globally or on every reference page?

I think supporting a single global setting is good enough.

  1. Do we want to persist user preference so they do not have to select every time they visit the page? I don't think we support any customisations like that since we don't have sessions for a user. With a quick glance at the models we have, I can see we have something called SiteVisit but I'm not sure useful that would be.

Definitely persist it, but since it's a local change that we don't need to know of or care for imo just putting it in their local store or saving it in a cookie should be fine.

cafce25 avatar Oct 24 '22 06:10 cafce25

Got it. I think I have all I need to get started.

Shreya-7 avatar Oct 24 '22 19:10 Shreya-7

I'll still watch over #641 but I'm wondering if this feature is starting to get a bit wild and outside of scope of something that makes a lot of sense to maintain. Pygments is designed to highlight really large segments of code and we don't really use them here. And I don't know that adding in a ton of settings for something so simple really seems worth the effort.

geekygirlsarah avatar Oct 29 '22 19:10 geekygirlsarah

This issue has been inactive for 342 hours (14.25 days) and will be unassigned after 66 more hours (2.75 days). If you have questions, please leave a comment, message @codethesaurus or @geekygirlsarah on Twitter, or email [email protected].If you are still working on this issue, that's fine. Please comment here to tell the bot to give you more time.

github-actions[bot] avatar Nov 13 '22 01:11 github-actions[bot]

I'm going to ask another friend or two what they think, so commenting to leave this open.

geekygirlsarah avatar Nov 14 '22 02:11 geekygirlsarah

This issue has been inactive for 346 hours (14.42 days) and will be unassigned after 62 more hours (2.58 days). If you have questions, please leave a comment, message @codethesaurus or @geekygirlsarah on Twitter, or email [email protected].If you are still working on this issue, that's fine. Please comment here to tell the bot to give you more time.

github-actions[bot] avatar Nov 28 '22 12:11 github-actions[bot]

I'll comment to leave this open.

I closed the PR due to inactivity from @Shreya-7. I'm open to continuing discussions on this, but kind of thinking a solution might be dramatically more effort than is worth given how CT works.

geekygirlsarah avatar Nov 28 '22 15:11 geekygirlsarah

Not sure what's waiting on me here, I thought we were getting second opinions from other folks? Do let me know if that's not the case or if I'm missing something!

Shreya-7 avatar Nov 28 '22 16:11 Shreya-7

There was more recent discussion on the PR than on here, and there were still open questions there that never got answered.

geekygirlsarah avatar Nov 28 '22 18:11 geekygirlsarah

Got it, if the functionality on the PR seems a bit overkill maybe we can just replace the current colour scheme with a better one and call it a day?

The way I think the scheme is implemented in CT is that the CSS file was manually generated locally, referenced in the HTML and added to the repo. We can do the same for the new one that I had selected. Does that sound good?

Shreya-7 avatar Nov 29 '22 18:11 Shreya-7

This issue has been inactive for 343 hours (14.29 days) and will be unassigned after 65 more hours (2.71 days). If you have questions, please leave a comment, message @codethesaurus or @geekygirlsarah on Twitter, or email [email protected].If you are still working on this issue, that's fine. Please comment here to tell the bot to give you more time.

github-actions[bot] avatar Dec 14 '22 01:12 github-actions[bot]

I tried using PrismJs for syntax highlighting (client side).

Here are two sample pages

It requires us to serve two static files

  • prism.js (~80K): including support for different programming languages.
  • prism.css (~3K): colorscheme (List of themes).

changes in application to implement this method

prismjs.com

chetan-satpute avatar Dec 14 '22 09:12 chetan-satpute

This issue has been inactive for 339 hours (14.13 days) and will be unassigned after 69 more hours (2.88 days). If you have questions, please leave a comment, message @codethesaurus or @geekygirlsarah on Twitter, or email [email protected].If you are still working on this issue, that's fine. Please comment here to tell the bot to give you more time.

github-actions[bot] avatar Dec 28 '22 12:12 github-actions[bot]

This issue has been inactive for 411 hours (17.13 days) and is past the limit of 408 hours (17.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you for your interest in contributing to this project.

github-actions[bot] avatar Dec 31 '22 12:12 github-actions[bot]

Those prism examples above look like they work nicely with minimal changes

aedwardg avatar Sep 10 '23 15:09 aedwardg