成功复制CSDN博客中的代码的几种方法

背景

由于公司有规定，不能直接登陆CSDN，由于工作中时不时会参考一下CSDN的代码（主要是想一键复制），而鼠标放到代码上面则会提示登陆后复制，这就很伤心难过了。CSDN代码要登录才能复制，让这个平台的使用体验极其不太好（仅此吐槽一下而已），小编为大家整理了以下几种方法可以解决。

方法一：浏览器开发者模式改元素

1、鼠标右键想要复制的代码（一定要将光标放到代码上面），然后右键选择“检查”，进入到开发者模式。

2、选择Elements，即进入元素这个标签下。

3、选择右侧Styles进入样式。

4、在styles下方有个filter筛选器，输入select。

5、搜索结果里面有一些user-select：none（包括webkit-user-select：none）相关的字段，注意有两块地方，我们需要把他们前面的勾选框取消掉。

操作方法：在代码区域左上角点击鼠标右键，然后点击“检查”。

检查源代码
点击图片放大

修改code标签的这个css属性user-select: text;
code标签
点击图片放大

方法二：浏览器开发者模式改标签

1、鼠标右键想要复制的代码（一定要将光标放到代码上面），然后选择检查，进入到开发者模式。

2、选择Elements进入元素。

3、随便点击一下elements下方的代码块，然后按Ctrl+F进入搜索，输入pre code，我们需要找到一个style的标签，然后右键选择Delete element将这个标签删除。

然后也就可以复制代码了。

修改pre这个标签的css属性user-select: text;
pre标签

点击图片放大

如果还不行，就需要继续把监听copy的事件都删掉

经过这样修改，就可以复制代码了。

方法2：打开控制台执行一条命令【魔法口令】

请注意，该方法不一定适用于所有浏览器，我的测试环境是chrome浏览器，测试成功。

打开网页后，按F12到控制台(Console)，然后输入如下命令代码，按回车键执行，然后可通过 CTRL X 剪切的方式来复制代码。

javascript:document.body.contentEditable='true';document.designMode='on'; void 0

点击图片放大

如果上面代码无效，可以试试在控制台(Console)输入如下代码，按回车键执行命令。

javascript:window.oncontextmenu=document.oncontextmenu=document.oncopy=null; [...document.querySelectorAll('body')].forEach(dom => dom.outerHTML = dom.outerHTML); [...document.querySelectorAll('body, body *')].forEach(dom => {['onselect', 'onselectstart', 'onselectend', 'ondragstart', 'ondragend', 'oncontextmenu', 'oncopy'].forEach(ev => dom.removeAttribute(ev)); dom.style['user-select']='auto';});

这个方法比第一种方法好用快捷，不过你要把这些代码收藏备用。

需要跳过关注，以下代码可以尝试一下

var article_content=document.getElementById("article_content");
article_content.removeAttribute("style");
 
var follow_text=document.getElementsByClassName('follow-text')[0];
follow_text.parentElement.parentElement.removeChild(follow_text.parentElement);
 
var  hide_article_box=document.getElementsByClassName(' hide-article-box')[0];
hide_article_box.parentElement.removeChild(hide_article_box);