csdn 博客代码块显示复制按钮

最新推荐文章于 2024-05-26 20:46:20 发布
最新推荐文章于 2024-05-26 20:46:20 发布
阅读量6.3k 收藏 22
点赞数 17
分类专栏： 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsjzzcbq/article/details/83039039
版权

相信很多初步使用 csdn 博客写文章的朋友都会有这样的困惑，为什么别人的代码既有高亮，又有复制按钮，而自己的代码却做不到，博主刚刚写文章时也遇到过同样的困惑，在网上搜了一些资料，但发现不全面，为此写一片文章进行总结，以方便后来人少走弯路。

 

首先，csdn 的编辑器是分为 MarkDown编辑器 和 HTML编辑器

MarkDown编辑器，只有代码高亮，没有复制按钮。这就是为什么很多新手无论怎么调试，也调不出来复制按钮的原因

HTML编辑器，既有代码高亮，又有复制按钮

 

所以，如果想让自己的代码既高亮又有复制按钮，就必须使用 HTML编辑器

 

下面分别介绍 MarkDown编辑器 和 HTML编辑器的代码部分的使用

 

MarkDown编辑器

相信看到上述图片的你一定能够明白，MarkDown编辑器如果想让代码高亮，就必须三个`号后边指定代码类型，如java、html、js、xml、yml等

 

HTML编辑器

点击上图标记处，添加代码

注意，在右侧选择代码类型

文章发布后效果如下

相信，这就是很多新人想要的代码高亮和复制按钮

 

悟世君子
关注
  • 17
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
博客园设置代码复制按钮
艾孜尔江的博客
02-02 3万+
将下方代码贴到博客园中设置选项里面的页面定制CSS代码中： /*添加按钮*/ .cnblogs-markdown pre { position: relative; } .cnblogs-markdown pre > span { position: absolute; top: 0; right: 0; border-radius: 2px; padding: 0 10px; font-size: 12px; background: rgba(0, 0, 0, 0.
使用clipboardjs实现仿CSDN的代码复制功能
01-24
以上就是使用ClipboardJS实现仿CSDN代码复制功能的基本步骤。通过这种方式，你可以轻松地在自己的博客或文档中添加这个实用功能。在实际应用中，可能还需要根据具体需求进行样式调整和错误处理优化，以提供更友好的...
csdn的复制代码功能如何实现
zhourongxiang1的博客
04-28 823
按钮在文本框里面，所以文本框是父元素，按钮是子元素。要使得按钮在文本框的右上角，需要使用绝对定位。"文本已复制到剪贴板"
将csdn复制的东西换行
04-09
将csdn复制的东西换行,比如在配置pcl时需要将依赖的库名字输入，在csdn上复制后就变成挨着的，这个小程序可以将挨着的换行，注意data.txt即为复制过来的数据
去除csdn网页限制复制
最新发布
weixin_49119066的博客
05-26 741
去除复制限制
CSDN不用登录也可以复制代码，解决登录后才能复制的办法
热门推荐
NoviceZ的博客
12-09 1万+
背景 我司对外网使用了拦截，导致CSDN无法登录，但是工作中时不时会参考一下CSDN的代码（一键复制），而鼠标放到代码上面则会提示登陆后复制，这就很伤心难过了。 解决CSDN登陆后复制的2种办法 方法一 1、鼠标右键想要复制的代码（一定要将光标放到代码上面），然后选择检查，进入到开发者模式。 2、选择Elements进入元素。 3、选择Styles进入样式。 4、在styles下方有个filter筛选器，输入select。 5、搜索结果里面有一些user-select：none（包括webk
CSDN中无代码复制按钮，复制他人代码粘贴变成一行的解决办法
zhb2004xp的博客
02-19 7036
今天看到一个博主的代码，想下载来测试一用。但页面没有复制代码按钮，直接复制粘贴就变成了下面的样子。 整个代码成了一行，虽然还能编译下载，但用起来太麻烦： 在网上找了一个多小时，也没有解决问题，然后试了多次，无意间复制粘贴成功了，操作很简单，具体原理我也不懂，分享出来给需要的朋友。 复制的时候鼠标从第一行的序号"1"左侧开始，按下左键进行圈选 当鼠标拉拉到序号和第1行代码中间的空隙的...
CSDN云IDE怎样克隆代码
LQ的博客
10-24 2331
CSDN云IDE怎样克隆代码
92款超级漂亮的css按钮样式 复制即用
十一月廿七风雨大作
01-10 1万+
样式如图，代码已在结尾，按照序号复制粘贴便可直接用了：代码：
CSDN去代码序号程序（JAVA版）
11-28
然而，这些代码示例为了便于阅读，通常会带有行号，这对于直接复制粘贴到项目中可能会带来不便，因为这些行号在实际代码中是不需要的。因此，开发一个“CSDN去代码序号程序（JAVA版）”显得非常实用。 这个程序的...
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
10-26
最后，`<button>`元素与`test()`函数关联，用户点击按钮时就会调用`copyToClipboard`函数，将`dddd`（在实际应用中应替换为实际需要复制的文本）复制到剪贴板。 总的来说，实现JavaScript在Firefox中复制到剪贴板的...
一键复制内容
09-08
一键复制兼容苹果手机，一键复制兼容苹果手机一键复制兼容苹果手机一键复制兼容苹果手机一键复制兼容苹果手机=
复制粘贴源代码
09-15
java开发（一）文本的复制粘贴 import java.awt.Toolkit; import java.awt.datatransfer.Clipboard; import java.awt.datatransfer.DataFlavor; import java.awt.datatransfer.StringSelection; import java.awt.datatransfer.UnsupportedFlavorException; import java.io.IOException; public class CopyAndPaste { public static void main(String[] args) { //copy(); //可以 在键盘上 ctrl + v paste(); } public static void copy(){ Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = "这是要拷贝的内容"; StringSelection selection = new StringSelection(text); clipboard.setContents(selection, null); } public static void paste(){ Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); DataFlavor flavor = DataFlavor.stringFlavor; if(clipboard.isDataFlavorAvailable(flavor)){//是否符合剪贴板的数据类型 try { System.out.println("此时剪贴版的数据是：" + clipboard.getData(flavor)); } catch (UnsupportedFlavorException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } } }
WordPress代码高亮插件CodeColorer汉化升级版
05-11
lines (integer) –指定代码块显示的行数，当值设置为-1时，不出现纵向滚动条，可在设置界面更改。 width (integer or string) – 代码块宽度，可在设置界面更改。 height (integer or string) – 代码块高度，当...
优秀代码编辑器 EmEditor Professional 20.7.1 + x64 中文免费版.zip
05-23
EmEditor Professional 中文版支持多种配置，自定义颜色、字体、工具栏、快捷键设置，可以调整行距，避免中文排列过于紧密，具有选择文本列块的功能(按ALT 键拖动鼠标)，并允许无限撤消、重做，总之功能多多，使用...
复制CSDN原创博客的代码（带格式）
Mr0cheng的专栏
11-26 6075
现在CSDN原创博客的代码，一次性不能复制粘贴过多，不然得到的是无格式的代码。虽然现在编辑器可以将代码格式化，但是效果并不好，特别是有注释的时候。 1. 复制代码 用火狐浏览器，选中复制的代码 右键选择查看选中部分源代码 在新建的窗口，ctrl+c就行了 2. 去html标签 有的时候会带有html标签，所以需要用正则表达式去除标签。而且，现在的编辑器都会带有正则表达式的替换功能。 在编辑器...
csdn 博客代码块显示复制按钮
u011029104的专栏
07-02 501
相信很多初步使用 csdn 博客写文章的朋友都会有这样的困惑，为什么别人的代码既有高亮，又有复制按钮，而自己的代码却做不到，博主刚刚写文章时也遇到过同样的困惑，在网上搜了一些资料，但发现不全面，为此写一片文章进行总结，以方便后来人少走弯路。 首先，csdn 的编辑器是分为 MarkDown编辑器 和 HTML编辑器 MarkDown编辑器，只有代码高亮，没有复制按钮。这就是为什么很多新手无论怎么调试，也调不出来复制按钮的原因 HTML编辑器，既有代码高亮，又有复制按钮 所以，如果想让..
如何正确复制CSDN文章到自己的博客
weixin_70280523的博客
11-17 3402
csdn
规避 CSDN 必须登录 才能复制别人文章里的代码
champion_ooO的博客
05-26 2455
在CSDN看文章时，由于CSDN官网增加了限制，必须要登录才能复制代码，但是某些开发是公司内的内网，是登录不了账号的。接下来教你一分钟解决这个登录限制。第二步：在console控制台输入以下代码：document.body.contentEditable = true即可。第一步：在你需要复制代码的文章页面，F12打开控制台。第三步：现在可以任意复制你想复制的代码了。
csdn博客中命令后边点击复制按钮实现复制的功能怎么实现的
05-25
CSDN博客中点击复制按钮实现复制的功能，是通过JavaScript代码实现的。 一般来说，这个功能的实现步骤如下： 1. 首先，需要在HTML中添加一个按钮，用于点击触发复制操作。 ```html <button id="copy-btn">复制</button> ``` 2. 然后，在JavaScript中获取需要复制的内容，并将其赋值给一个临时的DOM元素。 ```javascript const content = '需要复制的内容'; const temp = document.createElement('textarea'); temp.value = content; document.body.appendChild(temp); temp.select(); ``` 3. 接下来，执行复制操作。可以使用document.execCommand()方法来实现复制操作。 ```javascript document.execCommand('copy'); ``` 4. 最后，移除临时DOM元素。 ```javascript document.body.removeChild(temp); ``` 完整的代码如下所示： ```html <button id="copy-btn">复制</button> <script> const content = '需要复制的内容'; const temp = document.createElement('textarea'); temp.value = content; document.body.appendChild(temp); temp.select(); document.execCommand('copy'); document.body.removeChild(temp); const copyBtn = document.getElementById('copy-btn'); copyBtn.addEventListener('click', () => { const temp = document.createElement('textarea'); temp.value = content; document.body.appendChild(temp); temp.select(); document.execCommand('copy'); document.body.removeChild(temp); }); </script> ``` 当用户点击复制按钮时，就会触发复制操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟世君子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值