github / markup

Determines which markup library to use to render a content file (e.g. README) on GitHub
MIT License
5.88k stars 3.4k forks source link

Suggestion: Make prompt symbols unselectable #1223

Open Alhadis opened 6 years ago

Alhadis commented 6 years ago

On some sites, Bash snippets and command examples are shown with a leading prompt symbol ($ or #). A common bit of UX garnish is to make that symbol unselectable, so that selecting and copying the code won't pick up the leading symbol.

We can easily do the same on GitHub for fenced code-blocks which use console as a language:

```console
$ curl -s https://foo.bar/install.sh | bash
$ sudo install ./some-file
$ sh /path/to/file
```

Implementation would require two things:

  1. Tokenisation of two scope-names used by the grammar that highlights console blocks: entity.other.prompt-prefix.shell-session punctuation.separator.prompt.shell-session Currently, these get ignored by GitHub's syntax highlighter (this might require changes from Primer)

  2. The following CSS applied to the tokenised prompt symbols:

    /* Assuming a Primer class name of ".pl-ps" (Prompt String) */
    .pl-ps {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

The benefit would be quicker copy+paste, and less confusion amongst novice users who incorrectly include prompt symbols when following a program's setup instructions.

There'd be no adverse effects: authors who happen to want prompt symbols selectable can do so using bash for highlighting instead of console.

Thoughts?

kivikakk commented 6 years ago

I don't think the markup gem has anything to do with this feature request, so it should go to support instead! Otherwise I'm pretty sure no-one will see it.

Alhadis commented 6 years ago

Done.

I, uh, see this is still an issue.

screenshot-2018-8-30 build software better together

Bear in mind, I did report that as a confusing UX wart to site support a while back...

pchaigno commented 5 years ago

@lukehefson @talsafran I think this would be a good candidate for the "quick UX wins" program!

lukehefson commented 5 years ago

lukehefson @talsafran I think this would be a good candidate for the "quick UX wins" program!

Thanks @pchaigno! Yup, we're continuing to investigate the plausibility of this as a Papercuts ship!

pchaigno commented 5 years ago

@lukehefson - Great! If you decide to go for it, and there's any change needed in Markup or Linguist, let @Alhadis or I know and we can help!