Better highlight selection for bash code blocks (copy and paste)

[lakhman]

Currently when you double click on a bash code block, the $ is also selected.

By using the following jQuery snippet we can add a no-select to it to prevent it from being selected.

$(".highlight-bash pre span.nv:contains('$ ')").css('userSelect', 'none')

:contains seemed to suffice, maybe check if the element exactly contains the text to be 100% sure.

Could we add something like this to the symfony docs pages? It would make copy and paste that little bit easier. 😀 #lazy-programmer

This prevents the following when copy and pasting:

> $ composer require friendsofsymfony/user-bundle "~2.0@dev"
bash: $: command not found

👍

[javiereguiluz]

@lakhman I like this solution a lot. It's simple, it's clever and it works. Thanks!

I'm going to add it to symfony.com as soon as possible.

[javiereguiluz]

It's not important ... but our highlighter seems to be doing some strange things. .nv is for "Name.Variable" elements. But the $ should be highlighted as .gp for "Generic.Prompt".

In the Pygments website you can see the .gp in use for the Bash examples. But our Bash examples are wrongly considering that $ is a bash script variable instead of the prompt.

[wouterj]

Please note that this CSS solution is a problem: At least in Chrome, the text doesn't show up as selected, but is still included in the copied text. This means it'll still copy the middle $ when selecting multi-line bash scripts, e.g:

$ symfony new blog
$ cd blog

This may result in some unexpected behaviour for our users.

@javiereguiluz I think that's because we're consistently using the wrong lexer for bash script. bash is for bash scripts, but console or shell-session is for console examples. These will be using the BashSessionLexer, which is meant for console examples.

[wouterj]

Btw, if we're going to use console for all bash session examples and $ has it's own class (.gp), there is a much nicer solution which works in all browsers without a problem:

.gp{
  visibility:hidden;
  display:inline-block;
  width:16px; /* to be modified to be the width of "$ " */
}
.gp:before{
  content:'$ ';
  visibility:visible;
}

Example: http://jsbin.com/higohurepa/edit?html,css,output

Psuedo elements are never included in the copied text.

This will also finally close #3826

[javiereguiluz]

@wouterj very nice! The problem is that our highlighter is not doing the right highlight for bash blocks and I still don't know why :(

[wouterj]

@javiereguiluz again, that's because we use .. code-block:: bash, but we have to use .. code-block:: console

[wouterj]

see #6930 for a PR fixing this

[xabbuh]

Should be fixed now. Let's see how it looks like when the documentation has been rebuilt.

[wouterj]

Reopening as #6865 (comment) is not yet applied to symfony.com (and the issue was actually about that).

/cc @javiereguiluz