Tripple clicking inline code should select it

[PeppeL-G]

Feature request

The following markdown code:

Use the code `print(sum(4, 7))` to print the sum of 4 and 7.

is compiled to:

<p>Use the code <code>print(sum(4, 7))</code> to print the sum of 4 and 7.</p>

Tripple clicking on a word inside <code> will select the entire paragraph (since that's the closest block element), but most often you just want to select the code inside the <code> element, so you can copy-paste it. Adding display: block to <code> would give you this functionality, but that would of course render it as a block element which would screw up the presentation, so I suggest adding display: inline-block to <code> elements instead. Unfortunately, tripple clicking on an inline-block element only selects it's content in FireFox, and not in Chrome or Edge (haven't tested other browsers on windows 10), but at least the functionality would work in FireFox.

You can try tripple clicking on a code element here:

https://jsfiddle.net/ywup1rho/1/

What problem does this feature solve?

Easier to select and copy-paste inline code.

What does the proposed API look like?

N/A

How should this be implemented in your opinion?

Add display: inline-block to the CSS rule with the selector .theme-default-content code, and change padding and margin so it looks good.

Are you willing to work on this yourself?

Sure.

[kefranabg]

This is a good idea, but I think we should find a way to make it work on all browsers, not just Firefox.

[PeppeL-G]

I agree that identical cross-browser experience is better, but I don't know how to achieve that without using client-side JS. But maybe using the CSS property user-select could work just as well (clicking just once to select it):

https://jsfiddle.net/w4jnqrfp/

[PeppeL-G]

My bad, user-select: all does not seem to have good browser support yet (73%):

https://caniuse.com/#feat=mdn-css_properties_user-select_all

[Mister-Hope]

My bad, user-select: all does not seem to have good browser support yet (73%):

https://caniuse.com/#feat=mdn-css_properties_user-select_all

But it;s already good enough, much better then our situation now.

[roeeyn]

May it be an option adding some button in the code box, that adds the code in the clipboard by just clicking it?

[PeppeL-G]

@roeeyn I think that would work good for block code consisting of multiple lines, but I don't think it would work good for inline code, where there could be many code pieces on the same line.

user-select: all is the best solution I can think of at the moment. Can we get an official approvement of implementing it like that? If so, anyone is welcome to do it.

[kefranabg]

73% support is better than nothing I guess! Contributions welcome!

[adico1]

i can take this one

[adico1]

Hi,

I found the way to change the code section in the 'Guide'.

I looked for other places and found non so because I'm not very familiar with the project can you help me identify places where this should be in affect.

Thanks

[adico1]

@kefranabg hi, can I get a review?

[Saeed-Paris]

hi @PeppeL-G can't we just use

<p> Use the code  <code><span> print(sum(4, 7)</span></code> to print the sum of 4 and 7 </p>

code{
  display: inline-flex;
}

OR

<p>Use the code <code>print(sum(4, 7))</code> to print the sum of 4 and 7.</p>

p{
  display: inline-flex;
  }