Support for visual color helper when a HEX/RGB color code is written

[shreshthmohan]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

In GitHub issues, when you write a color code like #ff9145, it adds a small span with the color set as background-color

GitHub issues screenshot:

But I checked the generated markup and has a simple <code> tag without any visual color helper.

Solution

Can we have this feature? If yes, I am not sure about how to proceed with a contribution. Will it be a new extension like micromark-extension-gfm-color?

Alternatives

One could manually add a span with the same background color as written in the code block, but it won't be an ideal solution.

[wooorm]

Color “chips” aren’t part of the GFM spec, which is what these packages do. They’re part of what GH does in certain places (comments/issues/PRs), afterwards, while postprocessing the HTML.

Here’s an transform you can use on the hast (html ast) to match GH though:

/**
 * @typedef {import('hast').Root} Root
 */

import {visit} from 'unist-util-visit'
import {toString} from 'hast-util-to-string'

// ...

  visit(tree, 'element', function (node) {
    if (node.tagName === 'code' && node.properties) {
      const value = toString(node)
      if (/^#[\da-f]{6}$/i.test(value)) {
        node.children.push({
          type: 'element',
          tagName: 'span',
          properties: {
            className: [
              'ml-1',
              'd-inline-block',
              'border',
              'circle',
              'color-border-subtle'
            ],
            style: 'background-color: ' + value + '; height: 8px; width: 8px;'
          },
          children: []
        })
      }
    }
  })

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[shreshthmohan]

@wooorm Thanks for the pointers. 🙏🏽 I published a rehype plugin for this: https://www.npmjs.com/package/rehype-color-chips

[wooorm]

Cool! It's a fun little feature. I wonder why GH doesn't support other colors, or do similar small useful things to common code examples :)