How to make text Copyable?

[ahandsel]

Is your feature request related to a problem? Please describe.

I really like Slidev but unlike reveal.js, I cannot copy the text from my Slidev slides. Being dyslexic, I need my slides to be readable by my text-to-audio programs.

I noticed that Slidev's CSS includes the following:

{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

How can I disable this CSS that prevents simple copying of text?

Describe the solution you'd like A simple way to disable the CSS (mentioned above) to enable copying of text

Thank you for your time 🙇‍♂️

[LarchLiu]

you can set selectable to true in the frontmatter of your first slide.

[ahandsel]

Thank you @LarchLiu ! 🥳 I did not think to use selectable when searching for the text selection feature. It is so obvious in hindsight!

Adding a bit more information for others. + Update

To Make Text Copyable in Slidev Slides

Method 1 - selectable setting

Enable the selectable setting by adding selectable: true in the first slide's frontmatter.
It is laid out in Slidev's config.ts file.
⚠️ Warning: This method may not work with imported Slidev themes.

First slide's frontmatter

---
theme: seriph
class: text-center
highlighter: shiki
lineNumbers: false
drawings:
  persist: false
selectable: true
download: true
background: ./background/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpeg
title: Pandas~
info: Presentation on how amazing pandas are!
---

Method 2 - Add a overriding style.css file

Create a style.css file in the project root folder with the following to override all other style configurations for your Slidev project. ⚡ This works with any Slidev theme.

style.css

.slidev-layout {
  h1, h2, h3, h4, p, div {
    @apply select-text;
  }
}

[antfu]

PR welcome to support selectable: false and remove the global user-select disabling.

[tonai]

If it is just a matter of the default value for the selectable option, I created a PR for selectable to be false by default: https://github.com/slidevjs/slidev/pull/545

[anburocky3]

Yea, adding another frontmatter prop like code_copy: true would be super helpful i think.

So that, in all our code snippets, we can copy the text without any issues.

Making selectable in first slide is not a solution, it enables us to copy all the slide text (for example: we can select heading, images etc.., but actually we want to copy code alone.)

[antfu]

v0.34.2 added the button to copy the code for each code block.

[anburocky3]

Cool release! Thanks

How about making selectable to code blocks?

What suppose, while on presentation, we have to tell them line by line by selection? I know we can do it by adding animations like {1}, but even after displaying that animation, explaining them in detail requires this selectable.

Like this:

The problem i have is that, when i have selectable: true, all slide elements are selectable.

[antfu]

Would

.slidev-code {
  user-select: text;
}

work?

[anburocky3]

Would

.slidev-code {
  user-select: text;
}

work?

Works Great! I think we can close this issue.