vuejs/vuepress

Tripple clicking inline code should select it

Open

#1893 opened on Sep 26, 2019

View on GitHub
 (11 comments) (1 reaction) (0 assignees)JavaScript (22,300 stars) (4,782 forks)batch import
Hacktoberfestgood first issuetype: feature request

Description

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.

Contributor guide