Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support syntax highlighting for fenced code block #2011

Open
jubalfh opened this issue Dec 15, 2022 · 8 comments · May be fixed by #2457
Open

support syntax highlighting for fenced code block #2011

jubalfh opened this issue Dec 15, 2022 · 8 comments · May be fixed by #2457

Comments

@jubalfh
Copy link

jubalfh commented Dec 15, 2022

Pitch

allowing syntax highlighting for fenced code blocks would greatly improve the readability of the code, and if paired with ability to mark specific lines or blocks of lines, it would enhance comments on the code snippets significantly.

Motivation

glitch-soc already supports fenced code blocks – this would offer just a visual enhancement of the feature; the target audience is the same as the users of markdown and fenced code blocks.

@Plastikmensch
Copy link

I support this in theory, but will be a huge undertaking and I'm not sure it's worth the work required for this.
You would have to first create a list of supported code languages, define the syntax for each, run RegEx over the code blocks and add the styling to it.
It makes sense for GitHub to do, but I don't think it makes sense for Glitch.

@jubalfh
Copy link
Author

jubalfh commented Dec 15, 2022

ah, but this is a solved problem for a very long time: see for example highlight.js

@Plastikmensch
Copy link

Plastikmensch commented Dec 15, 2022

Okay, I played around a bit:
Language detection is wonky at best.
The js test code I used got either detected as arcade or awk.
I would let users specify the language, similar to how github does it.
This needs modification of markdown processing as that is being stripped.
It "works" by making a few adjustments to status_content.js, running highlight on contentHtml.
It's very error prone though, as this needs careful string manipulation to get anything between html tags inside code blocks.

@Plastikmensch
Copy link

Plastikmensch commented Dec 15, 2022

To illustrate the problem:
Specifying js:
Screenshot_2022-12-15_20-28-57

Not specifying js (autodetection):
Screenshot_2022-12-15_20-25-42

@jubalfh
Copy link
Author

jubalfh commented Dec 16, 2022

i guess that to be on the safe side, the highlighter should not be run unless the language is explicitly specified – or it should be run with the plaintext format explicitly.

@Plastikmensch
Copy link

Plastikmensch commented Dec 16, 2022

i guess that to be on the safe side, the highlighter should not be run unless the language is explicitly specified – or it should be run with the plaintext format explicitly.

Agreed.
Again, this requires modification to the Markdown processor, because anything immediately after ``` gets stripped, and it needs to be passed to the frontend, so it can be used.
It should not run at all if no language is specified imo though.

Edit:
Ah, it's not the processor, but the sanitation.

@ionathanch
Copy link

I'd really like this, what's the status on the draft PR?

@Plastikmensch
Copy link

Plastikmensch commented Oct 26, 2023

I'd really like this, what's the status on the draft PR?

It should be working fine, but I don't like how much of a mess it became and would rather redo it.
The main issue was that glitch-soc doesn't add a background to code blocks, which messes up highlighting in the reply preview and because of that any language value was available in the preview. The latter was fixed by only allowing valid languages in the backend and remove it there before it's passed to the frontend.
It still needs a change to work with translated toots.

TL;DR: I'm not happy with it in it's current state and needs some updates.

@Plastikmensch Plastikmensch linked a pull request Nov 3, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants