Add customizable syntax highlighting for generic placeholders

[EmilyGraceSeville7cf]

Add a customizable syntax highlighting for generic placeholders:

• strings:
  • default: highlight quotes and content inside them with orange color
  • settings: quotes and content color can be changed just together
• numbers
  • default: highlight integers and floats in cyan color
  • settings: integer and float colors can be changed just together
• ranges
  • default:
    • highlight borders (integer or float numbers) in cyan
    • highlight -infinity and infinity keywords in blue
    • highlight .. in light cyan
  • settings: can be customized for 3 different aspects separately
• path placeholders
  • default: highlight paths in red, while highlighting their separators in dark red
  • settings: can be customized for 3 different aspects separately
• placeholders with ellipsis
  • defaults:
    • all defaults listed above applies for ellipsis placeholders
    • ... is highlighted as gray
  • settings: only changing ... color is supported, all other settings are being set for concrete placeholder types

[rwv]

Is there any example for highlighting? thank you!

[EmilyGraceSeville7cf]

Yeah, our official Python client supports highlighting, but in a much simplified manner: just placeholder content is emphasized (without respect of the kind of it).

[rwv]

python color code:

https://github.com/tldr-pages/tldr-python-client/blob/c7d70091e958d1ccddd1e038578ad9ee897c5358/tldr.py#L344-L369

[EmilyGraceSeville7cf]

I think that a proper parser can be written to process placeholders. We already have tldr-lint, check it out how pages are analyzed for smells, maybe you find smth useful. But for the beginning regex based highlighting can be used. This is how tldr client for Emacs works AFAIK.

[rwv]

Branch

syntax-highlighting

Demo

https://syntax-highlighting.tldr-inbrowser-app.pages.dev/

TODO

• decide a highlight color theme with light and dark mode
• replace more syntax
• find a style for mnemonics
• customize color

[rwv]

To achieve better synatx highlighting, we need to parse the markdown by ourself as well. marked.parse only returns raw html which doesn't quite compatiable with vue. As a result, some functionalities such as copy to clipboard cannot be implemented.

[EmilyGraceSeville7cf]

I am glad to see syntax highlighting enabled. 😄