能否移除learnr教程中的“copy to clipboard”功能按钮?
答复结论
这个需求完全可以实现,不需要修改learnr包的底层源码,加几行简单的自定义配置就能搞定。配置生效后,习题参考答案旁自带的「copy to clipboard」按钮会被移除,仅保留用户手动选中文本复制的操作路径,彻底规避按钮复制内容粘贴到习题块触发报错的问题。
具体实现方法
方法1:CSS隐藏(最简便,优先推荐)
这个方法操作成本最低,不会影响普通代码块的复制按钮,也不会干扰参考答案的展开、收起、内容展示等原有功能。
你只需要在教程对应的Rmd文件开头,插入一个CSS类型的代码块,写入如下规则即可:
/* 隐藏习题参考答案区域的复制按钮 */ .tutorial-exercise-solution .btn-copy { display: none !important; }
保存后重新渲染运行教程,所有习题的参考答案区域就不会再显示复制按钮。
方法2:JS动态移除(适配高定制场景)
如果你的教程加了很多自定义主题、样式,担心CSS优先级不够导致隐藏失效,可以用这段脚本,在参考答案渲染完成后直接把复制按钮元素从页面删掉,稳定性更高。
操作方式是打开Rmd里的初始化setup代码块,加入如下配置:
learnr::tutorial_options( exercise.setup = { htmltools::tags$script(htmltools::HTML(" // 监听参考答案渲染完成事件,触发后移除对应复制按钮 $(document).on('shiny:value', function(e) { if (e.name.endsWith('-solution')) { setTimeout(function(){ e.el.querySelector('.btn-copy')?.remove(); }, 50); } }); ")) } )
界面参考
配置前后的界面差异仅为移除参考答案右上角的复制按钮,其余功能完全不变,对应界面如下:
内容的提问来源于stack exchange,提问作者FG120
相关产品推荐
相关产品推荐

