remarkjs/remark-github

Do not add a `strong` node in mentions

ben-eb opened this issue Β· 12 comments

Firstly, thanks for the module! πŸ‘

I wonder if it would be possible to provide an option to turn off the bold formatting for things like @mentions? I think it's better to have this in CSS instead; just because GitHub make these bold it doesn't mean we have to! πŸ˜„

Nice idea; another alternative might be to add classes using htmlAttributes, where you could set font-weight: normal too?

Adding classes to the generated links would be pretty good, so long as they were configurable. As long as we're not doing <strong class="x"></strong> .x{font-weight: normal}. πŸ˜„

I believe github uses pretty standard and logical classes for their special markup, I'll dig in and see what I find out. Would you be willing to PR?

I found these classes as used by GH:

  • SHA references: commit-link;
  • PR/Issue references: issue-link;
  • User references: user-mention.

What exactly am I sending a pull request for? Removing the strong tags entirely and replacing with GitHub style class names?

I’d say to keep the current nodes in place: strong is closest to how GH renders them, plus class names only work for HTML, whereas remark-github works for markdown too.

So: I prefer to keep the current nodes in place, but with htmlAttributes.class added.

@wooorm If we're going for consistency with GitHub's rendering, we shouldn't include a strong tag at all. GitHub also do the bold formatting with CSS.

Let me try another tack. Can we make the strong output optional? Personally I don't want to render strong tags. Can I have an off by default option?

Drop the HTML for a second. The following code, in a GH issue:

@wooorm

[**@wooorm**](https://github.com/wooorm)

[@wooorm](https://github.com/wooorm)

Yields:

@wooorm

@wooorm

@wooorm


The first is of course custom for GH (a real mention), but the second (strong importance wrapped in an anchor)

Now, remark-github exists so I can write @wooorm in READMEs and still have it link to a user (among other places), but it should work in markdown, not just HTML, and look similar to GHs own styling. Which the last example (just an anchor) does not.

That’s why I added an MDAST strong node in 067fdc5.

Now, for HTML, you need to colour that link black. GitHub has the following declaration:

.user-mention, .team-mention {
    font-weight: bold;
    color: #333;
    white-space: nowrap
}

And, if the by remark-github exposed node is as follows:

{
  "type": "link",
  "href": "https://github.com/wooorm",
  "data": { "htmlAttributes": { "class": "user-mention" } },
  // ...
}

This markdown, processed with remark-github and remark-html:

@wooorm

Yields:

<a href="https://github.com/wooorm" class="user-mention"><strong>@wooorm</strong></a>

Which works with GHs CSS declaration to create the correct style.


So, I believe just adding classes will make exact styling as GH possible, but keep non-HTML presentations as similar as possible too.

But, if you still dislike the strong tag, I’m up for adding an option to not add it though!

@ben-eb interested in working on the by me suggested approach? If not, I'll do it!

I would still prefer that the strong tags would be removed, as GitHub themselves handle this with CSS and not strong tags. I don't even care that it is not the default, I asked already for an off by default option. I don't think my request was unreasonable.

Done! I did just the thing you asked for though, classes will have to wait for someone to work on it :)

Thanks!