CC98 HighLight

highlight code in www.cc98.org

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
Slowist-Lee
日安装量
0
总安装量
5
评分
1 0 0
版本
2.2
创建于
2024-09-28
更新于
2024-09-28
大小
3.8 KB
许可证
Apache 2.0
适用于

CC98内代码编辑器的优化工具,可以对代码进行高亮,并且添加复制按钮。
自定义界面:

高亮风格选择

可以通过修改style.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/kimbie-light.min.css';进行自定义。
highlight.js给的官方的demo在: https://highlightjs.org/demo 在这里可以选择你想要的样式并且预览。找到你喜欢的样式,记住名字,然后在https://cdnjs.com/libraries/highlight.js/11.7.0 内可以找到cdn服务器储存的css文件,这样调用速度比在github上快很多。
我们以我这里用的kimbie-light.min.css为例: 我们先在https://highlightjs.org/demo中预览,之后我们CTRL+F在https://cdnjs.com/libraries/highlight.js/11.7.0内进行搜索,点击左侧的link图标,复制对应的url: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/kimbie-light.min.css
放入对应的引用的位置即可~

按钮样式设置

可以在以下代码片段中根据代码的意义及注释修改~

const copyButton = document.createElement('button');
copyButton.textContent = 'Copy'; //modify the text
copyButton.style.position = 'absolute';
copyButton.style.top = '5px';
copyButton.style.zIndex = '9999'; //ensure it's on the top
copyButton.style.backgroundColor = '#E8E8E8';  //modify RGB to change the color of the button
copyButton.style.color = '#616161';  //modify RGB to change the color of the text
copyButton.style.cursor = 'pointer';
copyButton.style.padding = '5px 10px';
copyButton.style.border = 'none';
copyButton.style.borderRadius = '3px';

未解决的问题

目前加载时还是有点卡顿,感觉是highlight.js的延时导致。本来想用动态DOM检测,但实际测试中发现highlight不知道为什么总是会卡顿……


第一次磕磕碰碰的写这种脚本,写的有点冗杂/乱七八糟,请见谅。
github地址:https://github.com/Slowist-Lee/CC98Opitimize/tree/op1-highlight,一些学习的磕磕碰碰的想法也放在里面QAQ
欢迎使用,欢迎PR!不胜感激 qwq