Page MenuHomePhorge

Render html color codes in remarkup
Open, NormalPublic

Description

The patch D25540 tried to implement a nice a "Remarkup" rule (that is, "our Markdown") to create a small code block to show a color code, and render it with its color.

Unfortunately, this patch worked only in unit tests, and not in Remarkup.

rP4d12d014fd9d: Add PhutilRemarkupHexColorCodeRule, a new remarkup rule to format color codes

At the moment this feature is indicated as experimental and not working in the related changelog in 2024 week 19. See D25540.

What to do?

We have maybe some minutes to think about next steps.

Color Syntax from GitLab, GitHub, ...

Premising that Phorge does not necessarily want to give support to features from other platforms (because we think that Remarkup is superior bla bla)... it's wise to at least have awareness of other similar platforms.

In GitHub and GitLab this feature is provided using just simple backticks:

`#0969DA`

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#supported-color-models

https://docs.gitlab.com/ee/user/markdown.html#colors

So, in GitHub and GitLab this create a colorized code-block. This syntax would make sense also for Phorge and we should consider it.

WARNING: For some reasons, GitHub implements colors only for comments, not for README files 🤯

Proposed Color Syntax in Phorge

At the moment this was the proposed syntax in Phorge (so, with brackets, not backticks):

{#0969DA}

Note again that the above syntax does not work at the moment. Don't try it :)

Questions:

Q1: Whenever desired or not, is Phorge technically able to implement this feature with backticks just like other major platforms?

NOTE: Nobody tried this 🌈 Stub patch welcome to show a proof of concept! If you would like to, set your name here: ....

✅ Probably implementing this feature with just backticks is possible, to enable an easy transition with GitLab and GitHub (also, just mental transition). Maybe we can "just" try to expand PhutilRemarkupMonospaceRule that implements the backtick things.

✅ Or, probably, somebody may try to implement this without ever changing the backend, and just adding a new JavaScript rule.

...

Q2: Anyway, would we like to consider the backtick syntax, if ever technically possible?

NOTE: The question is NOT about Mermaid.js or other Markdown estensions that may be nonsense. This question is only about this colorized inline syntax, that may have sense.

✅ since this syntax is proposed to just introduce a colorized inline code, yes, it MAY semantically make sense to just adopt the backtick syntax.

🔶 we may want to consider the syntax color { #f00 } (just like we have cowsay { bla bla } or figlet { bla bla }) since this syntax will very-probably be super-stable and will work immediately without surprises. But, Valerio proposed this as "last desperate plan" if we are not able to implement backticks :D

🔶 worst case: if we adopt this backtick syntax, some things may become colorized. Anyway, if an use will see #f00 in red instead of gray is perhaps not such an interesting "breaking change" :D so, "coloring backticks" may be still super OK.

...

Until it does not work 🤔

  1. Answering Q1 about "are backticks possible"?
  2. Answering Q2 about "anyway, do we like backticks"?
  3. if answers are "yes", re-adapt 4d12d014fd9ddc423ecbc6a61a92217d5aff19a4 if answers are "no", fix that
    • anyway, let's ship this with some nice lovely documentation like in D25607

Event Timeline

This would be useful for discussions about design, specifically I wished for this feature while reviewing D25491: Improve contrast of Links in Dark Mode

20after4 triaged this task as Normal priority.

Well, you know what would be next level for a dev? If (s)he clicks on it, the color is copied to the clipboard. We can't use this behavior, because behaviors loose their state in the remarkup cache...

I'm somehow even more inclined to propose to base this feature on a new custom parser, like cowsay {{{ asd }}}

_______ < asd > ------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||

So, we could have something like color {{{ #0000ff }}}. That would be parser-safe, and it would also allow to support some interesting unexpected options in the future.

Or wrap a text with a background color - (something like What if I can change the background color here (and no italics)?)

I think I'm essentially echoing what valerio.bozzolan said, but since I'm not sure if I get their idea correctly... :P

EDIT: This was already reported and resolved in T15802: Regression: HTML entities rendered as plain text in config option descriptions, I'm keeping the comment just to track this.

Hi, D25540: Add PhutilRemarkupHexColorCodeRule, a new remarkup rule to format color codes is breaking formatting for me.
When I add a task comment containing an apostrophe (Like Let's Encrypt), the comment is rendered in the browser as Let&#039;s Encrypt.. The comment is stored correctly in the database. This is a fresh deployment of Phorge.

When I comment these two lines, rendering to html reverts back to normal:

diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
index 17b1e837a6..3b4a28219d 100644
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -12638,7 +12638,7 @@ phutil_register_library_map(array(
     'PhutilRemarkupEscapeRemarkupRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupEvalRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupHeaderBlockRule' => 'PhutilRemarkupBlockRule',
-    'PhutilRemarkupHexColorCodeRule' => 'PhabricatorRemarkupCustomInlineRule',
+    // 'PhutilRemarkupHexColorCodeRule' => 'PhabricatorRemarkupCustomInlineRule',
     'PhutilRemarkupHighlightRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupHorizontalRuleBlockRule' => 'PhutilRemarkupBlockRule',
     'PhutilRemarkupHyperlinkEngineExtension' => 'Phobject',
diff --git a/src/infrastructure/markup/PhabricatorMarkupEngine.php b/src/infrastructure/markup/PhabricatorMarkupEngine.php
index 84503048d0..df3880644c 100644
--- a/src/infrastructure/markup/PhabricatorMarkupEngine.php
+++ b/src/infrastructure/markup/PhabricatorMarkupEngine.php
@@ -526,7 +526,7 @@ final class PhabricatorMarkupEngine extends Phobject {
     $rules[] = new PhutilRemarkupEscapeRemarkupRule();
     $rules[] = new PhutilRemarkupEvalRule();
     $rules[] = new PhutilRemarkupMonospaceRule();
-    $rules[] = new PhutilRemarkupHexColorCodeRule();
+    // $rules[] = new PhutilRemarkupHexColorCodeRule();

     $rules[] = new PhutilRemarkupDocumentLinkRule();
     $rules[] = new PhabricatorNavigationRemarkupRule();

Yet it doesn't explain, why is it misbehaving like this.

@valerio.bozzolan yes, just now. I have only realized that there is a fix already after opening the ticket raised as a concern. Hadn't checked this in the past few days, so here I am, finally with my account approved and the issue is fixed. Thank you. :)

Anyway, even with this fix, for some reasons I can't still use this feature with a comment like {#0000ff} in my local installation 🤔 I'm confused since the unit test works.

Thanks again @20after4 for the efforts.

I followed "BE BOLD" and I've expanded a bit the description of this Task. Still thank you, and feel free to revert if you think it's too much :D thanks my friend

I was unaware of #0969DA syntax from github/gitlab. I'm not sure if I like that syntax better than {} but I am generally in favor of using the same syntax as other systems in order to converge towards defacto standardization.

I was unaware of `#0969DA` syntax from github/gitlab.

Ok I just tried it in a README context on github and it's not working for me. It just renders the color code in a grey background monospace, the same as current Phorge behavior. What am I missing?