Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Font with Built-In Syntax Highlighting (2024)

blog.glyphdrawing.club

Post reply on HN
Print view View original

21–30 of 39 posts

Re: Font with Built-In Syntax Highlighting (2024)

#21

Post by onion2k »

mg wrote: post #18

This is interesting. I have yet to see a good web based text editor with syntax highlighting. They all mess with the native search functionality of the browser. Because they can't just use a textarea for the edit area. With this approach, it would be possible. I wonder how usable a Python version of this would be?

I have yet to see a good web based text editor with syntax highlighting.

I slightly expect you to pull a "no true Scotsman" here and suggest it's actually no good because it doesn't really support mobile browsers very well, but Microsoft's Monaco editor that's driven from VS Code is quite good. https://microsoft.github.io/monaco-editor/

Re: Font with Built-In Syntax Highlighting (2024)

#22

Post by mg »

onion2k wrote: post #21
mg wrote: post #18

This is interesting. I have yet to see a good web based text editor with syntax highlighting. They all mess with the native search functionality of the browser. Because they can't just use a textarea for the edit area. With this approach, it would be possible. I wonder how usable a Python version of this would be?

I have yet to see a good web based text editor with syntax highlighting. I slightly expect you to pull a "no true Scotsman" here and suggest it's actually no good because it doesn't really support mobile browsers very well, but Microsoft's Monaco editor that's driven from VS Code is quite good. https://microsoft.github.io/monaco-editor/

It seems to have the same problems all of the web based editors I have seen have. Either they capture ctrl+f and take away the native search experience. Or they have a broken search experience. This one is in the latter category.

When I hit ctrl+f on that page and type "export":

First it says "1 of 4 matches" but nothing is highlighted.

When I hit enter, it says "2 of 4 matches" and again, nothing is highlighted.

When I hit enter again, it says "3 of 4 matches" and the first match is highlighted.

When I hit enter again, it says "4 of 4 matches" and the second match is highlighted.

Re: Font with Built-In Syntax Highlighting (2024)

#23

Post by mg »

gethly wrote: post #20
mg wrote: post #18

This is interesting. I have yet to see a good web based text editor with syntax highlighting. They all mess with the native search functionality of the browser. Because they can't just use a textarea for the edit area. With this approach, it would be possible. I wonder how usable a Python version of this would be?

FYI, IDEs and editors too don't use "textarea". Contenteditable essentially makes the web browser work like editor does.

Contenteditable plus the CSS Custom Highlight API (which highlights ranges instead of elements) might indeed allow for a good solution. But I have not yet seen an editor that does that.

Re: Font with Built-In Syntax Highlighting (2024)

#24

Post by spockz »

layer8 wrote: post #16
spockz wrote: post #9

Has anyone tried this with PowerPoint yet? Our org is very PowerPoint centric and always struggle a bit with the workflow for code. Copy pasting from IntelliJ does give colours but none of the other niceties such as kerning or litigation. Screenshots are nice visually but a pain to maintain.

*ligatures Is kerning a thing for monospace fonts?

Yes, ligatures. No idea where “litigations” came from.

I think there is still some kerning going on where the individual letters are placed closer together and the entire word has the same width so more spacing in between words.

Re: Font with Built-In Syntax Highlighting (2024)

#25

Post by spockz »

Sayrus wrote: post #10
spockz wrote: post #9

Has anyone tried this with PowerPoint yet? Our org is very PowerPoint centric and always struggle a bit with the workflow for code. Copy pasting from IntelliJ does give colours but none of the other niceties such as kerning or litigation. Screenshots are nice visually but a pain to maintain.

From the article cons section: > It only works where OpenType is supported. Fortunately, that's all major browsers and most modern programs. However, something like PowerPoint doesn't support OpenType.

Thank you, I missed that third sentence.

Re: Font with Built-In Syntax Highlighting (2024)

#26

Post by TheRealPomax »

> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript.

But then why does the color disappear if I disallow scripts on this page? Instead of your font, now it uses Consolas.

Are you using JS to load the font in? (if so... web fonts don't need JS to load =)

Re: Font with Built-In Syntax Highlighting (2024)

#27

Post by california-og »

TheRealPomax wrote: post #26

> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript. But then why does the color disappear if I disallow scripts on this page? Instead of your font, now it uses Consolas. Are you using JS to load the font in? (if so... web fonts don't need JS to load =)

Most likely because your JS blocker also blocks custom fonts. It works fine without JS.

Re: Font with Built-In Syntax Highlighting (2024)

#29

Post by hyperhello »

mg wrote: post #23
gethly wrote: post #20

Earlier quoted context omitted.

FYI, IDEs and editors too don't use "textarea". Contenteditable essentially makes the web browser work like editor does.

Contenteditable plus the CSS Custom Highlight API (which highlights ranges instead of elements) might indeed allow for a good solution. But I have not yet seen an editor that does that.

I built a prototype that does work. https://hypervariety.com/ScriptHighlighter/

Re: Font with Built-In Syntax Highlighting (2024)

#30

Post by TheRealPomax »

california-og wrote: post #27
TheRealPomax wrote: post #26

> The colors in the HTML snippet above comes from within the font itself, the code is plain text, and requires no JavaScript. But then why does the color disappear if I disallow scripts on this page? Instead of your font, now it uses Consolas. Are you using JS to load the font in? (if so... web fonts don't need JS to load =)

Most likely because your JS blocker also blocks custom fonts. It works fine without JS.

It does not: with JS blocked, the stylesheet for the webfont never gets injected. Even though it shouldn't need injecting in the first place.
Post reply on HN